(Dynamic Responsive Tabs Plugin For jQuery) - Hôm nay thủ thuật lập trình sẽ giới thiệu với các bạn thêm 1 cách nữa để có thể tạo Tabs động, đó là sử dụng thư viện Tabs Plugin For jQuery. Nội dung các Tabs được hiển thị từ các Control ngoài và đường dẫn cũng như tên các Control này được lấy từ CSDL SQL Server.
- B1: Tạo Project trong Microsoft Visual Studio 2010
- B2: Download Tabs Plugin tại đây, giải nén và Copy file SimpleTabs.js vào thư mục Js
- B3: Copy file style.css vào thư mục Styles
- B4: Tạo thư mục Controls, trong thư mục này lần lượt tạo các Controls Tab1.ascx, Tab2.ascx, Tab3.ascx, Tab4.ascx, Tab5.ascx
- B5: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
<head id="Head1" runat="server">
<title>Dynamic Responsive Tabs Plugin For jQuery in Asp.net</title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="Js/SimpleTabs.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
<%@ PageTitle="Dynamic Responsive Tabs Plugin For jQuery in Asp.net" Language="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="DynamicTabsUsingjQuery._Default"%>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"runat="server">
</asp:ScriptManager>
<div class="panel panel-default">
<div class="panel-heading">
<h4>Dynamic Responsive Tabs Plugin For jQuery in Asp.net</h4>
</div>
<div class="panel-body">
<asp:Panel ID="pnlTabs"runat="server">
</asp:Panel>
</div>
</div>
</asp:Content>
- B7: Viết Code cho file Default.aspx
C# Code
//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Web.UI;
using System.IO;
namespace DynamicTabsUsingjQuery
{
public partial class _Default : System.Web.UI.Page
{
#region "Tabs"
private voidCreateTabs()
{
DataTable objBind = newDataTable();
Control myCtrl = newControl();
int i = 1;
string TabName = "";
string ControlURL = "";
objBind = BindData();
pnlTabs.Controls.Clear();
if (objBind != null)
{
if (objBind.Rows.Count > 0)
{
pnlTabs.Controls.Add(new LiteralControl("<div class=\"tabBlock\">"));
pnlTabs.Controls.Add(new LiteralControl("<ul class=\"tabBlock-tabs\">"));
foreach (DataRowrow in objBind.Rows)
{
if (row != null)
{
TabName = row["TabName"].ToString();
if (i == 1)
{
pnlTabs.Controls.Add(new LiteralControl("<li class=\"tabBlock-tab is-active\">" + TabName + "</li>"));
}
else
{
pnlTabs.Controls.Add(new LiteralControl("<li class=\"tabBlock-tab\">" + TabName + "</li>"));
}
}
i = i + 1;
}
pnlTabs.Controls.Add(new LiteralControl("</ul>"));
pnlTabs.Controls.Add(new LiteralControl("<div class=\"tabBlock-content\">"));
foreach (DataRowrow in objBind.Rows)
{
if (row != null)
{
ControlURL = row["ControlURL"].ToString();
if (File.Exists(Server.MapPath("~/" + ControlURL)))
{
myCtrl = Page.LoadControl(ControlURL);
}
pnlTabs.Controls.Add(new LiteralControl("<div class=\"tabBlock-pane\">"));
pnlTabs.Controls.Add(myCtrl);
pnlTabs.Controls.Add(new LiteralControl("</div>"));
}
}
pnlTabs.Controls.Add(new LiteralControl("</div>"));
pnlTabs.Controls.Add(new LiteralControl("</div>"));
}
}
}
#endregion
#region"Bind Data"
private DataTableBindData()
{
DataTable objBind = newDataTable();
objBind.Columns.Add("TabName", typeof(string));
objBind.Columns.Add("ControlURL", typeof(string));
objBind.Rows.Add("Tab1", "Controls/Tab1.ascx");
objBind.Rows.Add("Tab2", "Controls/Tab2.ascx");
objBind.Rows.Add("Tab3", "Controls/Tab3.ascx");
objBind.Rows.Add("Tab4", "Controls/Tab4.ascx");
objBind.Rows.Add("Tab5", "Controls/Tab5.ascx");
return objBind;
}
#endregion
#region"Event Handles"
protected voidPage_Load(object sender, System.EventArgs e)
{
try
{
if (Page.IsPostBack == false)
{
CreateTabs();
}
}
catch
{
}
}
#endregion
}
}VB.NET Code
'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
Imports System.IO
Namespace DynamicTabsUsingjQuery
Public Class _Default
Inherits System.Web.UI.Page
#Region "Tabs"
Private SubCreateTabs()
Dim objBind As New DataTable
Dim myCtrl As New Control
Dim i As Integer = 1
Dim TabName As String = ""
Dim ControlURL As String = ""
objBind = BindData()
pnlTabs.Controls.Clear()
If Not objBind Is Nothing Then
If objBind.Rows.Count > 0 Then
pnlTabs.Controls.Add(New LiteralControl("<div class=""tabBlock"">"))
pnlTabs.Controls.Add(New LiteralControl("<ul class=""tabBlock-tabs"">"))
For Eachrow As DataRowIn objBind.Rows
If Not row Is Nothing Then
TabName = row("TabName").ToString()
If i = 1 Then
pnlTabs.Controls.Add(New LiteralControl("<li class=""tabBlock-tab is-active"">" & TabName & "</li>"))
Else
pnlTabs.Controls.Add(New LiteralControl("<li class=""tabBlock-tab"">" & TabName & "</li>"))
End If
End If
i = i + 1
Next
pnlTabs.Controls.Add(New LiteralControl("</ul>"))
pnlTabs.Controls.Add(New LiteralControl("<div class=""tabBlock-content"">"))
For Eachrow As DataRowIn objBind.Rows
IfNot row Is Nothing Then
ControlURL = row("ControlURL").ToString()
If File.Exists(Server.MapPath("~/" & ControlURL)) Then
myCtrl = Page.LoadControl(ControlURL)
End If
pnlTabs.Controls.Add(New LiteralControl("<div class=""tabBlock-pane"">"))
pnlTabs.Controls.Add(myCtrl)
pnlTabs.Controls.Add(New LiteralControl("</div>"))
End If
Next
pnlTabs.Controls.Add(New LiteralControl("</div>"))
pnlTabs.Controls.Add(New LiteralControl("</div>"))
End If
End If
End Sub
#End Region
#Region "Bind Data"
Private FunctionBindData() As DataTable
Dim objBind As New DataTable
With objBind.Columns
.Add("TabName", GetType(String))
.Add("ControlURL", GetType(String))
End With
objBind.Rows.Add("Tab1", "Controls/Tab1.ascx")
objBind.Rows.Add("Tab2", "Controls/Tab2.ascx")
objBind.Rows.Add("Tab3", "Controls/Tab3.ascx")
objBind.Rows.Add("Tab4", "Controls/Tab4.ascx")
objBind.Rows.Add("Tab5", "Controls/Tab5.ascx")
Return objBind
End Function
#End Region
#Region "Event Handles"
Protected SubPage_Load(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Me.Load
Try
If Page.IsPostBack = False Then
CreateTabs()
End If
Catch ex As Exception
End Try
End Sub
#End Region
End Class
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment