AjaxControlToolkit“TabContainer控件”客户端Javascript函数API

  AjaxControlToolkit中“TabContainer控件”客户端Javascript函数中文API,翻译不正确的地方多包涵,e文可以的直接看本文最下面的e文连接地址。

  在本文中介绍tabcontainer控件的客户端方法,如使用javascript设置获取焦点的tab,本文最后列出一些重要的ASP.NET AJAX TabContainer控件的方法。

  TabContainer是ASP.NET AJAX最酷的控件之一。最新我碰到需要在tab中显示某些控件,并且如果某个tab发生验证错误时,需要使发生错误的tab重新获取焦点。所以你也需要使用javascript设置ASP.NET Ajax TabContainer控件的某个tab获得焦点,可以阅读本文。下面为tabcontainer和一些asp.net验证控件,验证规则等源代码
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AJAXControls" %> 
<!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>Untitled Page</title> 
</head>
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <AJAXControls:TabContainer runat="server" ID="tabContainer"> 
            <AJAXControls:TabPanel ID="firstTab" HeaderText="First Tab" runat="server"> 
                <ContentTemplate> 
                    <asp:Label ID="Label1" runat="server">You are in the First tab. <br /> Press the submit button to see the validation result.</asp:Label> 
                </ContentTemplate> 
            </AJAXControls:TabPanel> 
            <AJAXControls:TabPanel ID="secondTab" HeaderText="Second Tab" runat="server"> 
                <ContentTemplate> 
                    <label id="Label2" runat="server">Please select a value from the drop down: </label> 
                    <!--ASP.NET Drop down control--> 
                    <asp:DropDownList ID="status" runat="server" > 
                        <asp:ListItem Selected="True" Text="Select" Value="0" /> 
                        <asp:ListItem Text="One" /> 
                        <asp:ListItem Text="Two" /> 
                        <asp:ListItem Text="Three" /> 
                    </asp:DropDownList> 
                    <!--ASP.NET Required Field Validator to validate the drop down.--> 
                    <asp:RequiredFieldValidator ID="statusValidator" runat="server" ErrorMessage="Please choose a value other than 'Select'" ControlToValidate="status" InitialValue="0" Visible="true" Display="None"> 
                    </asp:RequiredFieldValidator> 
                    <AJAXControls:ValidatorCalloutExtender ID="statusValidator_ValidatorCalloutExtender" 
                        runat="server" TargetControlID="statusValidator">                     </AJAXControls:ValidatorCalloutExtender>                    
                </ContentTemplate> 
            </AJAXControls:TabPanel> 
        </AJAXControls:TabContainer> 
        <br /> 
        <asp:Button ID="submit" Text="Submit" OnClientClick="javascript:return ValidatePage();" 
            runat="server" /> 
        <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        </asp:ScriptManager> 
    </div> 
    </form> 
</body> 
</html>
                                    
 

  从上面的代码中知道AjaxControlToolkit TabContainer 控件有2个TabPanels ,id为“firstTab” 和 “secondTab”。第一个tab中有一个label控件,第二个有一个添加了验证规则(ValidatorCalloutExtender )的dropdown控件。表单中存在一个提交按钮,设置了“OnClientClick” 事件,调用 “ValidatePage”客户端javascript方法。现在问题是,当点击了提交按钮,如果第一个tab获得焦点,而第二个tab出现验证错误,将不会显示出第二个tab出现的错误。只有当用户点击第二个tab时,他才能看到错误,否则将忽视这个错误。解决办法就是如果第二个tab出现验证错误时,将第二个tab获取焦点。js代码如下
<script language="javascript" type="text/javascript"> 
function ValidatePage() 
{ 
    // 使用$get函数获取验证控件
    var valCntl = $get('<%=statusValidator.ClientID%>'); 
    if (valCntl != undefined && valCntl != null) 
    { 
        /*ValidatorValidate函数执行和此验证控件相关联的验证逻辑*/ 
        ValidatorValidate(valCntl);  
    /*控件的isvalid属性为布尔值,通过ValidatorValidate执行和此控件相关联的验证逻辑后,通过设置为true,否则false*/ 
        if (!valCntl.isvalid) 
        { 
        /*用户自定义函数用于隐藏验证控件的提示信息
            hideValidatorCallout(); */ 
        /*使用$get函数获取tabcontainer控件 */ 
            var tabContainer = $get('<%=tabContainer.ClientID%>'); 
            if (tabContainer != undefined && tabContainer != null) 
            { 
                tabContainer = tabContainer.control; 
                tabContainer.set_activeTabIndex(1); 
                showValidatorCallout(); 
            } 
            return false; 
        } 
        return true; 
    } 
}
function hideValidatorCallout() 
{     
    /*下面的代码隐藏激活的AjaxControlToolkit ValidatorCalloutExtender控件 */ 
    AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide(); 
}
function showValidatorCallout() 
{ 
    /*使用$find获取AjaxControlToolkit ValidatorCalloutExtender控件 */ 
    AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout = $find('<% =statusValidator_ValidatorCalloutExtender.ClientID %>'); 
    //下面的代码显示AjaxControlToolkit ValidatorCalloutExtender控件 
    AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);
} 
</script>
                                    
 
  在提交按钮的OnClientClick事件中调用了 ValidatePage javascript 函数,此函数中调用 ValidatorValidate方法,参数为需要验证的控件。验证完毕后,可以通过isvalid属性判断和此控件关联的验证逻辑是否正确执行,如果正确执行,使用$get函数获取 tabcontainer对象,然后通过下面2行代码设置设置需要获取焦掉的tab。
