jQuery EasyUI プラグイン


jQuery EasyUI は、クロスブラウザ対応のWebページを作成するための完全なコンポーネントセットを提供します。強力な datagrid（データグリッド）、treegrid（ツリーグリッド）、panel（パネル）、combo（ドロップダウンコンボ）などが含まれます。ユーザーはこれらのコンポーネントを組み合わせて使用することも、単独で使用することもできます。

プラグイン一覧

Base（基礎）

Layout（レイアウト）

Menu（メニュー）と Button（ボタン）

Form（フォーム）

Window（ウィンドウ）

DataGrid（データグリッド）と Tree（ツリー）

プラグイン

easyui の各コンポーネントには、プロパティ、メソッド、イベントがあります。ユーザーはこれらのコンポーネントを簡単に拡張することができます。

プロパティ

プロパティは jQuery.fn.{plugin}.defaults に定義されています。たとえば、dialog のプロパティは jQuery.fn.dialog.defaults に定義されています。

イベント

イベント（コールバック関数）も jQuery.fn.{plugin}.defaults に定義されています。

メソッド

メソッドを呼び出す構文：$('selector').plugin('method', parameter);

ここで：

  • selector は jQuery オブジェクトのセレクタです。
  • plugin はプラグイン名です。
  • method はプラグインに対応する既存のメソッドです。
  • parameter はパラメータオブジェクトで、オブジェクトや文字列などを指定できます。

メソッドは jQuery.fn.{plugin}.methods に定義されています。各メソッドには jq と param の2つのパラメータがあります。最初のパラメータ 'jq' は必須で、jQuery オブジェクトを参照します。2番目のパラメータ 'param' は、メソッドに渡される実際のパラメータを参照します。たとえば、dialog コンポーネントのメソッド名 'mymove' のメソッドを拡張するには、コードは次のようになります。

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
        return jq.each(function(){
            $(this).dialog('move', newposition);
        });
    }
});

これで、'mymove' メソッドを呼び出して、ダイアログ（dialog）を指定した位置に移動できます。

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

jQuery EasyUI を使い始める

ライブラリをダウンロードし、ページ内で EasyUI CSS および JavaScript ファイルを参照してください。

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css.html">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css.html">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js.html"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js.html"></script>

EasyUI に必要なファイルを参照すると、マークアップまたは JavaScript を使用して EasyUI コンポーネントを定義できます。たとえば、折りたたみ可能なパネルを定義するには、次の HTML コードを記述する必要があります。

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" iconCls="icon-save" collapsible="true">
    The panel content
</div>

マークアップでコンポーネントを作成する場合、'data-options' 属性は、バージョン 1.3 以降の HTML5 互換の属性名をサポートするために使用されます。したがって、上記のコードは次のように書き直すことができます。

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
    The panel content
</div>

次のコードは、'onSelect' イベントにバインドされたコンボボックスを作成する方法を示しています。

<input class="easyui-combobox" name="language"
    data-options="
    url:'combobox_data.json',
    valueField:'id',
    textField:'text',
    panelHeight:'auto',
    onSelect:function(record){
    alert(record.text)
    }">
その他の拡張