对tabtrip的简单封装 js的querystring Request.QueryString
界面：
用到ajaxtoolkit中的tabcontainer。
情景：由于项目中每种CI都有类似的界面，现将其初步封装到用户控件中。
如上，基本信息是一个页面，硬件信息是另外一个页面。现在是直接将tabcontainer拖到这6个页上，但是将来要增加一个tab,或者减少一个tab，将需要在6个地方修改。
现将其提到用户控件中。
usercontrol中代码：
<cc1:TabContainer ID="TabContainer1" runat="server">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1" OnClientClick="onTab1Click">
<HeaderTemplate>
基本信息
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2" OnClientClick="onTab2Click">
<HeaderTemplate>
硬件信息
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3" OnClientClick="onTab3Click">
<HeaderTemplate>
软件信息
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4" OnClientClick="onTab4Click">
<HeaderTemplate>
进程信息
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel5" runat="server" HeaderText="TabPanel5" OnClientClick="onTab5Click">
<HeaderTemplate>
端口信息
</HeaderTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel7" runat="server" HeaderText="TabPanel7" OnClientClick="onTab6Click">
<HeaderTemplate>
操作日志
</HeaderTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<script type="text/javascript">
function onTab1Click(){ location.href="ServerView.aspx?id=" + queryString("id") + "&activeTab=0"; }
function onTab2Click(){ location.href="ServerHardwareList.aspx?id=" + queryString("id") + "&activeTab=1"; }
function onTab3Click(){ location.href="ServerSoftwareList.aspx?id=" + queryString("id") + "&activeTab=2"; }
function onTab4Click(){ location.href="ServerProcessList.aspx?id=" + queryString("id") + "&activeTab=3"; }
function onTab5Click(){ location.href="ServerPortList.aspx?id=" + queryString("id") + "&activeTab=4"; }
function onTab6Click(){ location.href="ServerLog.aspx?id=" + queryString("id") + "&activeTab=5"; }
</script>
.cs:
protected void Page_Load(object sender, EventArgs e)
{
TabContainer1.ActiveTabIndex = int.Parse(this.GetQueryString("activeTab", "0"));
}
如此，以后有增删tab，则到该用户控件中修改。
附getString定义：
function queryString(text) {
var value = "";
var str = window.location.search.substring(1);
var array = str.split("&");
for (var i = 0; i < array.length; i++) {
var item = array[i].split("=");
if (item[0] == text) {
value = item[1];
}
}
return value;
}
重要提示：如果要去掉ajaxtab下面的内容框，只要自己做个样式，并将body样式置空就行了：
/* Following are tab control styles, Special for Outsourcing Set-up Process Page */
/* Default tab */
.AjaxTabStrip .ajax__tab_tab
{
font-size: 12px;
padding: 4px;
width: 105px; /* Your proper width */
height:16px; /* Your proper height */
background-color: #EAEAEA;
}
/* When mouse over */
.AjaxTabStrip .ajax__tab_hover .ajax__tab_tab
{
font-weight:bold;
text-decoration: underline;
}
/* Current selected tab */
.AjaxTabStrip .ajax__tab_active .ajax__tab_tab
{
background-color: #C2E2ED;
font-weight:bold;
}
/* TabPanel Content */
.AjaxTabStrip .ajax__tab_body
{
}
问题：在应用了该控件后，在文档协议为html4.0的页上，会出现一个白条，挡住tab的一部分。整了好久没搞定，但是只要把页面的协议改为最新的xhtml就不会有。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
应改为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用到ajaxtoolkit中的tabcontainer。
情景：由于项目中每种CI都有类似的界面，现将其初步封装到用户控件中。
如上，基本信息是一个页面，硬件信息是另外一个页面。现在是直接将tabcontainer拖到这6个页上，但是将来要增加一个tab,或者减少一个tab，将需要在6个地方修改。
现将其提到用户控件中。
usercontrol中代码：
<cc1:TabContainer ID="TabContainer1" runat="server"><cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1" OnClientClick="onTab1Click"> <HeaderTemplate> 基本信息 </HeaderTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2" OnClientClick="onTab2Click"> <HeaderTemplate> 硬件信息 </HeaderTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3" OnClientClick="onTab3Click"> <HeaderTemplate> 软件信息 </HeaderTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4" OnClientClick="onTab4Click"> <HeaderTemplate> 进程信息 </HeaderTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel5" runat="server" HeaderText="TabPanel5" OnClientClick="onTab5Click"> <HeaderTemplate> 端口信息 </HeaderTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel7" runat="server" HeaderText="TabPanel7" OnClientClick="onTab6Click"> <HeaderTemplate> 操作日志 </HeaderTemplate> </cc1:TabPanel></cc1:TabContainer><script type="text/javascript">
function onTab1Click(){ location.href="ServerView.aspx?id=" + queryString("id") + "&activeTab=0"; }
function onTab2Click(){ location.href="ServerHardwareList.aspx?id=" + queryString("id") + "&activeTab=1"; }function onTab3Click(){ location.href="ServerSoftwareList.aspx?id=" + queryString("id") + "&activeTab=2"; }function onTab4Click(){ location.href="ServerProcessList.aspx?id=" + queryString("id") + "&activeTab=3"; }function onTab5Click(){ location.href="ServerPortList.aspx?id=" + queryString("id") + "&activeTab=4"; }function onTab6Click(){ location.href="ServerLog.aspx?id=" + queryString("id") + "&activeTab=5"; }</script>.cs:
protected void Page_Load(object sender, EventArgs e) { TabContainer1.ActiveTabIndex = int.Parse(this.GetQueryString("activeTab", "0")); }如此，以后有增删tab，则到该用户控件中修改。
附getString定义：
function queryString(text) { var value = ""; var str = window.location.search.substring(1); var array = str.split("&"); for (var i = 0; i < array.length; i++) { var item = array[i].split("="); if (item[0] == text) { value = item[1]; } } return value;}重要提示：如果要去掉ajaxtab下面的内容框，只要自己做个样式，并将body样式置空就行了：
/* Following are tab control styles, Special for Outsourcing Set-up Process Page *//* Default tab */.AjaxTabStrip .ajax__tab_tab{ font-size: 12px; padding: 4px; width: 105px; /* Your proper width */ height:16px; /* Your proper height */ background-color: #EAEAEA;}/* When mouse over */.AjaxTabStrip .ajax__tab_hover .ajax__tab_tab{ font-weight:bold; text-decoration: underline;}/* Current selected tab */.AjaxTabStrip .ajax__tab_active .ajax__tab_tab{ background-color: #C2E2ED; font-weight:bold;}/* TabPanel Content */.AjaxTabStrip .ajax__tab_body{ }问题：在应用了该控件后，在文档协议为html4.0的页上，会出现一个白条，挡住tab的一部分。整了好久没搞定，但是只要把页面的协议改为最新的xhtml就不会有。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >应改为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
