Print Page - Hide/delete tab header

Title: Hide/delete tab header
Post by: ClSoft on April 08, 2013, 12:29:52 PM

Hi all
any option ti hide tab header?
I try with height:0 but it does not work.
I will drive the tabs with accordion.
Thanks.

Title: Re: Hide/delete tab header
Post by: ClSoft on April 15, 2013, 01:21:30 AM

Is it possible to somehow hide or delete tab header.
Thanks!

Title: Re: Hide/delete tab header
Post by: stworthy on April 15, 2013, 03:12:08 AM

Why to hide tabs header? If so you will not be able to switch different panel by clicking the tab title.

Title: Re: Hide/delete tab header
Post by: ClSoft on April 15, 2013, 04:17:42 AM

Hello
I'm using something like this:
http://www.jeasyui.com/documentation/index.php
but instead of tree (on left side) I'm using Accordion.
Each click on tree load page to tab (using href). If tab does not exists, it is created and if it exists, it is reused - it is great idea, btw.
Thanks!

Title: Re: Hide/delete tab header
Post by: ClSoft on April 16, 2013, 11:43:50 PM

stworthy, do you have idea how to hide or delete tab header, please?

Title: Re: Hide/delete tab header
Post by: stworthy on April 17, 2013, 12:38:59 AM

Try to add the code below to the page.

Code:

	<style type="text/css">
		.tabs-header{
			display:none;
		}
		.tabs-wrap{
			height:0;
		}
	</style>

Title: Re: Hide/delete tab header
Post by: ClSoft on April 17, 2013, 03:59:44 AM

Hello
it works perfect.
Thanks man.

Title: Re: Hide/delete tab header
Post by: ClSoft on April 17, 2013, 05:41:53 AM

Me again :(
is it possible to use different style for tabs?
I mean, I need to hide some tabs but css above hide all my tabs and it should not :(

Title: Re: Hide/delete tab header
Post by: ClSoft on April 29, 2013, 01:05:06 PM

stworthy
your example works fine, but I have some other tabs and I need to display their header (title).
Do you have some idea of how to hide title/header only for specified tab object and not for all?
Thanks.

Title: Re: Hide/delete tab header
Post by: stworthy on April 29, 2013, 06:34:50 PM

Try the following code:

Code:

<style type="text/css">
	.mytabs .tabs-header{
		display:none;
	}
	.mytabs .tabs-wrap{
		height:0;
	}
</style>
<div class="easyui-tabs" style="width:700px;height:250px">
	<div title="Sub Tabs" style="padding:10px;">
		<div class="mytabs easyui-tabs" data-options="fit:true,plain:true">
			<div title="Title1" style="padding:10px;">Content 1</div>
			<div title="Title2" style="padding:10px;">Content 2</div>
			<div title="Title3" style="padding:10px;">Content 3</div>
		</div>
	</div>
</div>

Title: Re: Hide/delete tab header
Post by: ClSoft on April 30, 2013, 12:42:58 AM

Hello
thanks for your example, but of course, I have reversed case:
Above tab should have no title/header, and below should be normal.
I try to modify your code but it does not work:

Code:

  <style type="text/css">
    .mytabs .tabs-header{
      display:none;
    }
    .mytabs .tabs-wrap{
      height:0;
    }
  </style>
    <div class="mytabs easyui-tabs" style="width:700px;height:250px">
    <div title="Sub Tabs" style="padding:10px;">
      <div class="easyui-tabs" data-options="fit:true,plain:true">
        <div title="Title1" style="padding:10px;">Content 1</div>
        <div title="Title2" style="padding:10px;">Content 2</div>
        <div title="Title3" style="padding:10px;">Content 3</div>
      </div>
    </div>
  </div>

Title: Re: Hide/delete tab header
Post by: stworthy on April 30, 2013, 04:04:02 AM

Here is another solution to hide the tabs's header.

Code:

<script>
$.extend($.fn.tabs.methods, {
	hideHeader: function(jq){
		return jq.each(function(){
			var header = $(this).children('div.tabs-header');
			header.css('background-color','transparent');
			header.find('div.tabs-wrap').css('height',0);
			$(this).tabs('resize');
		});
	}
});
</script>

Call 'hideHeader' method to hide the tabs's header.

Code:

$('#tt').tabs('hideHeader');

Title: Re: Hide/delete tab header
Post by: ClSoft on April 30, 2013, 05:09:19 AM

Of course it works perfect !
Thanks a lot!!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: ClSoft on April 08, 2013, 12:29:52 PM