jQueryをベースにしたJavaScript UIデザイン

jQuery UI は、jQuery に基づいたオープンソースの JavaScript Web ユーザー インターフェイス コード ライブラリで、jquery で使用するために jquery によって正式にリリースされたユーザー インターフェイス コンポーネントのコレクションです。インターフェース操作機能を多数搭載。

jQuery UI であっても、jQuery の EasyUI フレームワークであっても、Web ページの構築を簡単にするために役立ちます。

jQuery UI または easyui は、jQuery に基づくユーザー インターフェイス プラグインのコレクションです。

jQuery UI または easyui を使用すると、多くの JavaScript コードを記述する必要はありません。通常は、HTML マークアップを記述してユーザー インターフェイスを定義します。

jQuery UI または easyui は簡単でありながら強力です。

jQuery UI または easyui を使用する場合、いくつかの js および css ファイルをページに追加する必要があります。もちろん、必要な css を定義することもできます。

jQuery UI と easyui は、異なるバージョンでパッケージ化され書かれているため、使用する際にブラウザーの互換性を考慮する必要がなく、作成についてもほとんど心配する必要がありません。ページを作成するときに異なるブラウザ間で互換性がないという一般的な問題は、直接使用できます。これは真の「使用原則」です。

jQuery UIとeasyuiで提供されているプラ​​グインは機能が異なります。

jQuery UI によって提供される関数には、インタラクション、ウィジェット、エフェクトなどの 3 つの主要なカテゴリがあります。

Interactions には、選択できる Draggable、Droppable、Resizable、Selectable、Sortable の関数が含まれます。

Widgets クラスには、Accordion、Datepicker、Dialog、Progressbar、Slider、Tabs などのさまざまな関数が含まれます。

Effects クラスには、クラスの追加、クラスの削除、アニメーション、エフェクト、表示、クラスの切り替え、切り替え、クラスの切り替えなどの機能が含まれています。

各機能には異なる属性と異なる効果があります。各機能の使用方法については後ほど詳しく説明します。

そして easyui には合計 7 つのカテゴリが含まれています。

最初のカテゴリは Base で、これには EasyLoader、Draggable、Droppable、Resizable の 4 つの側面が含まれます。

2 番目のカテゴリはレイアウトで、パネル、タブ、アコーディオン、レイアウトの 4 つの側面が含まれます。

3 番目のカテゴリはメニューとボタンです。ここには、ボタン作成の 4 つの効果 (メニュー、リンク ボタン、メニュー ボタン、分割ボタン) が含まれています。

4 番目のカテゴリはフォームで、Form、ComboBox、ComboTree、NumberBox、ValidateBox、DateBox、Calendar が含まれます。

5 番目のカテゴリはウィンドウで、ウィンドウ、ダイアログ、メッセージが含まれます。

6 番目のカテゴリは、ページネーション、DataGrid、ツリーを含む DataGrid と Tree です。

まずはjQuery UIの各機能の具体的な使い方を見ていきましょう。

インタラクションのドラッグ可能から始めます。

"EN-US">Draggable にはさまざまな効果があります。指定するメソッドのさまざまなパラメーターによってさまざまな効果を実現できます。これらの 3 つの JS ファイルは ui.draggable です。 .js。これが提供するメソッドは draggable() であり、さまざまなパラメータを与えることでさまざまな効果を実現できます。

まず、最初の効果 (デフォルトの機能) を見てみましょう。表示されている範囲内で、ページ上で DOM 要素をドラッグできます。使用されるコードは次のとおりです:

2 番目の効果 (イベント) を見てみましょう:

$(function() -start'), $drag_counter = $('#event-drag') 、$ stop_counter = $（ '＃event-stop'）; "#draggable"）

updateCounterStatus($start_counter,counts[0]);

},

ドラッグ: function() {

counts[1]++;

updateCounterStatus( $drag_counter,counts[1]);

},

stop: function() {

counts[2]++;

updateCounterStatus($stop_counter,counts[2]);

}

});

});

function updateCounterStatus( $event_counter,new_count) {

// まずステータスを視覚的に更新します...

if (!$event_counter.hasClass('ui-state-hover')) {

$event_counter.addClass('ui-state- hover')

.siblings().removeClass('ui-state-hover');

}

// ...その後、数値を更新します

$('span.count',$event_counter).text (new_count);

}

