asp.net中ajax1.0实例应用02

Slider Demonstration

功能：拖拉要选择的数字值

使用：效果：

页面：

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:Label ID="lblShow" runat="server" style="text-align:right"  Text="0"/>       

<asp:TextBox ID="txtShow" runat="server" style="right:0px"  Text="0"/>   

<cc1:SliderExtender ID="SliderExtender1" runat="server"

    TargetControlID="txtShow"

    BoundControlID="lblShow"

    Maximum="100"

    Minimum="0"       

    Decimals="2"   

    Orientation="Horizontal">

</cc1:SliderExtender>       

<cc1:SliderExtender ID="SliderExtender2" runat="server"

    TargetControlID="txtShow"

    BoundControlID="lblShow"

    Maximum="100"

    Minimum="0"

    Orientation="Vertical">

</cc1:SliderExtender>

说明：

<%--TargetControlID 用于保存值得文本框

    BoundControlID  用户显示的标签

    Maximum         可表示的最大值

    Minimum         可表示的最小值

    Decimals        后面带几位小数

    Orientation     怎样显示Horizontal为横向显示，Vertical为竖向显示--%>

Accordion Demonstration

功能：无刷新下拉面板显示

使用：效果：

页面：

<asp:ScriptManager ID="ScriptManager1" runat="server" />     

<cc1:Accordion ID="Accordion1" runat="server"  SelectedIndex="0"

HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"

ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"

TransitionDuration="250" AutoSize="None" RequireOpenedPane="true" SuppressHeaderPostbacks="true">

<Panes>

    <cc1:AccordionPane ID="AccordionPane1" runat="server">

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

          <Content>

               The Accordion is a web control that allows you to provide multiple

          </Content>

     </cc1:AccordionPane>

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

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

           <Content>

              The Accordion is a web control that allows you to provide multiple

           </Content>

      </cc1:AccordionPane>

</Panes>

         </cc1:Accordion>      

说明： 

<%-- SelectedIndex           从零开始默认显示的面板

     HeaderCssClass          头模板的样式

     HeaderSelectedCssClass  被选中后头模板的样式

     ContentCssClass         内容模板的样式

     FadeTransitions         模板隐藏时是否启用渐隐效果        

     TransitionDuration      影响模板隐藏显示的速度

     FramesPerSecond         影响模板隐藏显示，值不宜过大

     AutoSize                有None,Limit,Fill等属性，其中第一个在面板隐藏后其他元素的位置会调整

     RequireOpenedPane       设置是否必须要显示一个面板

     SuppressHeaderPostbacks 设置是否阻止一个链接，如果头模板内有链接可以进行阻止

     Panes                   放置显示的面板

     HeaderTemplate          面板头模板

     ContentTemplate         面板内容模板--%>

TextBoxWatermark Demonstration

功能：在文本框没有值时显示提示和设置文本框样式

使用：效果：

页面：

<asp:ScriptManager ID="ScriptManager1" runat="server" />

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

     <ContentTemplate>

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

          <asp:Button ID="btnSubmit" runat="server" Text="Submit" /><br />

          <asp:Label ID="lblName" runat="server" Text="You Name Is:" /> <br />

          <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender1" runat="server"

              TargetControlID="txtName"

              WatermarkText="Write You Name Please"

              WatermarkCssClass="txtNameCss">

          </cc1:textboxwatermarkextender>   

     </ContentTemplate>

</asp:UpdatePanel>

.txtNameCss{

   background-image:url(image/bg_nav.gif)

}

说明：

<%--TargetControlID    要控制的文本框

    WatermarkText      提示的信息

    WatermarkCssClass  没有值得时候文本框的样式--%>

Rating Demonstration

功能：提供打分功能

使用：效果

样式：

<style type="text/css">

    .star {

        width:28px;cursor:pointer;background-repeat:no-repeat;

    }

    .fill {

        background-image:url(FilledStar.png)

    }

    .empty {

        background-image:url(EmptyStar.png)

    }

    .wairing{

        background-image:url(SavedStar.png)

    }

</style>

页面：

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

    <ContentTemplate>

        <cc1:rating id="Rating1" runat="server"

            StarCssClass="star"

            FilledStarCssClass="fill"

            EmptyStarCssClass="empty"                   

            WaitingStarCssClass="wairing" AutoPostBack="True" OnChanged="Rating1_Changed">

        </cc1:rating>

        <br />

        <asp:Label ID="Label1" runat="server" Text="得分："></asp:Label>

    </ContentTemplate>

</asp:UpdatePanel>

后台：

protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e){

    this.Label1.Text = this.Rating1.CurrentRating.ToString();//由于Label存值的效果不是很好，所以这里只是显示给用户

}

说明：

<%--StarCssClass        开始时的样式

    FilledStarCssClass  选中等级星样式

    EmptyStarCssClass   未选中等级星样式

    WaitingStarCssClass 更改时样式

    AutoPostBack        是否回传

    OnChanged           改变等级时激发的事件

    CurrentRating       默认等级

    MaxRating           最大等级

    ReadOnly           是否只读--%>