jQuery の入門 LigerUI Tutorial_jquery-jsチュートリアル-php.cn

jQuery の入門 LigerUI Tutorial_jquery

WBOY

リリース： 2016-05-16 17:56:58

オリジナル

1289 人が閲覧しました

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

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

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

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

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

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

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

フォーム：グリッド

ツリー：ツリー

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

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

最初の例

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

< ; head>

>

パラメータとメソッドの設定の詳細については、API を参照してください: http://www.ligerui.com/api/

上記は TextBox の使用例です。他のプラグインも同様の方法で使用されます。

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(); 
} 