AjaxControlToolkit“TabContainer控件”客户端Javascript函数API
AjaxControlToolkit中“TabContainer控件”客户端Javascript函数中文API,翻译不正确的地方多包涵,e文可以的直接看本文最下面的e文连接地址。
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>
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.cont
- 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(intege
:设置哪个tab获得焦点。set_activeTabIndex方法参数为一个tab对象下标,为数字(0~总tab数-1)r) - set_id(): 设置tabcontainer控件id
- set_visible(Boolean): 设置tabcontainer显示或者隐藏,参数值为布尔对象。此方法设置整个tabcontainer显示或者隐藏,如果只设置tabcontainer里面独立tabs的隐藏或者显示,参考下面的f
tabcontainer独立tab对象javascript客户端方法
下面为独立tab对象示例
下面为和独立tab对象关联的方法
加支付宝好友偷能量挖...
原创文章,转载请注明出处:AjaxControlToolkit“TabContainer控件”客户端Javascript函数API