ASP.NET AJAX Advance Tips & Tricks (3) JavaScript与Tab的交互

前言

ASP.NET AJAX Control Toolkit 中的Tab控件非常简单易用，对服务端和客户端的支持都非常不错。本篇通过几个FAQ给大家介绍Tab和JavaScript的常用交互，以及应该注意到的问题。

1. TabCantainer的JavaScript接口

目前的Tab控件很多，而Altas的Tab控件有点在于JavaScript接口非常丰富，而且非常便于理解和使用，一般常用的有以下几组：

    get_headerText //获取标题文字
    set_headerText //设置标题文字

    get_headerTab //获取标题Tab
    set_headerTab //设置标题Tab

    get_enabled //启用TabPanel
    set_enabled //禁用TabPanel

    get_owner //获取TabPanel父容器
    set_owner //设置TabPanel父容器

    get_scrollBars //获取滚动条状态
    set_scrollBars //设置滚动条状态

    get_tabIndex //获取TabPanel的序号

    _get_active//获取当前活动的TabPanel
    _set_active//设置当前活动的TabPanel

而所有的接口可以在源代码的Tabs.js文件中找到：

2. 常用例子

A. 获取TabContainer当前活动的TabPanel

        function GetActiveTab(tabControl) {
            var ctrl = $find(tabControl);
            var activeid = ctrl.get_activeTab().get_tabIndex();
            alert(activeid);
        }

B. 设置TabContainer当前活动的TabPanel

        function SetActiveTab(index) {
            var ctrl = $find("TabContainer1");
            var tabpanel = ctrl.get_tabs()[index];
            ctrl.set_activeTab(tabpanel);
        }

3. 修改Tab控件，使其支持鼠标移动激活

尽管Tab控件比较酷，也很便于使用，但它默认的事件是点击标签来激活一个TabPanel，而很多JavaScript Tab和一些第三方控件的Tab都是靠onmouseover来激活一个TabPanel。如果想要使 Tab控件通过onmouseover激活TabPanel，我们可以通过修改源代码来实现：

//in the "Tab.js" change the “_header_onmouseover” (near the 522nd line) as following:

    _header_onmouseover: function(e) {
        Sys.UI.DomElement.addCssClass(this._tab, "ajax__tab_hover");
        this.get_owner().set_activeTab(this);//添加这一行(add this line to the original code)
    },