Suggested Videos
Part 73 - Autocomplete textbox using jquery and asp.net web service
Part 74 - jQuery accordion in asp.net
Part 75 - jQuery accordion using asp.net repeater control
(追記) (追記ここまで)
In this video we will discuss how to use jQuery tabs widget in an ASP.NET web forms application.
(追記) (追記ここまで)
jQuery tabs widget is a single content area with multiple panels, each associated with a header in a list. This is similar to Accordion widget, which we discussed in Part 74 and 75.
jQuery tabs in asp.net
2 simple steps to produce tabs using jQuery
Step 1 : The following is the HTML
a) Tabs must be in either an ordered or unordered list
b) Each tab "title" must be inside of a list item and wrapped by an anchor element with an href attribute
c) Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.
Step 2 : Invoke tabs() function on the container div
$('#tabs').tabs();
Steps to retrieve data from a database table and present it using jQuery accordian in an asp.net webforms application. We will use the country webservice that we worked with in the previous video session.
We want to retrieve data from the following database table tblEmployee
tabs jquery example asp.net
and display it using jQuery tabs widget in an asp.net web forms application
jquery tabs asp.net repeater
Add a WebForm to the project. Copy and paste the following code. Notice that we are using 2 repeater controls to produce the HTML that the jQuery tabs widget expects.
Copy and paste the following code in the code-behind file
jQuery Tabs Widget Options
jQuery tutorial for beginners
Part 73 - Autocomplete textbox using jquery and asp.net web service
Part 74 - jQuery accordion in asp.net
Part 75 - jQuery accordion using asp.net repeater control
(追記) (追記ここまで)
In this video we will discuss how to use jQuery tabs widget in an ASP.NET web forms application.
(追記) (追記ここまで)
jQuery tabs widget is a single content area with multiple panels, each associated with a header in a list. This is similar to Accordion widget, which we discussed in Part 74 and 75.
jQuery tabs in asp.net
2 simple steps to produce tabs using jQuery
Step 1 : The following is the HTML
a) Tabs must be in either an ordered or unordered list
b) Each tab "title" must be inside of a list item and wrapped by an anchor element with an href attribute
c) Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.
<divid="tabs"style="width: 400px">
<ul>
<li><ahref="#tab1">Tab 1</a></li>
<li><ahref="#tab2">Tab 2</a></li>
<li><ahref="#tab3">Tab 3</a></li>
</ul>
<divid="tab1">
This is Tab 1 Content
</div>
<divid="tab2">
This is Tab 2 Content
</div>
<divid="tab3">
This is Tab 3 Content
</div>
</div>
Step 2 : Invoke tabs() function on the container div
$('#tabs').tabs();
Steps to retrieve data from a database table and present it using jQuery accordian in an asp.net webforms application. We will use the country webservice that we worked with in the previous video session.
We want to retrieve data from the following database table tblEmployee
tabs jquery example asp.net
and display it using jQuery tabs widget in an asp.net web forms application
jquery tabs asp.net repeater
Add a WebForm to the project. Copy and paste the following code. Notice that we are using 2 repeater controls to produce the HTML that the jQuery tabs widget expects.
<%@PageLanguage="C#"AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs"Inherits="Demo.WebForm1"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="jquery-1.11.2.js"></script>
<scriptsrc="jquery-ui.js"></script>
<linkhref="jquery-ui.css"rel="stylesheet"/>
<scripttype="text/javascript">
$(document).ready(function () {
$('#tabs').tabs({
collapsible: true,
active: 1,
event: 'mouseover'
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<divid="tabs"style="width: 600px">
<ul>
<asp:RepeaterID="Repeater1"runat="server">
<ItemTemplate>
<li>
<ahref="#C_<%#Eval("ID")%>"><%#Eval("Name") %></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:RepeaterID="Repeater2"runat="server">
<ItemTemplate>
<divid="C_<%#Eval("ID")%>">
<%#Eval("CountryDescription")%>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Copy and paste the following code in the code-behind file
using System;
namespace Demo
{
publicpartialclassWebForm4 : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
Services.CountryServiceSoapClient
client = new
Services.CountryServiceSoapClient();
Services.Country[] countries =
client.GetCountries();
Repeater1.DataSource = countries;
Repeater1.DataBind();
Repeater2.DataSource = countries;
Repeater2.DataBind();
}
}
}
jQuery Tabs Widget Options
Option
Description
collapsible
By default, atleast one panel need to be active. If you want to collapse all the panels, including the one that is active, set this option to true.
active
This option can be set to a boolean value or integer. Setting active to false will collapse all panels. This requires the collapsible option to be true. An Integer value will make the corresponding panel active. Panels use zero-based index.
event
The type of event that the tabs should react to in order to activate the tab. The default is "click". To activate on hover, use "mouseover".
jQuery tutorial for beginners
1 comment:
Hi I am not getting the Orange shades for tabs even I repeated the same code.Please advise. Thanks a lot.
Reply DeleteIt would be great if you can help share these free resources
[フレーム]