jEasyUI は分割ボタンを作成します

jEasyUI で分割ボタンを作成する - splitbutton 属性を使いこなす

jEasyUI を使用すると、洗練された UI を備えた Web アプリケーションを簡単に開発できます。その中でも、分割ボタンは、一つの UI 要素で複数の操作を効果的に提供できる便利な機能です。この記事では、jEasyUI の splitbutton 属性を使って分割ボタンを作成する方法を、より深く掘り下げて解説します。

1. jEasyUI 分割ボタンとは？

jEasyUI 分割ボタンは、一つのボタンに二つの機能を統合した UI 要素です。

ボタン機能: ボタンをクリックすると、あらかじめ定義されたデフォルトの操作が実行されます。
ドロップダウンメニュー機能: ボタンに付属する矢印をクリックすると、関連する複数の操作を選択できるドロップダウンメニューが表示されます。

この二つの機能を組み合わせることで、ユーザーは直感的に操作を選択できます。

2. jEasyUI 分割ボタンの作成方法

jEasyUI で分割ボタンを作成するには、<a> 要素に easyui-linkbutton クラスと splitbutton 属性を適用します。

2.1 基本的な使い方

最も基本的な分割ボタンを作成するコードは次のとおりです。

<a href="#" class="easyui-linkbutton" data-options="plain:true,splitbutton:true">分割ボタン</a>

data-options="plain:true": ボタンをフラットなデザインにします。
data-options="splitbutton:true": 分割ボタンを有効にします。

2.2 オプション設定

splitbutton 属性には、分割ボタンの動作や外観をカスタマイズするためのオプションをオブジェクトとして指定できます。

オプション	説明
menu	ドロップダウンメニューとして使用する <div> 要素の ID またはセレクタを指定します。
iconCls	ボタンに表示するアイコンを指定します。jEasyUI が提供するアイコンフォント、または独自のアイコンフォントを使用できます。
duration	メニューの表示/非表示アニメーションにかかる時間をミリ秒で指定します。
disabled	ボタンを無効化するかどうかを指定します。true に設定すると、ボタンはクリックできなくなります。

例:

<a href="#" class="easyui-linkbutton" data-options="plain:true,
    splitbutton:{
        menu:'#mm',
        iconCls:'icon-edit',
        duration:200
    }">編集</a>

<div id="mm" style="width:100px;">
    <div data-options="iconCls:'icon-copy'">コピー</div>
    <div data-options="iconCls:'icon-paste'">貼り付け</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove'">削除</div>
</div>

解説:

menu オプションで、id="mm" の <div> 要素をドロップダウンメニューとして関連付けています。
iconCls オプションで、編集を表す "icon-edit" アイコンをボタンに表示しています。
duration オプションで、メニューの表示/非表示アニメーションに 200 ミリ秒を設定しています。
ドロップダウンメニューの各項目には、iconCls オプションを使ってアイコンを表示しています。

2.3 イベント処理

分割ボタンのクリックイベントとドロップダウンメニューのアイテムクリックイベントをそれぞれ処理することができます。

// 分割ボタンのクリックイベント
$('.easyui-linkbutton').linkbutton({
    onClick: function(){
        // ボタンクリック時の処理
        alert('ボタンがクリックされました');
    }
});

// ドロップダウンメニューのアイテムクリックイベント
$('#mm div').click(function(){
    // クリックされたアイテムの処理
    alert($(this).text() + 'がクリックされました');
});

2.4 動的な無効化/有効化

disabled プロパティを使って、分割ボタンを動的に無効化/有効化することができます。

// ボタンを無効化
$('.easyui-linkbutton').linkbutton('disable');

// ボタンを有効化
$('.easyui-linkbutton').linkbutton('enable');

3. jEasyUI 分割ボタンの適用シーン

分割ボタンは、複数の関連する操作を一つにまとめたい場合に適しています。

ツールバー: よく使う操作をボタンに配置し、その他の操作をドロップダウンメニューに配置することで、ツールバーのスペースを節約できます。
テーブル操作列: デフォルト操作をボタンに配置し、その他の操作をドロップダウンメニューに配置することで、テーブルの見た目をすっきりさせることができます。
フォーム送信ボタン: デフォルトの送信操作をボタンに配置し、その他の送信オプション（例：下書き保存、プレビュー）をドロップダウンメニューに配置することで、ユーザーの操作性を向上させることができます。

4. まとめ

splitbutton 属性を使用すると、jEasyUI で機能豊富な分割ボタンを簡単に作成できます。分割ボタンを適切に使用することで、ユーザーインターフェースのシンプルさと使いやすさを向上させ、Web アプリケーションをより魅力的なものにすることができます。