EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: pacific202 on December 28, 2011, 09:53:38 AM

Title: Text beside tabs?
Post by: pacific202 on December 28, 2011, 09:53:38 AM

Is there any way to add some text next to the tabs? Our users have requested that we write some data (user name, server time, etc.) into the UI and we have a lot of blank space in our tab area.

I have tried adding a span behind the <div> tags, but the span content gets written to the bottom of the page and is not in the tab bar.

The attached image shows where we'd like to write text "Message".

Title: Re: Text beside tabs?
Post by: stworthy on December 28, 2011, 06:38:40 PM

Try below code:

Code:

var msg = $('<div></div>').appendTo($('#tt').find('div.tabs-wrap'));
msg.css({
	position:'absolute',
	right:0,
	top:0,
	height:'24px',
	lineHeight:'24px',
	paddingRight:'3px'
}).text('Message');

Title: Re: Text beside tabs?
Post by: pacific202 on January 11, 2012, 06:50:11 PM

This worked perfectly! Thanks!

Title: Re: Text beside tabs?
Post by: pacific202 on January 12, 2012, 07:56:12 PM

One thing I just noticed - when I have nested tabs this writes the text on all the sub-tabs too.

My parent tab container has an id of "tab-container" and the child is called "tab-container-admin".

Title: Re: Text beside tabs?
Post by: tslatt on January 13, 2012, 12:46:30 PM

If you don't plan to have any messages next to the subtabs, give your message div a class, and then hide it for subtabs:

Code:

var msg = $('<div class="tabmsg"></div>').appendTo($('#tt').find('div.tabs-wrap'));
msg.css({
	position:'absolute',
	right:0,
	top:0,
	height:'24px',
	lineHeight:'24px',
	paddingRight:'3px'
}).text('Message');

Code:

#tab-container-admin .tabmsg { display: none; }

Note: I haven't actually tried this code to see if it works, but I *think* it should.