jQuery EasyUI プラグイン


jQuery EasyUI は、強力な datagrid (データ グリッド)、treegrid (ツリー テーブル)、panel (パネル)、コンボ (ドロップダウンの組み合わせ) などを含む、クロスブラウザー Web ページを作成するためのコンポーネントの完全なコレクションを提供します。 ユーザーは、これらのコンポーネントを組み合わせて使用​​することも、いずれかを個別に使用することもできます。

プラグインリスト

ベース(基本)

  • パーサーパーサー

  • イージーローダーローダー

  • ドラッグ可能ドラッグ可能

  • ドロップ可能ドロップ可能

  • サイズ変更可能 サイズ調整可能

  • ページネーション ページネーション

  • 検索ボックス 検索ボックス

  • プログレスバー進行状況バー

  • ツールチッププロンプトボックス

レイアウト(レイアウト)

  • パネルパネル

  • タブ

  • 蛇腹折りたたみパネル

  • レイアウトレイアウト

Menu(メニュー)とButton(ボタン)

  • Menuメニュー

  • Linkbuttonリンクボタン

  • Menuボタンメニューボタン

  • Splitbutton分割ボタン

フォーム(フォーム)

  • フォームフォーム

  • Validatebox 検証ボックス

  • コンボの組み合わせ

  • Comboboxコンボボックス

  • Combotree組み合わせツリー

  • Combogrid組み合わせグリッド

  • ナンバーボックス

  • 日付ボックス

  • Datetimebox

  • Calendar

  • Spinner

  • Numberspinner value スピナー

  • Timespinner 時間スピナー ウィンドウ

  • グリッド) とツリー (tree)

Datagrid

  • Propertygrid

  • Tree

  • Treegrid ツリーグリッド

plugin

    easyui の各コンポーネントはすべてプロパティ、メソッド、イベントを持っています。ユーザーはこれらのコンポーネントを簡単に拡張できます。

  • プロパティ

    • プロパティは、jQuery.fn.{plugin}.defaults で定義されます。たとえば、ダイアログのプロパティは jQuery.fn.dialog.defaults で定義されます。

  • Event

    • Event (コールバック関数) も jQuery.fn.{plugin}.defaults で定義されています。

  • メソッド

    • メソッドを呼び出すための構文: $('selector').plugin('method',parameter);

  • ここで:

selector は jquery オブジェクト セレクターです。

plugin はプラグイン名です。

メソッドは、プラグインに一致する既存のメソッドです。

parameter はパラメータ オブジェクトで、オブジェクト、文字列などを指定できます...

メソッドは jQuery.fn.{plugin}.methods で定義されます。各メソッドには、jq と param という 2 つのパラメータがあります。最初のパラメータ「jq」は必須で、jQuery オブジェクトを参照します。 2 番目のパラメータ「param」は、メソッドに渡される実際のパラメータを指します。たとえば、ダイアログ コンポーネントの「mymove」という名前のメソッドを拡張する場合、コードは次のとおりです: 

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

これで、「mymove」メソッドを呼び出して、ダイアログ ボックス (ダイアログ) を指定された位置に移動できます: 

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

jQuery EasyUI の使用を開始します

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

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

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

<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」イベントをバインドするコンボボックスを作成する方法を示しています。

りー