jQuery tabs in asp net

Показать описание

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss how to use jQuery tabs 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.

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.

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.

<%@ Page Language="C#" AutoEventWireup="true"

<!DOCTYPE html>
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs({
collapsible: true,
active: 1,
event: 'mouseover'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs" style="width: 600px">
<ul>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li>
<a href="#C_<%#Eval("ID")%>"><%#Eval("Name") %> </a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<div id="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
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void 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

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".

Рекомендации по теме

Комментарии

Thanks sir. I'm following your videos everyday. These're very helpfull & great.

luannguyen

very nice videos sir i am really enjoying very nice method of teaching.
if it is possible please make a video for to provide search engin for our websites

Ex: i have a text box and a button in my website if some wants to search my website content like services the user should be able to search

best wishes
thanks

jaihoonmerzakhil

Sir what if i have to create tabs using jquery with out using Repeater control??? may be in MVC... i mean how is it possible to do if i have to populate list inside the jquery to produce the tab???

alihameed