javascript动态添加ajaxtookit tabcontainer tabpanel示例
在浏览器控制台打印ajaxtookit tabcontainer对象时，发现ajaxtookit tabcontainer客户端类库没有提供客户端API给js调用动态添加tabpanel，需要在asp.net服务器端TabContainer1.Tabs.Add动态添加。
javascript动态添加ajaxtookit tabcontainer tabpanel示例如下，需要自己写代码，动态添加tabpanel。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>javascript动态添加ajaxtookit tabcontainer tabpanel示例</title>
</head>
<body>
<form id="form1" runat="server"><asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"
ScriptMode="Release">
</asp:ToolkitScriptManager>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<asp:TabPanel runat="server" HeaderText="tab1_TabPanel1"><ContentTemplate>content1</ContentTemplate></asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="tab1_TabPanel2"><ContentTemplate>content2</ContentTemplate></asp:TabPanel>
</asp:TabContainer>
<input type="button" value="addTab" onclick="addTab('TabContainer1')" /><br /><br />
<asp:TabContainer ID="TabContainer2" runat="server" ActiveTabIndex="0">
<asp:TabPanel runat="server" HeaderText="tab2_TabPanel1"><ContentTemplate>content1</ContentTemplate></asp:TabPanel>
</asp:TabContainer>
<input type="button" value="addTab" onclick="addTab('TabContainer2')" />
</form>
<script type="text/javascript">
function fixedTabHeadMouseEvent(tabHead,e, TabContainer_ID) {//新增tab mouseover/mouseout添加移除hover样式
if (tabHead.className == 'ajax__tab_active') return;
tabHead.className = e.type == 'mouseover' ? 'ajax__tab_hover' : '';
}
function fixedTabHeadClick(tabHead,TabContainer_ID) {//点击tab页头焦点设置和内容显示隐藏
if (tabHead.className == 'ajax__tab_active') return;
var tabs = $find(TabContainer_ID);
var header = tabs._header;
var body = tabs._body;
var nowIndex = parseInt(tabHead.getAttribute('i'), 10), spNum = 0;
for (var i = 0; i < header.childNodes.length; i++)
if (header.childNodes[i].tagName == 'SPAN') {
spNum++;
header.childNodes[i].className = nowIndex == spNum ? 'ajax__tab_active' : '';
}
spNum = 0;
for (var i = 0; i < body.childNodes.length; i++)
if (body.childNodes[i].tagName == 'DIV') {
spNum++;
body.childNodes[i].style.display = nowIndex == spNum ? 'block' : 'none';
}
}
function addEvent(o, evt, func) {//对象添加事件通用函数
if (o.addEventListener) o.addEventListener(evt, func, false);
else if (o.attachEvent) o.attachEvent('on' + evt, func);
}
function createWrapEvent(tabHead, TabContainer_ID) {
return function (e) { fixedTabHeadMouseEvent(tabHead, e || window.event, TabContainer_ID) }
}
function getTabsNum(header, TabContainer_ID) {//获取初始化的tab数量，并且给初始化的tab添加修正事件，要不点击初始化事件无法移除动态添加tab页头焦点样式和隐藏动态添加的内容项
var n = 0, tabHead;
for (var i = 0; i < header.childNodes.length; i++) {
tabHead = header.childNodes[i];
if (tabHead.tagName == 'SPAN') {
n++;
tabHead.setAttribute('i', n);
addEvent(tabHead, 'mouseover', (function (tabHead, TabContainer_ID) { return function (e) { fixedTabHeadMouseEvent(tabHead, e || window.event, TabContainer_ID) } })(tabHead, TabContainer_ID));
addEvent(tabHead, 'mouseout', (function (tabHead, TabContainer_ID) { return function (e) { fixedTabHeadMouseEvent(tabHead, e || window.event, TabContainer_ID) } })(tabHead, TabContainer_ID));
addEvent(tabHead, 'click', (function (tabHead, TabContainer_ID) { return function (e) { fixedTabHeadClick(tabHead, TabContainer_ID) } })(tabHead, TabContainer_ID));
}
}
header.setAttribute('num', n);
return n;
}
function addTab(TabContainer_ID) {//@TabContainer_ID参数：ajaxtoolkit tabcontainer对应的客户端id
var tabs = $find(TabContainer_ID);
var header = tabs._header; //页头容器
var body = tabs._body; //内容容器
var tabsNum = parseInt(header.getAttribute('num'), 10) || getTabsNum(header, TabContainer_ID);
tabsNum++;
header.setAttribute('num', tabsNum);
var tabHead = document.createElement('span');
tabHead.setAttribute('i', tabsNum);
tabHead.innerHTML = '<span class="ajax__tab_outer"><span class="ajax__tab_inner"><span class="ajax__tab_tab">TabPanel' + tabsNum + '</span></span></span>';
header.appendChild(tabHead);
addEvent(tabHead, 'mouseover', function (e) { fixedTabHeadMouseEvent(tabHead, e || window.event, TabContainer_ID) });
addEvent(tabHead, 'mouseout', function (e) { fixedTabHeadMouseEvent(tabHead, e || window.event, TabContainer_ID) });
addEvent(tabHead, 'click', function (e) { fixedTabHeadClick(tabHead, TabContainer_ID) });
var tabBody = document.createElement('div')
tabBody.innerHTML = 'content' + tabsNum;
tabBody.style.display = 'none';
tabBody.className = 'ajax__tab_panel';
body.appendChild(tabBody);
}
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：javascript动态添加ajaxtookit tabcontainer tabpanel示例