《征服ASP.NET2.0AJAX》一书的读后总结（19-20章）

<!--[if !supportLists]-->第一章<!--[endif]--> 菜单特效
<!--[if !supportLists]-->1.

<!--[endif]-->HoverMenu在鼠标移动到指定地点时，在不影响页面其他元素的时候出现一个菜单；

<ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server"

TargetControlID="Panel9"//要显示菜单的目标控件的ID

PopupControlID="PopupMenu"//作为弹出菜单的控件的ID

HoverCssClass="popupHover"//鼠标滑过时目标控件的一些样式

PopupPosition="Right" />//弹出菜单所在的位置

OffsetX //菜单距离目标控件的位置横坐标

OffsetY//菜单距离目标控件的位置纵坐标

PopDelay//弹出菜单的延迟时间

<!--[if !supportLists]-->2.

<!--[endif]-->PopupControl：在某控件获得焦点时，弹出另一个控件，进行一些操作后，隐藏弹出的控件

<asp:TextBox ID="MessageTextBox" runat="server" Width="200" autocomplete="off" /><br /><br />

<asp:Panel ID="Panel2" runat="server" CssClass="popupControl">

<div style="border: 1px outset white; width: 100px">

<asp:UpdatePanel runat="server" ID="up2">

<ContentTemplate>

<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true"

OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">

<asp:ListItem Text="Walk dog" />

<asp:ListItem Text="Feed dog" />

<asp:ListItem Text="Feed cat" />

<asp:ListItem Text="Feed fish" />

<asp:ListItem Text="Cancel" Value="" />

</asp:RadioButtonList>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</asp:Panel>

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server"

TargetControlID="MessageTextBox" //需要弹出控件的控件ID

PopupControlID="Panel2" //作为弹出控件的控件ID

CommitProperty="value" //操作传递的参数

Position="Bottom" //弹出控件的位置

CommitScript="e.value += ' - do not forget!';" //客户端根据操作参数修改页面

OffsetX // 弹出控件的位置与默认位置的相对坐标

OffsetY //弹出控件的位置与默认位置的相对坐标

/>

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)

{

if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))

{

// Popup result is the selected task

PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);

}

else

{

// Cancel the popup

PopupControlExtender2.Cancel();

}

// Reset the selected item

RadioButtonList1.ClearSelection();

}

 

<!--[if !supportLists]-->3. <!--[endif]-->Accordion一般用在内容比较多的页面上，功能类似于Tab选项卡，将一组功能相似、任务相同的内容放在不同的选项卡，然后通过选择项卡的Header,实现各组内容的查看。

<ajaxToolkit:Accordion ID="MyAccordion" runat="server"

SelectedIndex="0" //此属性用来判断当前选择的是哪个Pane

HeaderCssClass="accordionHeader" //Pane或者整个菜单Header所应用的CSS定义 HeaderSelectedCssClass="accordionHeaderSelected" //

ContentCssClass="accordionContent" // Pane或者整个菜单Content所应用的CSS定义

FadeTransitions="false" // 是否使用透明样式的褪色特效

FramesPerSecond="40" //帧/秒 ，表示折叠特效的速度

TransitionDuration="250" //褪色特效的时间间隔，单位为毫秒

AutoSize="None" //None,Limit,Fill三种默认值// None:表示Accordion的内容可以被无限制地拉伸和收缩。这可能破坏页面上其他内容布局。Limit：表示通过Accordion的Heighet属性限制其内容的高度，如果内容超出被限高度，则出现滚动条。Fill：表示内容的高度会和Accordion的Heighet设置的高度一致，但当内容高度超过Accordion的Height时，内容页按自己的高度显示。

RequireOpenedPane="false"

SuppressHeaderPostbacks="true"

DataMember=""

DataSource=""

DataSourceID="">

<HeaderTemplate> //绑定数据源的标题绑定形式

</HeaderTemplate>

<ContentTemplate>//绑定数据源的内容绑定形式

</ContentTemplate>

<Panes>//其包装的必须是AccordionPane控件，可以有多个Panes和AccordionPane

<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" HeaderCssClass="" ContentCssClass=""> HeaderCssClass、ContentCssClass //定义自己Pane或者整个菜单Header所应用的CSS定义

<Header><a href="" class="accordionLink">1. Accordion</a></Header>

<Content>

The Accordion is a web control that allows you to provide multiple panes and display them one at a time.

It is like having several <asp:HyperLink runat="server" NavigateUrl="~/CollapsiblePanel/CollapsiblePanel.aspx" Text="CollapsiblePanels" />

where only one can be expanded at a time. The Accordion is implemented as a web control that contains

AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content.

We keep track of the selected pane so it stays visible across postbacks.

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">

<Header><a href="" class="accordionLink">2. AutoSize</a></Header>

<Content>

<p>It also supports three AutoSize modes so it can fit in a variety of layouts.</p>

<ul>

<li><b>None</b> - The Accordion grows/shrinks without restriction. This can cause other elements

on your page to move up and down with it.</li>

<li><b>Limit</b> - The Accordion never grows larger than the value specified by its Height

property. This will cause the content to scroll if it is too large to be displayed.</li>

<li><b>Fill</b> - The Accordion always stays the exact same size as its Height property. This

will cause the content to be expanded or shrunk if it isn't the right size.</li>

</ul>

 

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">

<Header><a href="" class="accordionLink">3. Control or Extender</a></Header>

<Content>

The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.

The extender expects its input in a very specific hierarchy of container elements (like divs), so

