In this post Asp.Net jQuery
UI Tab Adding Images we shall on how to add images
to the tab headers.
Images can be added to tab headers by adding appropriate
tags which are used to create the tab structure. Here is an
example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Tabs</title>
Add a DIV tag divImageTab 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
$("#divImageTab").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 src="images/Home.JPG" border="0"/>Tab-1</a></li>
<li><a href="#tab5"><img src="images/Security.JPG" border="0"/>Tab-2</a></li>
<li><a href="#tab6"><img src="images/Users.JPG" 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
No comments:
Post a Comment