UI tabs is actually a nice way to present content and in fact it works
well with many menu systems.
It is not a solution to all menu presentation but it does help in many
situations.
I took the example from the UI demo package samples but I modified to
illustrate two situations.
One is tabs invoked on mouse click which is default:
$('#tabs').tabs();
that is all.
or
$('#tabs').tabs({ event: 'click'});
In fact the selector $('#tabs') can be anything. I like to call it
that way. The id name is the one on which the
divs are selected.
The content(data ) is presented thusly.
<div id="foobar">
<ul>
<li href="#first"> First </li>
<li href="#second" > Second </li>
</ul>
<div id="first"> Hi, this is first tab </div>
<div id="second"> Hi, this is second </div>
</div>
Notice two things here.
The div on which the tabs operate, the selector in the javascript code
is actually a container div for
the tab headings and also the tab content.
The headings are a ul list which is linked to the tab content div id.
The href= is used to indicate that.
The code section is little complicated because I do some antics to
show the mouse over feature and illustrate
which tab event is currently active.
But it can be just one line of code.
$('#tabs').tabs();
or
$('#tabs').tabs({event: 'mouseover' });
That is all.
$(function() {
$( "#tabs" ).tabs();
$('#cl').click(function() {
$('input').css({ color: 'black'});
$(this).css({ color: 'red'});
$( "#tabs" ).tabs({ event: 'click'});
});
$('#ms').click(function() {
$('input').css({ color: 'black'});
$(this).css({ color: 'red'});
$( "#tabs" ).tabs({
event: "mouseover"
});
});
});
-Girish
--
Gayatri Hitech
http://gayatri-hitech.com
_______________________________________________
ILUGC Mailing List:
http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
ILUGC Mailing List Guidelines:
http://ilugc.in/mailinglist-guidelines