tabContainer = tabContainer.control;  
tabContainer.set_activeTabIndex(1);


  注意需要使用控件的control属性来的调用set_activeTabIndex方法设置获取焦点的tab。set_activeTabIndex方法参数为一个数字 (tab index)。使用set_activeTabIndex javascript方法可以设置哪个tab获取焦点。

一些tabcontainer有用的客户端javascript方法。

  下面勒出一些对开发者比较重要的javascript方法。用使用这些方法,需要将ASP.NET AJAX TabContainer 控件通过 “TABCONTAINER_CONTROL.control” 来调用,具体看上面的示例。

 

  • get_activeTab():返回当前获得焦掉的tab javascript对象(This javascript function gets the active tab object.)
  • get_activeTabIndex():获取获得焦点tab的索引,返回值为数字(从0开始)
  • get_id(): 得到 tabcontainer控件的id
  • get_tabs():返回tabcontainer中的所有tabs。数组对象,数组项为单个tab
  • get_visible(): 返回布尔值,表示tabcontainer是否可见
  • getFirstTab():返回tabcontainer中的第一个tab,既返回下标为0的tab。
  • getLastTab():返回tabcontainer中的最后一个tab,既返回下标为(tab总数 –1)的tab
  • getNearestTab():返回邻接的tab。
      1)如当前获取焦点的tab下标为0,则返回第二个tab(下标为1)。
      2)如果当前的tab下标大于0,将返回上一个tab,既返回下标为(当前下标– 1)的tab
  • getNextTab():返回当前下标的下一个tab对象(当前下标+1的tab)。如果当前下标为最后一个tab,怎返回第一个tab(下标为0)
  • getPreviousTab(): gets the previous tab in the tab container control i.e. if the current tab index is 0 then the function returns the last tab else it returns the previous tab ([Current Tab Index] - 1)
  • set_activeTab(tabControl):设置哪个tab获得焦点。set_activeTabIndex方法参数为一个tab对象
  • set_activeTabIndex(integer):设置哪个tab获得焦点。set_activeTabIndex方法参数为一个tab对象下标,为数字(0~总tab数-1)
  • set_id(): 设置tabcontainer控件id
  • set_visible(Boolean): 设置tabcontainer显示或者隐藏,参数值为布尔对象。此方法设置整个tabcontainer显示或者隐藏,如果只设置tabcontainer里面独立tabs的隐藏或者显示,参考下面的f


tabcontainer独立tab对象javascript客户端方法

  下面为独立tab对象示例

tabContainer = tabContainer.control; 
//通过get_activeTab方法获取当前获得焦点的tab对象
var tab = tabContainer.get_activeTab(); 
var headerText = tab.get_headerText(); 
alert(headerText); 
//通过get_previousTab获取tab对象
tab = tabContainer.getPreviousTab(); 
alert(tab.get_tabIndex());

  下面为和独立tab对象关联的方法
 

  • addCssClass(className):给tab添加样式,函数参数为CSS样式名称
  • get_enabled()返回true/false,指示tab是否可用
  • get_headerText()返回tab的b标题文本
  • get_id() 返回 tab的id
  • get_tabIndex()返回tab的索引下标(数字)
  • get_visible():返回tab是否可见,布尔值
  • removeCssClass(className)从tab中移除参数指定的CSS样式名称
  • set_enabled(Boolean)设置tab是否可用
  • set_headerText(string)设置tab标题文本。
  • set_id()设置tab的id
  • set_visible(Boolean)设置tab是否可见(隐藏或者显示)

来源:http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/A_2542-AjaxControlToolkit-TabContainer-control-Javascript-functions.html

 

 

 

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:AjaxControlToolkit“TabContainer控件”客户端Javascript函数API

评论(0)Web开发网
阅读(182)喜欢(0)Asp.Net/C#/WCF