asp.net的ajax1.0实例应用01
时间:2010-07-16 来源:cuisuqiang
Accordion Demonstration
功能:是一个空间总是在页面的制定位置出现
使用:效果:
页面:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<%--用于显示的Panl--%>
<asp:Panel ID="loginPanl" runat="server">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:TextBox ID="txtPass" runat="server"></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="登录" />
</asp:Panel>
<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender_forLogin" runat="server"
TargetControlID="loginPanl"
VerticalOffset="110"
VerticalSide="Top"
HorizontalOffset="10"
HorizontalSide="Left"
ScrollEffectDuration="2">
</cc1:AlwaysVisibleControlExtender>
说明:
<%--TargetControlID ----要控制的空间Id--%>
<%-- VerticalOffset ----Y轴方向上以目标为准的位置,如果VerticalSide是Top则从上开始计算--%>
<%-- VerticalSide ----设置控件的Y轴上以上下为准的目标--%>
<%-- HorizontalOffset -----X轴方向上以目标为准的位置,如果HorizontalSide是Lift则从做开始计算--%>
<%--HorizontalSide -----设置控件的X轴方向以左右为准的目标--%>
<%--ScrollEffectDuration-----页面拉动后控件随及改变位置的反应时间--%>
<%--TargetControlID - ID of control for this extender to always make visible
HorizontalOffset - Distance to the HorizontalSide edge of the browser in pixels from the same side of the target control. The default is 0 pixels.
HorizontalSide - Horizontal edge of the browser (either Left, Center, or Right) used to anchor the target control. The default is Left.
VerticalOffset - Distance to the VerticalSide edge of the browser in pixels from the same side of the target control. The default is 0 pixels.
VerticalSide - Vertical edge of the browser (either Top, Middle, or Bottom) used to anchor the target control. The default is Top.
ScrollEffectDuration - Length in seconds of the scrolling effect to last when the target control is repositioned. The default is .1 second.--%>
Calendar Demonstration
功能:无刷新小时格式化的日历
使用:效果:
页面:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<%--显示日历的文本框--%>
<asp:TextBox ID="txtDatae" runat="server"></asp:TextBox>
<%--格式化是自己定义的中间的 - 可以用 : 代替--%>
<%--
M 月,1-12
MM 月,01-12
MMM 月,Jan-Dec
d 日,1-31
dd 日,01-31
ddd 日,Sun-Sat
dddd 日,Sunday-Saturday
y 年,0-99
yy 年,00-99
yyyy 年,1900-9999
--%>
<cc1:CalendarExtender ID="CalendarExtender_forFirstDate" runat="server"
TargetControlID="txtDatae"
Format="yyyy-MM-dd"
>
</cc1:CalendarExtender>
ConfirmButton Demonstration
功能:自定义对话框
使用:效果:
页面:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:Button ID="btnOk" runat="server" Text="请提交" /><br />
<br />
<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
TargetControlID="btnOk"
ConfirmText="确定要这样做吗?"
>
</cc1:ConfirmButtonExtender>
DragPanel Demonstration
功能:控制一个面板可以拖动
使用:说明的是如果只是拖进去几个面板可以拖动,但会还原位置,因为页面内没有足够可以移动的空间。
可以在一个大的页面里使用,或增加一些换行符
效果:
页面:
<asp:ScriptManager ID="ScriptManager1" runat="Server" />
<asp:Panel ID="Panel6" runat="server" BackColor="#FFFFC0" Height="264px" Width="232px">
<asp:Panel ID="Panel7" runat="server" BackColor="#FFC0C0" BorderStyle="Outset">
<div class="dragMe">Drag Me</div>
</asp:Panel>
<asp:Panel ID="Panel8" runat="server">
<div>
<p>This panel will reset its position
on a postback or page refresh.</p>
<hr />
<p>Word</p>
</div>
</asp:Panel>
</asp:Panel>
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server"
TargetControlID="Panel6"
DragHandleID="Panel7">
</cc1:DragPanelExtender>
说明:
<%--TargetControlID -----要控制的面板,该面板内有控制拖动的面板和显示的面板--%>
<%--DragHandleID -----控制拖动的面板,改面板在总面板之内--%>
<%--TargetControlID -----The ID of a Panel to make draggable
DragHandleID -----The ID of a control that will serve as the "drag handle" for the panel.
When the user clicks and drags this control, the panel will move--%>
ToggleButton Demonstration
功能:自定义格式的图片选择框
使用:效果:
页面:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" Checked="true" Text="I like ASP.NET" runat="server"/><br />
<cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1"
ImageWidth="19"
ImageHeight="19"
UncheckedImageUrl="ToggleButton_Unchecked.gif"
CheckedImageUrl="ToggleButton_Checked.gif"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck" />
<asp:CheckBox ID="CheckBox2" Checked="true" Text='I like ASP.NET AJAX' runat="server"/><br />
<cc1:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server"
TargetControlID="CheckBox2"
ImageWidth="19"
ImageHeight="19"
UncheckedImageUrl="ToggleButton_Unchecked.gif"
CheckedImageUrl="ToggleButton_Checked.gif"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck" />
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
<br /><br />
<asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />
</ContentTemplate>
</asp:UpdatePanel>
说明:
<%--TargetControlID 要控制的选择框
ImageWidth 显示图片的宽
ImageHeight 显示图片的高
UncheckedImageUrl 不选择时图片
CheckedImageUrl 选择时图片
CheckedImageAlternateText 选择是提示信息
UncheckedImageAlternateText 不选择时提示信息--%>
<%--TargetControlID - The ID of the CheckBox to modify
ImageHeight\ImageWidth The height and width of the image
CheckedImageUrl the URL of the image to show when the toggle button is in the checked state.
UncheckedImageUrl the URL of the image to show when the toggle button is in the unchecked state.
DisabledCheckedImageUrl the URL of the image to show when the toggle button is disabled and in the checked state.
DisabledUncheckedImageUrl the URL of the image to show when the toggle button is disabled and in the unchecked state.
CheckedImageAlternateText the alt text to show when the toggle button is in the checked state.
UncheckedImageAlternateText the alt text to show when the toggle button is in the unchecked state.
ImageHeight/ImageWidth - The height and width, respectively, of the image that will be displayed--%>