Tab control using url hash variant
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>anchor test with tab design</title>
<style type="text/css">
ul.tab
{
margin: 1px 0px;
padding: 0px;
}
ul.tab li
{
display: inline;
}
ul.tab li a
{
padding: 3px;
margin-right: 2px;
background-color: #eee;
border: 1px outset gray;
font-size: small;
color: Blue;
}
ul.tab li a:hover
{
background-color: gold;
}
ul.tab li a.active_tab
{
background-color: Orange;
}
div.tab_container
{
border: 1px solid gray;
padding: 10px;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
</style>
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function tab_change() {
// 頁籤序號
var index = location.hash.substring(1);
if (!index) index = '0';
index = parseInt(index);
// 變更頁籤css
$('ul.tab li a').removeClass('active_tab').eq(index).addClass('active_tab');
// postback, 以觸發update panel更新
//$('<%=hdnTabIndex.ClientID%>').val(index);
__doPostBack('hdnTabIndex', index);
}
$(function () {
// 頁籤變更觸發
$(window).bind('hashchange', tab_change);
// 載入頁面時更新
tab_change();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="smPage" runat="server">
</asp:ScriptManager>
<ul class="tab">
<li><a href="#0" class="active_tab">第一頁</a></li>
<li><a href="#1">第二頁</a></li>
<li><a href="#2">第三頁</a></li>
<li><a href="#3">第四頁</a></li>
<li><a href="#4">第五頁</a></li>
</ul>
<div class="tab_container">
<asp:UpdatePanel ID="upTabContainer" runat="server" UpdateMode="Conditional" RenderMode="Block">
<ContentTemplate>
<asp:HiddenField ID="hdnTabIndex" runat="server" />
<asp:Panel ID="plTabContainer0" runat="server" Visible="false">
第一頁內容
</asp:Panel>
<asp:Panel ID="plTabContainer1" runat="server" Visible="false">
第二頁內容
</asp:Panel>
<asp:Panel ID="plTabContainer2" runat="server" Visible="false">
第三頁內容
</asp:Panel>
<asp:Panel ID="plTabContainer3" runat="server" Visible="false">
第四頁內容
</asp:Panel>
<asp:Panel ID="plTabContainer4" runat="server" Visible="false">
第五頁內容
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Tab_Load();
}
protected void Tab_Load()
{
// postback參數
string _index = Request.Form["__EVENTARGUMENT"];
if (string.IsNullOrEmpty(_index)) _index = "0";
plTabContainer0.Visible = false;
plTabContainer1.Visible = false;
plTabContainer2.Visible = false;
plTabContainer3.Visible = false;
plTabContainer4.Visible = false;
upTabContainer.FindControl("plTabContainer" + _index).Visible = true;
}
}
}
Posts
