AJAX ControlToolkit学习日志-Tabs(27)

Tabs控件其实是一个容器控件TabContainer和面板控件TabPanel。TabContainer控件用于包含TabPanel。TabPanel控件用于显示。

下面来看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为Tabs。

2)在Default.aspx页面上添加一个TabContainer控件，同时在该容器控件中添加两个TabPanel。分别命名为TabPanel1和TabPanel2，同时设置HeaderText为Account和Email。

代码如下：

<cc1:tabcontainer id="TabContainer1" runat="server" Height="200px" Width="300px" OnClientActiveTabChanged="ActiveTabChanged">
2

<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Account">
3

<ContentTemplate>
4

<asp:Label ID="Label1" runat="server" Text="name"></asp:Label>
5

<asp:TextBox ID="txtName" runat="server"></asp:TextBox> 
6

<asp:Label ID="Label2" runat="server" Text="password"></asp:Label>
7

<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> 
8

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
9

<ContentTemplate>
10

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="GetUserInfo" />
11

<asp:Label ID="NamePassword" runat="server" Text=""></asp:Label>
12

</ContentTemplate>
13

</asp:UpdatePanel>
14

</ContentTemplate>
15

</cc1:TabPanel>
16

<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="E-Mail">
17

<ContentTemplate>
18

<asp:Label ID="Label3" runat="server" Text="Email"></asp:Label>
19

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
20

<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="GetEmail" />
21

</ContentTemplate>
22

</cc1:TabPanel>
23

</cc1:tabcontainer>

属性说明：

OnClientActiveTabChanged：在客户端对当前激活的Tab进行改变时执行的事件脚本。
HeaderText：在TabContainer中的每个Tab的标题内容。

3)在页面上添加ActiveTabChanged事件函数，用于显示。

代码如下：

function ActiveTabChanged(sender,eventArgs)
2

{
3

var currentTab=$get('CurrentTab');
4

currentTab.innerHTML="你选择的Tab为" + sender.get_activeTab().get_headerText();
5

}

4)在TabContainer下面拖放一个Label，命名为CurrentTab。用于显示当前激活的Tab。

代码如下：

<asp:Label ID="CurrentTab" runat="server" Text=""></asp:Label>

4)按下CTRL+F5,在浏览器里查看效果。

效果图如下：

转载于:https://www.cnblogs.com/qc1984326/archive/2007/03/22/684589.html

AJAX ControlToolkit学习日志-Tabs(27)相关推荐

AJAX ControlToolkit学习日志-ModalPopupExtender(16)
ModalPopupExtender控件用于设置网页上文本的样式. 下面看一个示例: 1)在Vs2005中新建一个ASP.NET AJAX-Enabeld Web Project项目工程, ...
AJAX ControlToolkit学习日志-ResizableControlExtender(23)
ResizableControlExtender控件用于对一个web控件进行伸缩. 下面来看一个示例: 1)在VS2005中新建一个ASP.NET AJAX-Enabled Web ...
AJAX ControlToolkit学习日志-AnimationExtender控件(3)
AnimationExtender控件是添加动画效果的控件扩展.在动画组合中可以添加的事件如:OnClick,OnLoad,OnMouseOver,OnMourseOut,OnHoverO ...
Ajax学习日志（三）—— 如何传递get请求参数
Ajax入门(三) 一.如何传递get请求参数 1.1) 在app.js创建新路由 1.2) 在public文件夹新建一个html文件 1.3)运行一.如何传递get请求参数 1.1) 在app.j ...
Ajax学习日志（七）—— 解决低版本IE浏览器的缓存问题
Ajax入门(七) 一.解决低版本IE浏览器的缓存问题 1.1) 低版本IE浏览器的缓存问题及解决方案 1.2)需了解的知识 1.3)在app.js同目录下新建一个txt文件 1.4)在app.js创 ...
opencv生成日志_OpenCV-Utils学习日志：VideoCapture使用样例
1.VideoCapture可以打开多种来源的数据流,但常见的是相机.视频及图像序列三类数据流: (1)打开相机数据流,需要指定相机在主机上的设备编号,若主机上只有一个相机则编号通常是0. (2)打开 ...
JavaEE学习日志(七十三): 黑马商城项目（六）
JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇) JavaEE学习日志(七十三) 黑马商城项目(六) 今天任务在线支付准备工作前端 OrdersDao Ord ...
苏嵌学习日志08 07.16
学习日志刘易中 07.16 今日学习任务 C51单片机的基本常识.LED灯.蜂鸣器.普通按键.矩阵按键今日任务完成情况复习了C51单片机的理论知识,介绍了LED灯.蜂鸣器.按键的简单编程和仿真 ...
FPGA学习日志——OV7670寄存器配置
FPGA学习日志鼓励自己每天进行学习总结:2021.2.6 找到了ov7670寄存器的配置具体介绍转载自: OV7670配置和调试总结--浩爹 SCCB协议介绍与应用和OV7670摄像头的寄存器配 ...

AJAX ControlToolkit学习日志-Tabs(27)

AJAX ControlToolkit学习日志-Tabs(27)相关推荐

最新文章

热门文章