the Accordion and AccordionPane web controls are used to generate the expected input for the extender.

The extender can also be used on its own if you provide it appropriate input.

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">

<Header><a href="" class="accordionLink">4. What is ASP.NET AJAX?</a></Header>

<Content>

<asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" ImageAlign="right" />

<%= GetContentFillerText()%>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

 

<!--[if !supportLists]-->4. <!--[endif]-->DropDown：可为任意控件生成下拉框菜单

<ajaxToolkit:DropDownExtender runat="server" ID="DDE"

TargetControlID="TextLabel" //要应用菜单的控件ID,可以为任意类型控件

DropDownControlID="DropPanel" //下拉框菜单ID,为了能够捕获用户的单击行为，通常此控件由Panel中的多个LinkButton组成；

DropArrowBackColor="" //下拉箭头的背景色

DropArrowWidth="" //下拉箭头的宽度

HighlightBackColor="" //目标控件获得焦点时的背景色

HighlightBorderColor="" //目标控件获得焦点时的边框颜色

//客户端事件，在下拉框展开前后书写自定义的事件。

OnClientPopulated=""

OnClientPopulating=""

OnClientPopup=""

/>

<!--[if !supportLists]-->5. <!--[endif]-->

<!--[if !supportLists]-->6. <!--[endif]-->

<!--[if !supportLists]-->第二章<!--[endif]-->面板类特效
<!--[if !supportLists]-->1. <!--[endif]-->CollapsiblePanel：折叠面板就是实现一个Panel的显示和隐藏，并能定义这个Panel的一些样式

<ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"

TargetControlID="Panel1" //要实现折叠的Panel的ID

ExpandControlID="Panel2" //激发伸展效果的控件，主要是通过控件的Click事件实现伸展效果

CollapseControlID="Panel2" //激发折叠效果的控件，主要是通过控件的Click事件实现伸展效果

Collapsed="True" //默认打开页面时，此Panel是否处于折叠状态

TextLabelID="Label1" //显示折叠状态的目标控件

ImageControlID="Image1" // 如果通过Image图像实现折叠和伸展效果，那么在此处设置图像的ID

ExpandedText="(Hide Details...)" //伸展时显示的信息

CollapsedText="(Show Details...)" //折叠时显示的信息

ExpandedImage="~/images/collapse_blue.jpg" //伸展时使用的图像路径

CollapsedImage="~/images/expand_blue.jpg" //折叠时使用的图像路径

SuppressPostBack="true" //

ExpandDirection="" //伸展方向，水平或者垂直

AutoCollapse="false" //当失去焦点时是否自动折叠

AutoExpand="true" //当失去焦点时是否自动伸展

SkinID="CollapsiblePanelDemo" //

/>

 

<!--[if !supportLists]-->2. <!--[endif]-->DragPanel：控件的目的是实现一个可以自由拖拽的Panel；

<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"

TargetControlID="Panel6" //表示被拖拽的目标控件的ID

DragHandleID="Panel7" // 表示实现拖拽的控件（表示实现的），即当拖拽DragHandleID时，实现上移动的是TargetControlID。一般Panel6内包括Panel7

/>

 

<!--[if !supportLists]-->3. <!--[endif]-->Tabs：在一个页面上显示多个选项卡，一般由TabContainer和TabPanel组成。

<ajaxToolkit:TabContainer runat="server" ID="Tabs"

Height="138px" //选项卡的高度

OnClientActiveTabChanged="ActiveTabChanged" //单击选项卡标题时触发的事件

ActiveTabIndex="0" //默认显示的选项卡

Width="402px" //

ScrollBars="Auto"//是否显示滚动条

>

<ajaxToolkit:TabPanel runat="server" ID="Panel1" HeaderText="Signature and Bio" //选项卡的标题>

<HeaderTemplate></HeaderTemplate> //选项卡标题模板

<ContentTemplate>//选择卡内的模板

<asp:UpdatePanel ID="updatePanel1" runat="server">

<ContentTemplate>

<table>

<tr>

<td>

Signature:</td>

<td>

<asp:TextBox ID="signatureText" runat="server"/>

</td>

</tr>

<tr>

<td>

Bio:

</td>

<td>

<asp:TextBox ID="bioText" runat="server" />

</td>

</tr>

</table>

<asp:Button ID="Button3" runat="Server" Text="Save" OnClick="SaveProfile" />

<br /><br />

Hit Save to cause a postback from an update panel inside the tab panel.<br />

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</ajaxToolkit:TabPanel>

 

<ajaxToolkit:TabPanel runat="server" ID="Panel3" HeaderText="Email" >

<ContentTemplate>

Email: <asp:TextBox ID="emailText" runat="server" />

<br /><br />

<asp:Button ID="Button1" runat="server" Text="Save" OnClick="SaveProfile" />

<br /><br />

Hit Save to cause a full postback.

</ContentTemplate>

</ajaxToolkit:TabPanel>

 

<ajaxToolkit:TabPanel runat="server" ID="Panel2" OnClientClick="PanelClick" HeaderText="Controls">

<ContentTemplate>

<div>Controls authored by Toolkit User (read-only - demo purposes):</div>

<ul>

<li>Calendar</li>

<li>MaskedEdit</li>

<li>Accordion</li>

<li>Calendar</li>

<li>Calendar</li>

</ul>

<br />

</ContentTemplate>

</ajaxToolkit:TabPanel>

&nbsp;

 

</ajaxToolkit:TabContainer>

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhang_xiao_qing_c_s_/archive/2009/02/10/3874132.aspx