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 Notepad. |
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.
Drop down and copy references to paste inside the head tags
| References |
Copy Code
|
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/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.20133.19.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20133.19.js" type="text/javascript"></script>
<!--Knockout JS Library-->
<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script>
<!--Wijmo Knockout Integration Library-->
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20133.19.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.
Drop down and copy markup to paste inside the body tags
| 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.
Drop down and copy script to paste inside the head tags
| Script |
Copy Code
|
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").wijtabs({
sortable: true,
collapsible: true
});
});
</script> |
- Within the <head> tags, above the script to initialize the widget, set the size of the widget using CSS.
Drop down and copy style to paste inside the head tags
| Style |
Copy Code
|
<style type="text/css">
#dialog label, #dialog input{display: block;}
#dialog label{margin-top: 0.5em;}
#dialog input, #dialog textarea{width: 95%;}
#tabs{margin-top: 1em;}
#tabs li .ui-icon-close{float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;}
#add_tab{cursor: pointer;}
</style> |
- 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.
See Also
Concepts
Reference
Show All
Hide All