AJAX ControlToolkit學習日誌-TextBoxWatermarkExtender(28)

         TextBoxWatermarkExtender用於對TextBox添加浮水印效果。

下面請看一個樣本：

1)在VS2005中建立一個ASP.NET AJAX-Enabeld Web Project項目工程，命名為TextBoxWatermarkExtender1。

2)在Default.aspx中添加兩個TextBox，分別用於輸入FirstName 和LastName。然後對每個TextBox添加一個TextBoxWatermarkExtender控制項，用於添加浮水印效果。

代碼如下：

1        FirstName:  
2        <asp:TextBox ID="txtFirstName" runat="server" CssClass="unwatermarked"></asp:TextBox>&nbsp;
3        <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender1" runat="server" targetcontrolid="txtFirstName" WatermarkCssClass="watermarked" WatermarkText="please input the first name"></cc1:textboxwatermarkextender>
4        <br />
5        LastName: &nbsp;
6        <asp:TextBox ID="txtLastName" runat="server" CssClass="unwatermarked"></asp:TextBox>
7        <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender2" runat="server" targetcontrolid="txtLastName" WatermarkCssClass="watermarked" WatermarkText="please input the last name"></cc1:textboxwatermarkextender>
8        <br />

屬性說明：

         TargetControlID：該控制項的目標關聯控制項。
         WatermarkCssClass：產生浮水印效果的css樣式。
         WatermarkText：有浮水印效果時，浮水印上的文本。
         
3)要看到浮水印效果的關鍵的css樣式。

代碼如下：

1        .watermarked {}{
2            height:20px;
3            width:150px;
4            padding:2px 0 0 2px;
5            border:1px solid #BEBEBE;
6            background-color:#F0F8FF;
7            color:gray;
8        }    

4)在頁面上添加一個UpdatePanel控制項，在該控制項中添加一個Button和Label，用於顯示使用者的輸入。

代碼如下：1        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
2            <ContentTemplate>
3                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" />
4                <br />
5                <br />
6                <asp:Label ID="message" runat="server"></asp:Label>
7            </ContentTemplate>
8        </asp:UpdatePanel>

Button按鈕的處理代碼：            this.message.Text = "歡迎你：" + this.txtFirstName.Text + " " + this.txtLastName.Text;

5)按下CTRL+F5,在瀏覽器裡查看效果。

如下：