Cara buat Textboxt Watermark menggunakan AjaxControlToolkit

Forum diskusi pemrograman web ASP.NET

Moderator: irzan2010

Cara buat Textboxt Watermark menggunakan AjaxControlToolkit

Postby kikiwisaka » 04 Feb 2012, 19:24

Selamat malam...
Ane dari kemarin2 lagi coba buat web dengan bantuan ajax control toolkit untuk mempercantik penampilannya. Ane coba buat textbox watermark tapi belum berhasil juga. Berikut penampakannya:
Code: Select all
<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table style="width:100%;">
            <tr>
                <td class="style1">First Name:</td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style1">Last Name</td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </td>
                <td>
                </td>
            </tr>
        </table>
        <AjaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
        TargetControlID="TextBox1" WatermarkText="Type First Name Here" Enabled="True" />
    </div>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
    </form>

Ane udah ngikutin tutorial yang ada disini http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx dan yang ane bikin bingung, itu file .css nya isinya kayak gimana yak om? Karena belum tau dan nambahin file .css-nya, jadi percobaan ane masih gagal. Mungkin om, tante, abang ada yang bisa ngasih pencerahan... :D
kikiwisaka
Prajurit Dua
Prajurit Dua
 
Posts: 5
Joined: 19 Dec 2011, 15:25
Location: Batam
Memberi kopi: 0 cangkir
Mendapat kopi: 0 cangkir

Re: Cara buat Textboxt Watermark menggunakan AjaxControlTool

Postby irzan2010 » 14 Feb 2012, 19:13

untuk menambahkan file CSS tambahkan code ini di bagian <head> :
Code: Select all
<link ref="namaFileCSS.css" rel="stylesheet" type="text/css"/>

nah di CSSnya buat class style untuk textbox saat textbox tersebut kosong.
contoh, buka CSS dan tambahkan kode berikut :
Code: Select all
.txtKosong {
    border: solid 1px #999999;
    background-color: #99CCFF;
    color: #cccccc;
}

lalu set property WatermarkCssClass di control TextBoxWatermark = "txtKosong" (tanpa petik)

pada sample AjaxControlToolkit dicontohkan kalau textbox kosong maka backgroundnya berwarna biru muda dengan warna font abu-abu.
nah CSS digunakan saat texbox target kosong (tidak diisi).

CMIIW
irzan2010
Kopral Satu
Kopral Satu
 
Posts: 1000
Joined: 12 Mar 2010, 12:58
Location: Surabaya
Memberi kopi: 24 cangkir
Mendapat kopi: 31 cangkir


Return to ASP.NET

Who is online

Users browsing this forum: No registered users and 1 guest