Asp.Net Ajax---HoverMenuコントロール使用

12281 ワード
メニュー 影響 bottom センター

概要


名前から、マウスが指定した位置に移動すると、他の要素に影響を及ぼさずにメニューが表示され、ユーザーがいくつかの操作を行うことができるメニューコントロールであることがわかります.

重要な属性

  • TargetControl:メニューを表示するターゲットコントロールのID
  • PopupControl:ポップアップメニューのコントロールであるID
  • HoverCssClass:マウスがターゲットコントロールに移動するときのターゲットコントロールのスタイル
  • PopupPosition:ポップアップメニューがある場所で、5つの値(bottom,top,left,right,center)
    • があります.
  • OffsetX:メニュー距離ターゲットコントロールの位置–横座標
  • OffsettY:メニュー距離ターゲットコントロールの位置-縦座標
  • PopDelay:ポップアップメニューの遅延時間

    • 例1


    1 vs 2005を開き、oec 2003_という名前のAjaxControlToolKitのWebサイトを作成します.HoverMenu 2はデフォルトのDefaultを開きます.aspxページは、デザインビュー3に切り替えてTextBoxとPanelコントロールを1つ追加し、PanelコントロールにLinkButtonコントロールを3つ追加します.
    <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>

    6前にパネルに3つの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";
}

    7設計を保存して、プログラムを実行して、マウスをテキストの枠の上で移動する時、発見することができて、テキストの枠のスタイルは私達のカスタマイズしたスタイルになって、その上また1つのメニューを弾いて、パネルのコントロールです
    メニューのボタンをクリックするとテキストボックスに該当する内容が表示されます

    例2


    HoverMenuコントロールの簡単な応用をしましたが、実際にはHoverMenuコントロールもGridViewコントロールで編集機能を置き換えることができます.編集列をカスタマイズしたメニューに表示できるようにします.次に、どのように実現されているかを見てみましょう.
    1 Webサイトにoec 2003という名前のWebページを新規作成します.GridViewHoverMenu.aspx
    2デザインビューに切り替え、ScriptManagerとUpdatePanelコントロールをページに追加
    3 UpdatePanelコントロールにGridViewとSqlDataSourceコントロールを追加し、次のようにデータソースを構成します.
    <asp:sqldatasource id="SqlDataSource1" runat="server" conflictdetection="CompareAllValues"
    connectionstring="<%$ ConnectionStrings:studentConnectionString %>"
    deletecommand="DELETE FROM [studentInfo] WHERE [stuID] = @original_stuID AND 
      [stuName] = @original_stuName"
    insertcommand="INSERT INTO [studentInfo] ([stuID], [stuName]) VALUES (@stuID, @stuName)"
    oldvaluesparameterformatstring="original_{0}" selectcommand="SELECT * FROM [studentInfo]"
    updatecommand="UPDATE [studentInfo] SET [stuName] = 
       @stuName WHERE [stuID] = @original_stuID AND [stuName] = @original_stuName">
<DeleteParameters>
    <asp:Parameter Name="original_stuID" Type="String" />
    <asp:Parameter Name="original_stuName" Type="String" />
</DeleteParameters>
<UpdateParameters>
    <asp:Parameter Name="stuName" Type="String" />
    <asp:Parameter Name="original_stuID" Type="String" />
    <asp:Parameter Name="original_stuName" Type="String" />
</UpdateParameters>
<InsertParameters>
    <asp:Parameter Name="stuID" Type="String" />
    <asp:Parameter Name="stuName" Type="String" />
</InsertParameters>
</asp:sqldatasource>

    4 GridViewコントロールの「列の編集」ウィンドウを開き、stuNameフィールドをテンプレート列に設定
    5 GridViewコントロールでは、通常モードでの「編集」と「削除」、編集状態での「更新」と「キャンセル」の2つのメニューを実現します.
    6テンプレート列を編集すると、ウィンドウにItemTemplateとEditItemTemplateの2つの項目があり、それぞれこの2つの項目の下にHoverMenuとPanlコントロールを追加します.各PanelコントロールにはLinkButtonコントロールが2つ配置されています.プロパティの設定は次のとおりです.
    <edititemtemplate>
    &nbsp;<asp:TextBox ID="TextBox1" runat="server" 
                                       Text='<%# Bind("stuName") %>'></asp:TextBox>
    <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender2" runat="server" 
       TargetControlID="TextBox1" 
       PopupControlID="Panel2" OffsetX="10" OffsetY="-1" PopupPosition="right">
    </ajaxToolkit:HoverMenuExtender>
    <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">
    <asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="Update" 
       CommandName="Update">  </asp:LinkButton>
    <asp:LinkButton ID="LinkButton4" runat="server" CommandArgument="Cacel" 
       CommandName="Cancel">  </asp:LinkButton></asp:Panel>
</edititemtemplate>
<itemtemplate>
    <asp:Label ID="Label1" runat="server" Text='<%# Bind("stuName") %>'></asp:Label>
    <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
        TargetControlID="Label1" PopupControlID="Panel1" OffsetX="10" OffsetY="-1" 
        PopupPosition="right">
    </ajaxToolkit:HoverMenuExtender>
    <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
    <asp:LinkButton ID="LinkButton1" runat="server" CommandArgument="Edit" 
         CommandName="Edit">  </asp:LinkButton>
    <asp:LinkButton ID="LinkButton2" runat="server" CommandArgument="Delete" 
          CommandName="Delete">  </asp:LinkButton></asp:Panel>
</itemtemplate>

    ここで、LinkButtonはGridViewのデータ行の編集機能を実現するため、LinkButtonのCommand ArgumentとCommand Name属性は、編集機能に対応するCommand NameのようなGridViewのメソッドの名前に設定する必要がある.
    7設計を保存し、プログラムを実行し、stuName列のデータ行にマウスを移動すると、カスタムメニューが表示され、編集機能が実現します.機能はGridViewで編集を有効にする機能と同じです
    ポップアップ・プロンプト・レイヤ
    Hackテクノロジーの概要