ASP.NET的Panel控件
ASP.NET的Panel控件,通過名字我們可以看出這是一個菜單控件,當鼠標移動到指定的位置時,在不影響其他的元素的情況下出現一個菜單,并允許用戶進行一些操作。
重要屬性
TargetControlID:要顯示菜單的目標控件的ID
PopupControlID:作為彈出菜單的控件的ID
HoverCssClass:鼠標移動到目標控件時目標控件的樣式
PopupPosition:彈出菜單所在的位置,共有五個值(bottom,top,left,right,center)
OffsetX:菜單距離目標控件的位置--橫坐標
OffsetY:菜單距離目標控件的位置--縱坐標
1 打開vs2005,創建一個AjaxControlToolKit網站,命名為oec2003_HoverMenu
2 打開默認Default.aspx頁,切換到設計視圖
3 在頁面中添加一個TextBox和一個Panel控件,并在Panel控件中添加三個LinkButton控件,如下
PopDelay:彈出菜單的延遲時間
- <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
- <asp:LinkButton ID="LinkButton1" runat="server" OnClick=
"LinkButton1_Click">日期</asp:LinkButton>- <br />
- <asp:LinkButton ID="LinkButton3" runat="server" OnClick=
"LinkButton3_Click">時間</asp:LinkButton><br />- <asp:LinkButton ID="LinkButton2" runat="server" OnClick=
"LinkButton2_Click">姓名</asp:LinkButton>- </asp:Panel>
- 4 在頁面中添加HoverMenu控件,并設置其屬性,代碼如下
- <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat=
"server" TargetControlID="TextBox1"- OffsetX="-1" OffsetY="-1" HoverCssClass="hover" PopupControlID=
"Panel1" PopupPosition="bottom">- </ajaxToolkit:HoverMenuExtender>
- 5 切換到代碼視圖,在head元素間添加css樣式,用來實現鼠標移動到目標控件時的樣式,如下
- <style type="text/css">
- .hover
- {}{
- background-color:blue;
- background-repeat:repeat-x;
- background-position:left top;
- }
- </style>
前面在Panel中放置了三個LinkButton控件,點擊了LinkButton控件后會在文本框中出現相應的內容,LinkButton的單擊事件代碼如下
- protected void LinkButton1_Click(object sender, EventArgs e)
- {
- TextBox1.Text = DateTime.Now.ToShortDateString();
- }
- protected void LinkButton3_Click(object sender, EventArgs e)
- {
- TextBox1.Text = DateTime.Now.TimeOfDay.ToString();
- }
- protected void LinkButton2_Click(object sender, EventArgs e)
- {
- TextBox1.Text = "oec2003";
- }
保存設計,運行程序,將鼠標移動文本框上時,會發現,文本框的樣式變成了我們自定義的樣式了,而且還會彈出一個菜單,就是Panel控件
點擊菜單中的按鈕在文本框中就會出現相應的內容 ,以上介紹ASP.NET的Panel控件。
【編輯推薦】