jQuery の入門 LigerUI Tutorial_jquery

最新のコードを入手します
最新のコードは http://ligerui.googlecode.com からダウンロードできます。

はじめに
jQuery LigerUI は、jQuery に基づく一連の UI コントロールの組み合わせであり、Web フロントエンド インターフェイス ソリューションを迅速に作成することに特化しています。 フロントエンド コントロールであるため、サーバーとは関係がなく、.net、jsp、php などの Web サーバー環境に適しています。現時点では、すべてのプラグインのパッケージ化および圧縮された JS はわずか 100K 程度で、非常に軽量です。プラグイン開発モデルを使用した設計は、「シンプルさ」の原則に基づいており、各プラグインは可能な限り独立しており、拡張時に信頼できます。

LigerUI とは
jQuery LigerUI には、基本、ナビゲーション、レイアウト、フォーム、テーブル、ツリー、ウィンドウなどを含むコントロールが豊富です。

基本: サイズ変更可能、ドラッグ、ヒント

ナビゲーション: メニュー、メニューバー、ツールバー

レイアウト: レイアウト、タブ

フォーム: フォーム、テキストボックス、ボタン、チェックボックス、コンボボックス、日付エディター、ラジオ、スピナー

フォーム：グリッド

ツリー：ツリー

ウィンドウ：ダイアログ、メッセージボックス、ウィンドウ

トップに戻る
使い方
LigerUIはjQueryをベースに設計されていますjQuery 上のプラグインのコレクション。基本的に、各プラグインは比較的独立しています。しかし、それらは互いに密接に関連しており、プラグインを合理的に組み立ててさまざまな複雑な機能を実現できます。 UI を使用すると、使いやすいインターフェイスをすばやく作成できます。

最初の例

コードをコピー コードは次のとおりです:

< ; head>

ligerUI オブジェクトの使用方法
プラグインを適用すると、ligerui オブジェクトが返され、グローバル変数に保存できます。後続の操作で使用される場合があります。変数のスコープ制限等により保存が間に合わない場合他の方法でも入手できます。以下を参照してください:

グローバル JavaScript 変数に保存します:




コードをコピー

コードは次のとおりです: var g; $(function () {

g = $("#txt1").ligerTextBox();

$.fn.ligerGetTextBoxManager を使用します

コードをコピー

コードは次のとおりです: var g = $( "#txt1").ligerGetTextBoxManager (); $.ligerui.get メソッドを使用します

コードをコピーします

コードは次のとおりです。 var g = $.ligerui.get('txt1');
3 番目の方法は、ligerui オブジェクトの ID を使用して直接取得することです。受信パラメータに ID が指定されていない場合、HTML 要素に ID がない場合、オブジェクトの ID は HTML 要素の ID を使用します。 、自動的に生成されます。したがって、ここでは HTML テキスト ボックスの ID を使用して取得できます。
html 要素の ID が指定されていない場合は、1 番目または 2 番目の方法を使用できます。
実際、2 番目のメソッドは最初のメソッドで置き換えることができます。実際、ligerText は繰り返し呼び出すことができます。違いは、2 番目の呼び出しの後に ligerui オブジェクトが直接返されることです。 2 番目の方法は、プラグインが html 要素に適用されているかどうかが不明な場合に使用できます。
他のプラグインの名前は TextBox と似ています。
イベント処理
イベントを処理するには 2 つの方法があります。 1 つはパラメータとして渡す方法、もう 1 つは ligerui オブジェクトのバインド メソッドを呼び出す方法です。

コードをコピー コードは次のとおりです:

//メソッド 1
var g = $( "#txt1").ligerTextBox(
{
onChangeValue : function(value){alert(value);}
}); g.bind ('changeValue', function (value)
{
alert(value);
});


bind メソッドの使用には「on」は含まれません。
イベント リスナーは複数回バインドできます。

一部のイベントでは、関数の戻り値が false の場合、まだトリガーされていない関数は再度実行されません。
2 番目のメソッド (バインド) は、V1.1.3 がコア メカニズムを使用した後に導入されました。 。
メソッド呼び出し
Ligerui インターフェースを使用すると非常に便利です。 ligerui オブジェクトのメソッドを呼び出すだけです。

コードをコピー コードは次のとおりです: //ここで設定したテキスト ボックスは、 edit

g .setDisabled();

//ここで設定したテキストボックスは編集可能です
g.setEnabled();


このメソッドも使用できます

コードをコピーします コードは次のとおりです: $("#grid").ligerGrid('setEnabled) ');

このオブジェクトのメソッドについては、API を確認できます。
オブジェクトのメソッドは拡張可能であり、後でリゲルイ拡張に関する章で紹介します。

2 番目のメソッドは V1.1.4 で追加されました
パラメータ値の取得
すべてのリゲルイ オブジェクトには get メソッドがあります。パラメータ値を取得できます

コードをコピー コードは次のとおりです: var url = g.get(' url');

または:

コードをコピー コードは次のとおりです var url = $("#grid").ligerGrid('option','url');

各リゲルイオブジェクトには set メソッドがあります。パラメータを動的に設定するために使用されます。たとえば、グリッドの URL を変更するには、次のように記述できます:

コードをコピー

コードは次のとおりです。 g .set('url',url);

または:

コードをコピー

コードは次のとおりです: g.set({url:url});

プラグインも使用できます。

コードをコピーします

コードは次のとおりです: $("#grid").ligerGrid ('option','url',url);

2 番目のメソッドでは、複数のパラメーターを同時に渡すことができます。
Set メソッドは、すべてのプラグインのプロパティを設定するための統合インターフェイスです。
Set メソッドは、V1.1.3 がコア メカニズムを使用した後に導入されました。

プラグインがパラメータを渡す方法は V1.1.4 で導入されました
トップに戻る
拡張方法
ここでは 2 つの入り口を定義します: ligerDefaults。および $.ligerMethods。

たとえば、Grid のデフォルト パラメータを変更または拡張したい場合は、$.ligerDefaults.Grid を変更できます。

デフォルト パラメータ拡張
オブジェクトを拡張するだけです。 $.ligerDefaults.{Plugin}

たとえば、テーブルのデフォルトのヘッダー タイトルを変更する場合:




コードをコピーします

コードは次のとおりです:

if($.ligerDefaults.Grid)
{
$.ligerDefaults.Grid.title = "My Form";
}

サポートするには拡張子
の場合は、オブジェクトを拡張するだけです: $.ligerDefaults.{Plugin}String

たとえば、「ロード時」のテーブルを英語に翻訳するには:

コードをコピーします コードは次のとおりです:

if($.ligerDefaults.GridString)
{
$。 ligerDefaults.GridString.loadingMessage = "loading.. .";
}

メソッド拡張
はオブジェクト $.ligerMethos.{Plugin}
ここで Grid ligerui オブジェクトにアラート メソッドを追加します:

コードをコピー コードは次のとおりです:

$.extend($.ligerMethods.Grid,
{
alert : function ()
{
//注意すべき点は、ここでは ligerui オブジェクト
var であることです。 rowdata = this.getSelectedRow();
if (!rowdata)
alert('empty');
else
alert(rowdata.CustomerID); >);

function show()
{
//後でこのように使用できます
Var g = $(“#maingrid”).ligerGrid(); g.alert();
}