jQueryをベースにしたJavaScript UIデザイン-jsチュートリアル-php.cn

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 要素をドラッグできます。使用されるコードは次のとおりです:

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

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

上記のコードは、ページ内の 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 番目 (受け入れられる要素)、コード:

人気のチュートリアル

詳細>