Showing posts with label jQuery UI Tabs. Show all posts
Showing posts with label jQuery UI Tabs. Show all posts
Monday, August 6, 2012
Thursday, July 19, 2012
Asp.Net jQuery UI Tab Adding Images
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
Asp.Net jQuery UI Tab Adding Icons
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
Asp.Net jQuery UI Tab Event Handler
In this post Asp.Net jQuery
UI Tab Event Handler we shall on how to handle
the tab events.
Tab events like create, select, etc can be handled by adding appropriate handlers to the tab control as follows.
$("#SimpleTab").tabs(
{
select: function(event,
ui)
{
…
}
});
Asp.Net jQuery UI Tab Animation
In this post Asp.Net jQuery
UI Tab Animation we shall on how to add animation
effects while loading a tab.
Animation can be added to the tab loading by using the option fx as follows.
$("
Asp.Net jQuery UI Tab Mouse Over Tab Switching
In this post Asp.Net jQuery
UI Tab Mouse Over Tab Switching we shall on how to switch between the tabs
when the user hovers the mouse over the tab header.
The tab switching can be enabled on mouse over by setting the event property as follows.
$("
Asp.Net jQuery UI Tab Error Handing for Dynamic Tabs
In this post Asp.Net jQuery
UI Tab Error Handing for Dynamic Tabs we shall on
how to handle errors which occur while creating dynamic tabs and loading remote
data.
All exceptions which are thrown while creating and loading dynamic tabs can be handled using AjaxOption handlers as follows.
Asp.Net jQuery UI Tab Remove Tabs Dynamically
In this post Asp.Net jQuery
UI Tab Remove Tabs Dynamically we shall on how to
remove specific tabs dynamically from the existing collection of tabs.
Tabs can be removed dynamically using the remove option as follows.
$('
Here the Tab with the index value mentioned in
Asp.Net jQuery UI Tab Cache Remote Tab Content
In this post Asp.Net jQuery
UI Tab Cache Remote Tab Content we shall see on enable/disable caching the
content of dynamic tabs which are loaded at runtime.
Caching can be enabled/disabled by setting
the cache property of the tab control as follows.
$("#SimpleTab").tabs("option", "cache", false);
$("#SimpleTab").tabs("option", "cache", false);
The cache property is used when we add dynamic tabs to the tab control, to see on how to add tabs dynamically and the use of cache property, refer to the post Asp.Net jQuery UI Tab Add Tabs Dynamically.
Related Posts
Asp.Net jQuery UI Tab Add Tabs Dynamically
In this post Asp.Net jQuery
UI Tab Add Tabs Dynamically we shall on how to
add tabs dynamically to the existing collection of tabs.
Tabs can be added dynamically using the add option as follows.
$('
Here the page mentioned in the URL property will get loaded into the newly created tab dynamically.
Example
$('#SimpleTab').tabs("add", 'TabData.aspx?TabID=4', 'Tab-4');
Full Example
Add a DIV tag SimpleTab to
the page, and add the below jQuery script. Change the
references of the jQuery library files to map to your local path. Also
create a new .aspx page (TabData.aspx) whose data will get loaded dynamically.
Click the Add Tabs button, notice that a new tab gets created and the content is loaded dynamically from the page TabData.asp.
<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() {
//
// Simple Tab
$("#SimpleTab").tabs({ collapsible: true });
//
// Tabs - Add Tab
$('#btnAddTab').click(function(event)
{
event.preventDefault();
$("#SimpleTab").tabs("option", "spinner",
"Loading ...");
$("#SimpleTab").tabs("option", "cache",
false);
$('#SimpleTab').tabs("add",
'TabData.aspx?TabID=4', 'Tab-4');
$('#SimpleTab').tabs("add",
'TabData.aspx?TabID=5', 'Tab-5');
});
});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Simple Tab: </td>
<td>
<div id="SimpleTab">
<ul>
<li><a href="#tab1">Tab-1</a></li>
<li><a href="#tab2">Tab-2</a></li>
<li><a href="#tab3">Tab-3</a></li>
</ul>
<div id="tab1">
Tab-1 Content goes here.
</div>
<div id="tab2">
Tab-2 Content goes here.
</div>
<div id="tab3">
Tab-3 Content goes here.
</div>
</div>
</td>
</tr>
<tr valign="top">
<td>Tabs - Add New Tab </td>
<td>
<asp:Button
ID="btnAddTab"
runat="server"
Text="Add Tabs" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
Subscribe to:
Posts (Atom)
