Introduction:
Tabs are content area with multiple panels, associated
with header in a list.
Tabs are used to split content into multiple sections that can be used
to save space.
Description:
1. Download JqueryUI from http://jqueryui.com/
2 2. Extract it and include
the files
<script src="jquery-1.10.2.js"
type="text/javascript"></script>
<script type="text/javascript"
src="jquery-ui-1.10.3.custom.js"></script>
<link href="jquery-ui-1.10.3.custom"
rel="Stylesheet"
type="text/css"
/>
3 3. Once the document is ready, initialize tabs
with the tabs section.
$(document).ready(function () {
$("#tabsdiv").tabs();
});
4 4. In order to work properly, tabs must be
used a particular set of markup.
Tabs must be placed in either an ordered or
unordered list.
Tab title should be inside a List item.
If we want
to disable particular tab, we can use the ‘disabled’
property
$("#tabsdiv").tabs({
disabled:
[2] //index start from 0- it will disable third
tab
});
If we want
to remove particular tab,
$('#tabsdiv').tabs('remove',
2); - it will remove third tab
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabsdiv").tabs({
collapsible: true,
event: "mouseover", // default event is 'click',
disabled: [2], //index start from
0
heightStyle: "fill"
});
$('#btnRemovetab').click(function () {
$('#tabsdiv').tabs('remove', 2);
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabsdiv">
<ul>
<li><a href="#tabone">Tab one</a></li>
<li><a href="#tabtwo">Tab two</a></li>
<li><a href="#tabthree">Tab three</a></li>
</ul>
<div id="tabone">
<p>
Add contents here for tab one</p>
</div>
<div id="tabtwo">
<p>
Add contents here for tab two</p>
</div>
<div id="tabthree">
<p>
Add contents here for tab three</p>
</div>
</div>
<asp:Button ID="btnRemovetab" runat="server" Text="Remove tab Three" />
</form>
</body>
</html>
-
0 comments:
Post a Comment