AJAX之四 Ajax控件工具集（中）

4.2 CalendarExtender控件

   CalendarExtender控件是日历控件，它解决了传统Asp.Net日历控件的三大问题。

①、       不能实现日历控件和TextBox的智能绑定。

②、       选定日期后无法自动隐藏。

③、       选定日期后需要刷新页面。

语法如下：

<cc1:CalendarExtender ID="CalendarExtender1"runat="server"
    TargetControlID="txtTransDate" Format="yyyy-MM-dd"
    CssClass="cssCdar" PopupButtonID="imgBtnDate">
</cc1:CalendarExtender>

   具体属性含义如下：

n        TargetControlID:与日历绑定的TextBox控件ID。

n        Format:日历显示的日期格式。

n        CssClass:日历的样式。

n        PopupButtonID:通过选择按钮，方便单击按钮时弹出日历

示例效果如图4-3所示：

通过案例，我们会看到，CalendarExtender控件，已经智能的绑定到TextBox上了，客户端代码不在此赘述。

4.3  CollapsiblePanel控件

   CollapsiblePanelExtender控件可以把一个控件折叠到另一个控件中。使用两个Panel服务器控件时，可以提供一种很好的方式，控制Asp.Net页面上的区域问题。

   常用属性如下表所示：

图4-6：单击过第一章之后

   CollapsiblePanelExtender控件还可以实现细调展开和折叠。比如，在上述案例基础上，设计一个标签用来控制Panel2的展开和折叠,用户单击Label控件，不仅Panel2会展开和折叠，Label标签也会随之改变，这样程序更为人性化。代码段如程序清单4-3所示：

程序清单4-3：使用标签展开和折叠Panel控件

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"runat="server"
        TargetControlID="Panel2" Collapsed=true ExpandControlID="Label1"
CollapseControlID="Label1" CollapsedText="展开" ExpandedText="折叠">
</cc1:CollapsiblePanelExtender>

4.4  Tabs控件

   4.4.1 Tabs控件简介

Tabs是选项卡控件，可以在一个页面上显示多个选项卡。实现的效果如图4-7所示：

图4-7:Tabls控件实现的选项卡效果

语法格式如下：

<cc1:TabContainer ID=＂TabContainer1＂ runat=＂server＂ActiveTabIndex=＂2＂ Width=＂500px＂>
        <cc1:TabPanel runat=server HeaderText="注册用户" ID="TabPanel1">                   
       </cc1:TabPanel>
       <cc1:TabPanel runat=server HeaderText="用户管理" ID="TabPanel2">
     </cc1:TabPanel>
       <cc1:TabPanel runat=server HeaderText="部门人员" ID="TabPanel3">
       </cc1:TabPanel>
</cc1:TabContainer>

其中：

n          ActiveTabIndex:默认显示的选项卡索引。

n          …：该部分只能放TabPanel控件（选项卡面板）。

n          HeaderText:表示选项卡的标题。

n          HeaderTemplate:选项卡的标题模板。

n          ContentTemplate:选项卡的内容模板，和DataList控件的模板类似，可以放置任   何控件和内容。

4.4.2 Tabs控件的使用

    在Web页面上添加一个ScriptManager和一个TabContainer控件，修改TabContainer代码。可以在内放置控件或代码。