Submit your widget
HomeTabsjquery tabset

jquery tabset

Created 14 years ago   Views 16562   downloads 3299    Author pupunzi
jquery tabset
View DemoDownload
106
Share |

keep your tabs ordered!

A useful component that let you build a tabbed interface really easily; ad you can even sort your tabs as you want!

in the header:

<script type="text/javascript" src="inc/jquery/1.3.2.min.js"></script>
<script type="text/javascript" src="inc/ui.core.min.js"></script>
<script type="text/javascript" src="inc/ui.sortable.min.js"></script>
<script type="text/javascript" src="inc/jquery.metadata.js"></script>
<script type="text/javascript" src="inc/mbTabset.js"></script>
<script type="text/javascript">
    $(function(){
      $("#tabset1").buildMbTabset({
        stop:function(){},
        sortable:true
      });
  });
  </script>

in the body:

<div class="tabset" id="tabset1">
  <!-- a tab with a content inline --> 
  <a id="a" class="tab {content:'cont_1'}">tab 1</a>
  <!-- a tab with a content loaded via Ajax -->
  <a id="b" class="tab sel {content:'cont_2', ajaxContent:'yourUrl',ajaxData:''}">tab 2</a>
  <!-- a disabled and undraggable tab  -->  
  <a id="c" class="tab disabled block {content:'cont_3'}">tab 3 (disabled)</a>
  </div>

  <!-- tab contents --> 
  <div id="cont_1"><h3>content 1</h3></div>
  <div id="cont_2"><h3>content 2</h3></div>
  <div id="cont_3"><h3>content 3</h3></div>

 

 

Tag: tabs

You might also like