Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Feb 29, 2012 08:07 AM by avinash_rc
Member
113 Points
304 Posts
Feb 29, 2012 07:09 AM|LINK
Hi
I am trying to use the jquery UI tab example from Jquery UI. I used the themed tool which i downloaded the code.
Having used the html markup example and css i still cannot get the tabbing to display.
Can anyone give me a good example?
thanks
Participant
1483 Points
330 Posts
Feb 29, 2012 08:07 AM|LINK
Here is a simple jquery tab functionality, Implemented, tested and working.
see in action here, http://jsfiddle.net/TJfYf/1/
in html,
<div id="tab-wrapper"> <ul class="tabs"> <li><a class="defaulttab active" rel="tabs1">Tab1</a></li> <li><a rel="tabs2">Tab2</a></li> <li><a rel="tabs3">Tab3</a></li> </ul> <div class="tab-content" id="tabs1">Tab1</div> <div class="tab-content" id="tabs2">Tab2</div> <div class="tab-content" id="tabs3">Tab3</div> </div>
css,
ul.tabs li {display:block;float:left;position: relative;z-index: 0}ul.tabs li a {padding:12px 10px;display:block;float:left;background-color:#fff;border: 1px solid silver;}ul.tabs li a.active {background: #d2d2d2}.tab-content {width: 300px;height: 200px;clear:both;border: 1px solid silver;position: relative;z-index: 1;background: #fff;}
javascript, dont forget to include jquery.js,
$(document).ready(function(){ switch_tabs($('.defaulttab')); $('.tabs a').click(function() { switch_tabs($(this)); }); }); function switch_tabs(obj) { $('.tab-content').hide(); $('.tabs a').removeClass("active"); var id = obj.attr("rel"); $('#' + id).show(); obj.addClass("active"); }
Feb 29, 2012 08:17 AM|LINK
Here is the simple code, implemented,tested and working
also see in action here, http://jsfiddle.net/TJfYf/1/
in css,
ul.tabs li {display:block;float:left;position: relative;z-index: 0} ul.tabs li a {padding:12px 10px;display:block;float:left;background-color:#fff;border: 1px solid silver;} ul.tabs li a.active {background: #d2d2d2} .tab-content {width: 300px;height: 200px;clear:both;border: 1px solid silver;position: relative;z-index: 1;background: #fff;}
in javascript, (dont forget to include jquery.js)
1020 Points
231 Posts
Feb 29, 2012 08:23 AM|LINK
Check if you have added all the necessary .js and .css files in page. Belwo link might help:
http://www.codegateway.com/2012/02/jquery-tabs-ui.html
tejp
Member
113 Points
304 Posts
Jquery UI tab
Feb 29, 2012 07:09 AM|LINK
Hi
I am trying to use the jquery UI tab example from Jquery UI. I used the themed tool which i downloaded the code.
Having used the html markup example and css i still cannot get the tabbing to display.
Can anyone give me a good example?
thanks
pratik_galor...
Participant
1483 Points
330 Posts
Re: Jquery UI tab
Feb 29, 2012 08:07 AM|LINK
Here is a simple jquery tab functionality, Implemented, tested and working.
see in action here, http://jsfiddle.net/TJfYf/1/
in html,
<div id="tab-wrapper"> <ul class="tabs"> <li><a class="defaulttab active" rel="tabs1">Tab1</a></li> <li><a rel="tabs2">Tab2</a></li> <li><a rel="tabs3">Tab3</a></li> </ul> <div class="tab-content" id="tabs1">Tab1</div> <div class="tab-content" id="tabs2">Tab2</div> <div class="tab-content" id="tabs3">Tab3</div> </div>css,
javascript, dont forget to include jquery.js,
$(document).ready(function(){ switch_tabs($('.defaulttab')); $('.tabs a').click(function() { switch_tabs($(this)); }); }); function switch_tabs(obj) { $('.tab-content').hide(); $('.tabs a').removeClass("active"); var id = obj.attr("rel"); $('#' + id).show(); obj.addClass("active"); }Software Engineer,
iGATE Global Solutions.
pratik_galoria@yahoo.co.in
+91-8905195943
pratik_galor...
Participant
1483 Points
330 Posts
Re: Jquery UI tab
Feb 29, 2012 08:17 AM|LINK
Here is the simple code, implemented,tested and working
also see in action here, http://jsfiddle.net/TJfYf/1/
in html,
<div id="tab-wrapper"> <ul class="tabs"> <li><a class="defaulttab active" rel="tabs1">Tab1</a></li> <li><a rel="tabs2">Tab2</a></li> <li><a rel="tabs3">Tab3</a></li> </ul> <div class="tab-content" id="tabs1">Tab1</div> <div class="tab-content" id="tabs2">Tab2</div> <div class="tab-content" id="tabs3">Tab3</div> </div>in css,
ul.tabs li {display:block;float:left;position: relative;z-index: 0} ul.tabs li a {padding:12px 10px;display:block;float:left;background-color:#fff;border: 1px solid silver;} ul.tabs li a.active {background: #d2d2d2} .tab-content {width: 300px;height: 200px;clear:both;border: 1px solid silver;position: relative;z-index: 1;background: #fff;}in javascript, (dont forget to include jquery.js)
$(document).ready(function(){ switch_tabs($('.defaulttab')); $('.tabs a').click(function() { switch_tabs($(this)); }); }); function switch_tabs(obj) { $('.tab-content').hide(); $('.tabs a').removeClass("active"); var id = obj.attr("rel"); $('#' + id).show(); obj.addClass("active"); }Software Engineer,
iGATE Global Solutions.
pratik_galoria@yahoo.co.in
+91-8905195943
avinash_rc
Participant
1020 Points
231 Posts
Re: Jquery UI tab
Feb 29, 2012 08:23 AM|LINK
Hi
Check if you have added all the necessary .js and .css files in page. Belwo link might help:
http://www.codegateway.com/2012/02/jquery-tabs-ui.html
code samples
--------------------------------------------------