首頁 > 其他

Atlas 學習之002：“CollapsiblePanelExtender”和“TextBoxWatermarkExtender”

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 　　近日準備把“Atlas Control Toolkit”中的針對ASP.NET 2.0 控制項的擴充工具系統地學習一遍，並把學習過程中遇見的問題和解決辦法完整的記錄下來，也算是學習心得吧！昨天已經學習了工具包中的“ToggleButtonExtender”工具（控制項），感覺這些工具（控制項）很酷，基本不用編寫太多的代碼，就可以實現很酷的功能，何樂而不為呢？一天學習一點，堅持下去，積累下去，相信會有所收穫的！

　　好了，言歸正傳！今天學習了兩個工具：“CollapsiblePanelExtender”和“TextBoxWatermarkExtender”，同樣實現了很酷的功能，先來示範稍微簡單一些的“TextBoxWatermarkExtender”工具。

　　1、開啟“Visual Studio 2005”，建立網站、在“我的模板”下選擇““Atlas”　Web　Site”、確定。

　　2、切換到“Default.aspx”的“設計”頁面，拖拽一個　TextBox　控制項，再在“Atlas Control Toolkit”中拖拽一個“TextBoxWatermarkExtender”控制項（工具）。

　　3、選擇那個　TextBox　控制項，到屬性中找到“行為”下面的“TextBoxWatermarkExtender”屬性，雙擊它，在“WaterMarkText”屬性中輸入“在此輸入你的姓名”，斷行符號確定。儲存所有檔案。

　　4、切換到“Default.aspx”的“設計”頁面，右擊該頁面，選擇“在瀏覽器中查看”（或者直接按“Ctrl”+F5）運行一把，結果出來後應該是這樣：頁面中的文字框中已經有“在此輸入你的姓名”的文字顯示出來，用滑鼠點擊文字框，文字消失了，移開滑鼠，文字又出現了，一旦在文字框中輸入了任何字元文字，“在此輸入你的姓名”的提示不再顯示出來了。

　　5、實現該功能太簡單了，沒有寫一行代碼，以前簡直是不可想象呀！

 

　　好，下面示範“CollapsiblePanelExtender”控制項（工具）。

　　1、往“Default.aspx”的“設計”頁面中拖拽一個“Panel”控制項，設定其“ID”為“Panel1”（保持不變即可），往該“Panel”控制項中拖拽一個“Image”控制項，設定其“ID”為“Image1”（保持不變即可），設定其“ImageUrl”屬性為下面的一個圖片：

：expand.jpg，

 另外等會還需要另一個圖片，在此一併傳入：

：collapse.jpg

　　注意：需要把以上兩個圖片檔案下載後拷貝到這個網站的根目錄下。

　　2、再往“Default.aspx”的“設計”頁面中拖拽一個“Panel”控制項，命名其“ID”為“Panel2”，並把上面操作中用到的那個TextBox　控制項拖拽進該“Panel”控制項裡。

　　3、在“Atlas Control Toolkit”下拖拽一個“CollapsiblePanelExtender”控制項（工具）到“Default.aspx”的“設計”頁面中。

　　4、選定“Panel1”控制項，點擊“右鍵”選擇“屬性”，在“行為”下選擇“CollapsiblePanelExtender”屬性，下面挨個設定其屬性：　“CollapseControlID”屬性設定為“Panel1”，　在“CollapsedImage”屬性欄輸入“expand.jpg”，　“ExpandControlID”屬性設定為“Panel1”，　在“ExpandedImage”屬性欄輸入“collapse.jpg”，　“ImageControlID”屬性設定為“Image1”。

　　5、注意：設定完所有屬性後，切換到“Default.aspx”的“源”頁面中，檢查一下代碼，確保所有控制項的代碼實在<form>和 </form>之間的，另外最重要的一點是：把“CollapsiblePanelProperties”中“TargetControlID”的屬性由原來的“Panel1”改成　"Panel2"。

　　6、簡單設定一下兩個“Panel”控制項的“BackColor”屬性，要設定成不一樣的，以示區別。

　　7、儲存所有檔案。最後的代碼應該和下面差不多：

 

<%...@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%...@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" runat="server" />
        <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server">
            <cc1:CollapsiblePanelProperties CollapseControlID="Panel1" CollapsedImage="expand.jpg"
                ExpandControlID="Panel1" ExpandedImage="collapse.jpg" ImageControlID="Image1"
                TargetControlID="Panel2" />
        </cc1:CollapsiblePanelExtender>
        <div>    
    <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server">
                <cc1:TextBoxWatermarkProperties TargetControlID="TextBox1" WatermarkText="在此輸入你的姓名" />
            </cc1:TextBoxWatermarkExtender>
        </div>
        <asp:Panel ID="Panel1" runat="server" Height="20px" Width="251px" BackColor="#FFFFC0">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/expand.jpg" /></asp:Panel>
    <asp:Panel ID="Panel2" runat="server" Height="81px" Width="251px" BackColor="#FF8080">
        <asp:TextBox ID="TextBox1" runat="server">
        </asp:TextBox>
    </asp:Panel>           
    </form>    
</body>
</html>

　　8、按“Ctrl”+F5　運行一把，結果出來後，點擊第一個“Panel”，下面的“Panel”馬上就消失了，再點擊第一個“Panel”，下面的“Panel”又重新出現了，並且測試那個文字框，效果依舊，酷呀！

　　太簡單了，從頭到尾沒有寫一行代碼，卻實現了以前需要寫很多代碼才能實現的功能，就像操作"word"和"excel"一樣，只需“設計”，不需“代碼”，技術無極限呀，大家共同努力！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More