Quick Start

In this quick start, you'll learn how to add the Tabs widget to an HTML project using HTML markup and jQuery script.

To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
Paste in your favorite text editor.
Copy Code

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Paste in your favorite text editor.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

References	Copy Code
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20183.140.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20183.140.js" type="text/javascript"></script> <!--Knockout JS Library--> <script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20183.140.js" type="text/javascript"></script>

References

Copy Code

<!--jQuery References--> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20183.140.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20183.140.js" type="text/javascript"></script>
 
<!--Knockout JS Library-->
<script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script>
  
<!--Wijmo Knockout Integration Library-->
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20183.140.js" type="text/javascript"></script>

Add the following markup within the <body> tags to create the widget. The first <div> element creates the tabs widget; its id attribute is set to 'tabs,' which we call in the jQuery script to initialize the widget. The <ul> element sets the label text to show in the two tabs that are shown initially. The first nested <div> element contains content to display in the first tab. The second nested <div> element contains content to display in the second tab.

Markup	Copy Code
<div id="tabs"> <ul><li><a href="#tabs-1">Blippity Fling-Flang</a> </li> <li><a href="#tabs-2">Blipnoodle</a> </li></ul> <div id="tabs-1"> <p>Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo flungwhack shnizzlegobble ho a blop bing bangflib yap boo weeble. Boo wacko ho dabba Ongle Fling ha bing ho wow a flap-boo-plop jingle funkzonk ho blatwiddle, nip dinglezoom duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack Razzbleeb. Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo bang). <a href="http://bff.orangehairedboy.com/">Blippity Fling-Flang by orangehairedboy</a></p> </div> <div id="tabs-2"> <p>Zip abracadabra bananaramaflup. Zip flunging dang boo bang yip zangle. Loo flupping funky zunkity roo tizzle boo twiddling flungfloo. Flobble jingle ting nip nizzle bleep dang yip zingle. "Duh zonk ho?" razz Tony Soprano. Miss Beasley zap blang loo zonk dingely dilznoofustwiddle. "Ho izzle dee?" bloo You. Blap ho flipping meepwow.</p> </div> </div>

Markup

Copy Code

<div id="tabs">
     <ul><li><a href="#tabs-1">Blippity Fling-Flang</a> </li>
          <li><a href="#tabs-2">Blipnoodle</a> </li></ul>
     <div id="tabs-1">
          <p>Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo flungwhack shnizzlegobble ho a blop bing bangflib yap boo weeble. Boo wacko ho dabba Ongle Fling ha bing ho wow a flap-boo-plop jingle funkzonk ho blatwiddle, nip dinglezoom duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack Razzbleeb. Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo bang). <a href="http://bff.orangehairedboy.com/">Blippity Fling-Flang by orangehairedboy</a></p>
     </div>
     <div id="tabs-2">
          <p>Zip abracadabra bananaramaflup. Zip flunging dang boo bang yip zangle. Loo flupping funky zunkity roo tizzle boo twiddling flungfloo. Flobble jingle ting nip nizzle bleep dang yip zingle. "Duh zonk ho?" razz Tony Soprano. Miss Beasley zap blang loo zonk dingely dilznoofustwiddle. "Ho izzle dee?" bloo You. Blap ho flipping meepwow.</p>
     </div>
</div>

Within the <head> tags, below the references, add the following script to initialize the widget and set options to customize it.

Sets the sortable option to true, allowing users to reorder tabs by dragging them into new positions.
Sets the collapsible option to true so that when you click an already-open tab, it collapses.

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs({ sortable: true, collapsible: true }); }); </script>

Save your HTML file and open it in a browser. The widget appears like the following live widget. Click and drag tabs to reorder them, or click a tab that is already open to collapse it.

KO

Concepts

Reference