In this post Asp.Net jQuery
UI Tab Adding Icons we shall on how to add icons
to the tab headers.
Icons can be added to tab headers by adding appropriate icons classes to the
tags which are used to create the tab structure. Here is an
example.
Add a DIV tag divIconTab to a page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Tabs</title>
Add a DIV tag divIconTab to a page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Tabs</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
// Icon
Tab
$("#divIconTab").tabs({
collapsible: true });
});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Icon
Tab: </td>
<td>
<div id="divIconTab">
<ul>
<li><a href="#tab4"><img class="ui-icon ui-icon-document" border="0"/>Tab-1</a></li>
<li><a href="#tab5"><img class="ui-icon ui-icon-comment" border="0"/>Tab-2</a></li>
<li><a href="#tab6"><img class="ui-icon ui-icon-locked" border="0"/>Tab-3</a></li>
</ul>
<div id="tab4">
Tab-1 Content goes here.
</div>
<div id="tab5">
Tab-2 Content goes here.
</div>
<div id="tab6">
Tab-3 Content goes here.
</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
2 comments:
Hi, how to download the Jquery plugins and CSS... You are using some JQ plugins in your posted codes..Could you please tell me how to download those plugins and CSS..
Thank you...
The CSS and JS Files used in this post are the basic jQuery & jQuery UI files, which can be downloaded from the sites. http://docs.jquery.com/Downloading_jQuery And http://jqueryui.com/download
Post a Comment