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() メソッドの違いを示しています。

コードをコピー コード以下:

$(function(){
// _create() と _init() は初めて呼び出されたときに実行されます
$("div").mywidget();
/ / ウィジェットは div 上でインスタンス化されています。この時点では _init() メソッドのみが実行されます。
$("div").mywidget();
// ウィジェットを破棄します
$(" div" ).mywidget("destroy");
// ウィジェットは破棄されているため、この時点で _create() メソッドと _init() メソッドの両方が実行されます
$("div").mywidget ();
});

Event
カスタム イベントがある場合、それを処理するためにウィジェットによってカプセル化されたメソッド _trigger() を使用できます。 is this._trigger( type,event,data)、最初のパラメータは時間タイプ、2 番目のパラメータはイベント オブジェクト、3 番目のパラメータはイベントに渡されるパラメータです。

次に、簡単な jquery ui ウィジェット コードを使用して、ウィジェットの開発方法を説明します。

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

//このウィジェットはテキストボックスを変更します。 CSS 自体はありませんが、jquery ui css フレームワークのスタイルを使用します
(function($){
//UI のデフォルトは jquery の ui プレフィックスで、その後にウィジェット名が続きます
$.widget(" ui.textboxdecorator", {
//このウィジェットにはオプションがありません
options:{
},
_init: function(){
//それが要素であるかどうかを確認します装飾する必要があります
if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) {
return;
}
if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr( "type").toLowerCase() === "パスワード")) {
if (this.element.attr("tagName").toLowerCase() === "input")
return }
//this .element はこのウィジェットを呼び出す要素です
var e = this.element;
//ui-widget ウィジェットの基本スタイル、ui-state-default、デフォルトstate スタイル; ui-corner-all 角が丸い (css3 に基づいており、IE では機能しません)
this.element.addClass("ui-widget ui-state-default ui-corner-all"); >//ホバー効果とアクティブ効果を追加します
this.element.mouseover(function(){
e.addClass("ui-state-hover");
}).mouseout(function(){
e.removeClass("ui-state-hover");
}).mousedown(function(){
e.addClass("ui-state-active");
})。 Mouseup(function(){
e.removeClass ("ui-state-active");
});
},
// 破棄されると、ウィジェットによって追加されたスタイルを削除します
destroy:function(){
this.element .removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active");
})
})(jQuery)


このウィジェットを使用する場合、jquery、jquery.ui.core.js、jquery.ui.widget.js ファイル、および css ファイルを参照する必要がありますjquery.ui.core.css と jquery.ui.theme が必要です。 2 つの .css ファイル
は、このウィジェットを呼び出すときに $("***") を使用します。