jQuery UI CSS Framework_jquery に基づいたウィジェットの開発経験

jQuery UI の 2 つのコア CSS ファイルは、ui.core.css と ui.theme.css です。これら 2 つの CSS スタイルは、jQuery ui ベースのインターフェイス全体で実行され、jQuery ui ThemeRoller を通じて独自のスタイルを生成できます。
.ui-helper-hidden: 要素に display:none を適用します
.ui-helper-hidden-accessible: 要素の絶対位置を非表示に設定します
.ui-helper-clearfix: に適用しますfloats 親要素
をラップする属性。ui-helper-zfix: iframe 要素の適用範囲の問題を修正するのに適しています。
.ui-state-default: 要素
.ui-state- のデフォルトのスタイル。 hover: 要素はホバー状態です。 スタイル
.ui-state-focus: 要素がフォーカス状態にあるときのスタイル
.ui-state-active: 要素がアクティブ状態にあるときのスタイル (通常は によって選択されます)マウス)
.ui-state-hightlight :状態を強調表示する必要があるスタイル
.ui-state-error:要素がエラー状態であるスタイル (通常はエラー情報を記述します)
.ui-state- error-text:エラー テキストを記述するスタイル
。ui-state-disabled: 無効になっている要素のスタイル
.ui-priority-primary: ボタンが必要な場合、第 1 レベルのボタンに適用されます。曽爾とは区別される。太字のフォントが適用されます
.ui-priority-secondary: 前のシナリオに対応して、通常の太さのフォントが適用され、要素
アイコンに対してわずかに透明になります。タイプ: CSS フレームワークは、デフォルトのアイコンのセットを提供します。これらのアイコンは、ほとんどのシナリオに適しています。一般的に使用される方法は、アイコン
.ui-corner-tl を指定するための「ui-icon ui-icon-****」です。左上隅は css3 に基づいて丸くされます。IE は
をサポートしません。ui-corner-tr: 右上隅は css3 に基づいて丸められます。IE は
をサポートしません。ui-corner-bl:左下の角は css3 に基づいて丸くされます。IE は
.ui-corner-br をサポートしません。右下の角は CSS3 に基づいて丸められます。IE は
.ui-corner-top をサポートしません。上の 2 つの角は CSS3 に基づいて丸くされます。IE は
.ui-corner-bottom をサポートしません。 下の 2 つの角は css3 に基づいて丸められます。IE は
.ui-corner-right をサポートしません。 CSS3 に基づいて右 2 つの角が丸くなり、IE は
.ui をサポートしません -corner-left: 左 2 つの角が CSS3 に基づいて丸くなり、IE は
.ui-corner-all をサポートしません: CSS3 に基づいてすべての角が丸くなっています。IE は
.ui-widget-overlay:Mask
.ui-widget-shadow:Shadow
をサポートしていません。jQuery ui ウィジェットを作成するときに、カスタム UI を作成できます。これらのCSSを適切に使用することで、jQuery uiテーマと互換性があります。
jQuery ui はいくつかの基本的なウィジェットを提供しますが、ウィジェットを作成するための優れたメカニズムも提供します。 jQuery CSS フレームワークには、基本的な CSS スタイル (色、フォント サイズ、アイコンなどの視覚的および感覚的) が含まれていますが、UI CSS では、マージン、パディング、位置などのウィジェット構造を構築する CSS を定義する必要があります。 、など。ウィジェットを開発するときは、jquery テーマ ローラーを上手に活用してスタイルを適用し、全体の一貫性を維持できるように、この原則に従うようにしてください。 前回の記事では、jquery css フレームワークについて簡単に紹介しました。以下に、jquery ui の開発ガイドラインを簡単に紹介します。
Jquery の公式ドキュメントにはこれが非常に明確に書かれています。一般に、jquery ui は jquery.ui.widget.js ファイルを継承します。このファイルは、ウィジェット オブジェクトを作成するためのファクトリ メソッドを提供します。メソッドは $.widget(String name, Options prototype) です。次に、このクラスが提供するメソッドとプロパティを簡単に紹介します。これらはウィジェットの作成時に上書きされます。
destroy(): dom オブジェクトからウィジェット インスタンスを削除します。このメソッドは通常、ウィジェットを開発するときに必要です。 dom 要素
オプションに追加したスタイル、動作、および dom 構造を削除します。ここに保存されるのは、ウィジェットの構成情報です。ウィジェットを作成するときに、いくつかの構成パラメーターを設定する必要があります。
要素: ウィジェットが動作する DOM オブジェクトです。
enable() と disable(): これら 2 つのメソッドは、ウィジェットを無効化および有効化します。実際には、options.disabled を変更することです。
ウィジェットの作成時にオーバーライドする必要があるプライベート メソッドも 2 つあります。ウィジェットでは、すべてのプライベート メソッドの先頭に「_」が付きます。
_create(): このメソッドは、ウィジェットを作成するメソッドです。ページがウィジェットを呼び出すと、このメソッドが実行されてウィジェットが構築されます。ウィジェットの動作と構造のほとんどはここで作成されます。
_init(): このメソッドは、ほとんどの場合、ウィジェットの構築時に _create の後に実行されます。
関連ドキュメントより:
_create(): このメソッドはウィジェットの構築時に実行され、_init() メソッドはウィジェットの構築および再初期化時に実行されます。 destroy メソッドは、ウィジェットが削除されるときに実行されます。
_setOption(): このメソッドは、オプションの属性の設定を提供します。一般に、オプションのパラメーターに特別な処理 (検証、型変換、属性設定時の操作のトリガーなど) が必要ない場合、このメソッドは次のことを行う必要があります。上書きされます。
次のコードは、_create() メソッドと _init() メソッドの違いを示しています。