javascript动态添加ajaxtookit tabcontainer tabpanel示例

  在浏览器控制台打印ajaxtookit tabcontainer对象时,发现ajaxtookit tabcontainer客户端类库没有提供客户端API给js调用动态添加tabpanel,需要在asp.net服务器端TabContainer1.Tabs.Add动态添加。

 

  javascript动态添加ajaxtookit tabcontainer tabpanel示例如下,需要自己写代码,动态添加tabpanel。

javascript动态添加ajaxtookit tabcontainer 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示例

评论(0)Web开发网
阅读(328)喜欢(0)JavaScript/Ajax开发技巧