jQuery EasyUI メニューとボタンプラグイン -Menubutton メニューボタン

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.linkbutton.defaults から拡張されます。$.fn.menubutton.defaults によってデフォルトの defaults を上書きします。

メニューボタン（menubutton）はドロップダウンメニューの一部です。リンクボタン（linkbutton）およびメニュー（menu）と関連しています。リンクボタン（linkbutton）を表示し、メニュー（menu）を非表示にします。ユーザーがリンクボタン（linkbutton）をクリックするか、マウスをリンクボタン（linkbutton）の上に移動すると、メニュー（menu）が表示され、ユーザーがメニューをクリックできるようになります。

依存

  • menu
  • linkbutton

使用方法

通常、メニューボタン（menubutton）は宣言的な方法でマークアップから作成されます。

<a href="#" id="mb" class="easyui-menubutton"
    data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
    <div data-options="iconCls:'icon-undo'">Undo</div>
    <div data-options="iconCls:'icon-redo'">Redo</div>
    <div class="menu-sep"></div>
    <div>Cut</div>
    <div>Copy</div>
    <div>Paste</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove'">Delete</div>
    <div>Select All</div>
</div>

javascript を使用してメニューボタン（menubutton）を作成します。

<a href="#" id="mb">Edit</a>
<div id="mm" style="width:150px">
...
</div>

$('#mb').menubutton({
    iconCls: 'icon-edit',
    menu: '#mm'
});

プロパティ

これらのプロパティはリンクボタン（linkbutton）から拡張されたもので、以下はメニューボタン（menubutton）で追加されたプロパティです。

名前 型 説明 デフォルト値
plain boolean true に設定すると、シンプルなエフェクトが表示されます。 true
menu string 対応するメニュー（menu）を作成するためのセレクターです。 null
duration number ボタンにホバーしたとき、メニュー（menu）を表示するまでの時間をミリ秒単位で定義します。 100

メソッド

これらのメソッドはリンクボタン（linkbutton）から継承され、以下はメニューボタン（menubutton）で追加またはオーバーライドされたメソッドです。

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
disable none メニューボタン（menubutton）を無効にします。
enable none メニューボタン（menubutton）を有効にします。
destroy none メニューボタン（menubutton）を破棄します。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張