jQueryのEasyUIプラグイン

前：jQueryのEasyUIデータグリッドとツリーウィジェット- Treegridツリーグリッド

jQueryのEasyUIは、というように、強力なデータグリッド（データグリッド）、treegrid（ツリー形式）、パネル（パネル）、コンボ（ドロップダウンの組み合わせ）を含む部品のクロスブラウザのWebページ完全なセットを作成するために設けられています。これらのコンポーネントを組み合わせることができ、ユーザーはまた、単独でいずれかを使用することができます。

プラグイン一覧

ベース（ベース）

レイアウト（レイアウト）

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

フォーム（フォーム）

窓（ウィンドウ）

データグリッド（データグリッド）と木（ツリー）

ウィジェット

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

プロパティ

これは、jQuery.fn。{プラグイン} .defaultsで定義されています。たとえば、ダイアログの属性がjQuery.fn.dialog.defaultsで定義されています。

イベント

イベント（コールバック関数）がjQuery.fn。{プラグイン} .defaultsで定義されています。

ウェイ

メソッドの呼び出し構文：$（ 'セレクタ'）プラグイン（ 'メソッド'、パラメータ）;.

ここで：

jQueryのセレクタは、オブジェクトセレクタです。
プラグインはプラグイン名です。
既存の方法に合わせてプラグ付方法。
パラメータは、パラメータオブジェクトは、オブジェクト、文字列を指定できますが...

この方法は、jQuery.fnで定義されています。{プラグイン} .methods。 JQとのparam：各メソッドには2つのパラメータがあります。最初のパラメータ 'JQ'は、jQueryオブジェクトへの参照が必要です。二番目のパラメータ 'paramが「渡された実際のメソッドのパラメータを指します。たとえば、次のように、「mymove」アプローチと呼ばれるダイアログコンポーネントメソッドを拡張します：

$ .extend（$。Fn.dialog.methods、{
    mymove：関数（JQ、newposition）{
		リターンjq.each（関数（）{
			$（この）.dialog（ '移動'、newposition）;
		}）;
    }
}）;

今、あなたは指定された場所にダイアログボックス（ダイアログ）を移動するには、 'mymove'メソッドを呼び出すことができます。

$（ '＃D-D'）。ダイアログ（ 'mymove'、{
    左：200、
    トップ：100
}）;

私はjQueryのEasyUIを使用して開始しました

ライブラリをダウンロードして、あなたのページ内の参照EasyUI CSSとJavaScriptファイル。

<リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "easyui /テーマ/デフォルト/ easyui.css">
<リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "easyui /テーマ/ icon.css">
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "easyui / jqueryの-1.7.2.min.js"> </スクリプト>
ます。<script type = "text / javascriptの" SRC = "easyui / jquery.easyui.min.js"> </スクリプト>

あなたはEasyUI必要なファイルを参照すると、タグやJavaScriptの使用を介してEasyUIコンポーネントを定義することができます。例えば、折りたたみ機能付きのトップパネルには、次のようにHTMLコードを記述する必要があります。

<DIV idは= "P"クラス= "easyuiパネル"スタイル= "幅：500pxなど;高さ：200pxの;パディング：10pxの;"
    タイトル= "Myパネル」iconCls> ="アイコン - 保存 "折り畳み式=" true "を
    パネルの内容
</ DIV>

マーキングして、コンポーネントを作成する場合は、「データ・オプション」属性は、バージョン1.3 HTML5互換性のため、プロパティ名をサポートするために使用されます。次のようにだからあなたは上記のコードを書き換えることができます。

<DIV idは= "P"クラス= "easyuiパネル"スタイル= "幅：500pxなど;高さ：200pxの;パディング：10pxの;"
    タイトル= "Myパネル」データ・オプション=" iconCls： 'アイコンを保存」、折り畳み式：真の ">
    パネルの内容
</ DIV>

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

<入力クラス= "easyui-コンボボックス"名前= "言語"
    データ・オプション= "
    URL： 'combobox_data.json」、
    valueField：「ID」、
    テキストフィールド：「テキスト」、
    panelHeight： 'auto'で、
    onSelect：関数（レコード）{
    アラート（record.text）
    } ">

前：jQueryのEasyUIデータグリッドとツリーウィジェット- Treegridツリーグリッド

次へ：jQueryのEasyUIを拡張します

jQuery EasyUI コース

jEasyUI アプリケーション

jEasyUI ドラッグ・アンド・ドロップ

jEasyUI メニューやボタン

jEasyUI レイアウト

jEasyUI データグリッド

jEasyUI 窓

jEasyUI ツリーメニュー

jEasyUI フォーム

jEasyUI リファレンスマニュアル