この段代码比の前の代価要复杂、その結果の効果もさらに多く、次のDOMと你を計算できます共動

ドラッグ可能なメソッド内で追加される 1 つの数値セットによって、開始時と終了時の回数、および一度の移動の距離が保存されます。

$(function() {

$("#draggable").draggable({ axis: 'y' });

$("#draggable2 ").draggable({ axis: 'x' });

$("#draggable3").draggable({ containment: '#containment-wrapper',scroll: false });

;

パラメータが異なると、異なる効果が得られます。最初のメソッド呼び出しでは DOM は上下のみに移動できます。2 番目のメソッド呼び出しでは DOM は左右にのみ移動できます。3 番目のメソッド呼び出しでは DOM は指定されたボックス内でのみ移動できます。4 番目のメソッド呼び出しでは DOM が指定されたボックス内でのみ移動できます。 DOM は、指定されたボックス内でのみ移動できます。ボックスの外へは移動できます。5 番目のメソッド呼び出しでは、DOM は親ノード内でのみ移動できます。

4番目の効果（遅延開始）、コード：

20}）;

;それ以外の場合はドラッグできません。遅延は遅延です。つまり、ドラッグできるようになるまで 1000 ミリ秒待つ必要があります。 fifth 5番目の効果（要素またはグリッドへのスナップ） {グリッド：[80、80]}）;

}）; 、ただし、内部には影響しません。4 番目のパラメータは、DOM を 20,20 にのみ移動できます。5 番目のパラメータと 4 番目のパラメータは同じですが、与えられるデータは異なります。

6番目の効果(自動スクロール)

上記のコードは、ページ内の ul 要素と li 要素がドラッグ中に並べ替え可能に見えるようにします。

2 番目の紹介は、「EN-US」> ドロップ可能です。これには 6 つのエフェクトが含まれており、「EN-US」> jquery-1.3.2.js、「EN-US」>> の使用が必要です。 ui.core.js、"EN-US">ui.droppable.js、"EN-US">ui.draggable.js は 4 つの js ファイルです。 hive最初のもの（デフォルト機能）最初のものを見てみましょう。

$（ "＃draggable" -highlight '）。find（' p '）。html（' dropped！ '）;とクラス効果が追加されます。

2 番目 (受け入れられる要素)、コード:

。ドラッ​​グ可能(); クラス: 'ui-state-hover',

アクティブ」、

}); ) メソッドを使用し、hoverCalss を与えることで、指定した DOM にドラッグしてフローティングすると効果が発生し、マウスを放すと再び効果が発生します。 3番目（伝播を防ぐ）、コード：

＆lt;スクリプトタイプ= "text/javascript"＆gt;

hoverclass： 'ui-state-active'、

イベント、ui）{

$(this).addClass('ui-state-highlight').find('> p').html('ドロップ!'); });

$("#droppable2, #droppable2 -inner").droppable({

greedy：true、; ui-state-highlight '）。次に、2 番目の大きな DOM と 3 番目の DOM の両方で、droppable() メソッドを呼び出します。違いは、2 番目のメソッドは、drop を呼び出すときに false を返し、3 番目の DOM は最初にgreedy:true を返すことです。それぞれ、最初の DIV が同じレベルの 2 番目の DIV にドラッグされた場合、同じレベルの DIV にドラッグされた場合は、内側の DIV にドラッグされた場合は外側の DIV のみが影響することを示します。 DIV の場合、同じレベルの外側の DIV を含む DIV 全体が効果を持ちます。つまり、3 番目の関数が呼び出された後、DIV のどのレイヤーにドラッグした DIV のみが効果を生成します。 $ ("#droppable").droppable({

$(this).addClass('ui-state-highlight') .find('p').html('Dropped!');

ggable2").draggable();

$("#droppable2").Droppable ({

Accept: "#Draggable2",

ActiveClass: 'UI-State-Hover',

Drop: Function (Event, UI) {

$ (this) .addClass ('UI-STATE-HIG Hlight ').find('p').html('Dropped!');

これにより、DOM が 2 つ作成されます。他の 2 つの対応する DOM をドラッグします。今回は、2 つの対応する DOM がそれぞれ hoverCalss と activeClass を呼び出して、異なる効果を生成します。マウスで DOM をドラッグしてその上にフロートさせると、それらはすべて異なる動作をします。

5 番目 (ドラッグ可能な位置を元に戻す) コード: