JqueryUI-ウィジェットファクトリ

以前、jQueryでカスタムコントロールを記述する唯一の方法は、_ $。fn_名前空間を拡張することでした。これは、単純なウィジェットに適しています。よりステートフルなウィジェットを作成すると、すぐに面倒になります。ウィジェットの構築プロセスを支援するために、ウィジェットファクトリがjQuery UIに導入されました。これにより、ウィジェットの管理に一般的に関連付けられているボイラープレートのほとんどが削除されます。

jQueryUI Widget Factoryは、文字列名とオブジェクトを引数として受け取り、その機能をカプセル化するjQueryプラグインと「クラス」を作成する単なる関数（$ .widget）です。

構文

以下はjQueryUIウィジェットファクトリメソッドの構文です-

jQuery.widget( name [, base ], prototype )

*name* -作成するウィジェットの_namespace_と_widget name_（ドットで区切られた）を含む文字列です。

*base* -継承元のベースウィジェット。 これは、 `new`キーワードでインスタンス化できるコンストラクターでなければなりません。 デフォルトは_jQuery.Widget_です。

*prototype* -継承元のウィジェットのプロトタイプとして使用するオブジェクト。 たとえば、jQuery UIには、他のインタラクションプラグインのベースとなる「マウス」プラグインがあります。 これを実現するために、_ドラッグ可能、ドロップ可能、などなど すべては、次のようなマウスプラグインから継承します。jQuery.widget（ "ui.draggable"、$ .ui.mouse、\ {...}）;この引数を指定しない場合、ウィジェットは「ベースウィジェット」jQuery.Widgetから直接継承します（小文字の「w」jQuery.widgetと大文字の「W」jQuery.Widgetの違いに注意してください）。

基本ウィジェット

ベースウィジェットは、ウィジェットファクトリで使用されるウィジェットです。

オプション

次の表は、ベースウィジェットで使用できるさまざまな_options_を示しています-

Sr.No. Option & Description

1

disabledhide

このオプションは、_true_に設定されている場合、ウィジェットを無効にします。デフォルトでは、その値は false です。

オプション-無効化非表示

このオプションは、_true_に設定されている場合、ウィジェットを無効にします。デフォルトでは、その値は false です。

例

$( ".selector" ).widget({ disabled: true });

2

hide

このオプションは、要素の非表示をアニメーション化する方法を決定します。デフォルトでは、その値は null です。

オプション-非表示

このオプションは、要素の非表示をアニメーション化する方法を決定します。デフォルトでは、その値は null です。

これはタイプにすることができます-

ブール-_false_に設定されている場合、アニメーションは使用されません。 _true_に設定されている場合、要素はデフォルトの持続時間とデフォルトのイージングでフェードアウトします。
Number -要素は、指定された期間とデフォルトのイージングでフェードアウトします。
String -要素は指定された効果を使用して非表示になります。
オブジェクト-値がオブジェクトの場合、effect、delay、duration、、および_easing_プロパティが提供されます。

例

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });

3

show

このオプションは、要素の表示をアニメーション化する方法を決定します。デフォルトでは、その値は null です。

オプション-表示

このオプションは、要素の表示をアニメーション化する方法を決定します。デフォルトでは、その値は null です。

これはタイプにすることができます-

ブール-_false_に設定されている場合、要素を表示するためにアニメーションは使用されません。 _true_に設定されている場合、要素はデフォルトの持続時間とデフォルトのイージングでフェードインします。
Number -要素は、指定された期間とデフォルトのイージングでフェードインします。
String -要素は指定された効果を使用して表示されます。
オブジェクト-値がオブジェクトの場合、effect、delay、duration、、および_easing_プロパティが提供されます。

例

$( ".selector" ).widget({ show: { effect: "explode", duration: 1000 } });

方法

次の表は、ベースウィジェットで使用できるさまざまな_methods_の一覧です-


_create: function() {
   this.element.css( "background-color", this.options.color );
}
this._delay( this._foo, 100 );
_destroy: function() {
   this.element.removeClass( "my-widget" );
}
_create: function() {
   this._focusable( this.element.find( ".my-items" ) );
}
_getCreateEventData: function() {
   return this.options;
}
_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}
this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});
this._hoverable( this.element.find( "div" ) );
_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}
this._off( this.element, "click" );
this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});
_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}
_setOptions: function( options ) {
   var that = this,
   resize = false;
   $.each( options, function( key, value ) {
      that._setOption( key, value );
      if ( key === "height"

_this._show( this.element, this.options.show, function() {
  //Focus the element when it's fully visible.
   this.focus();
}
_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}
_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}
this._on( this.element, {
   keydown: function( event ) {
     //Pass the original event so that the custom search event has
     //useful information, such as keyCode
      this._trigger( "search", event, {
        //Pass additional information unique to this event
         value: this.element.val()
      });
   }
});
this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});
this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});
this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});
this.option( "width" );
var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}
this.option( "width", 500 );
this.option({
   width: 500,
   height: 500
});
_create: function() {
   this.widget().css( "border", "2px solid red" );
}

イベント

Sr.No.	Event Method & Description
1	create( event, ui ) このイベントは、ウィジェットが作成されるとトリガーされます。イベント-create（event、ui）このイベントは、ウィジェットが作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).widget({ create: function( event, ui ) {} });`

jQueryUIウィジェットファクトリライフサイクル

jQueryUIウィジェットファクトリは、ウィジェットのライフサイクルを管理するオブジェクト指向の方法を提供します。これらのライフサイクルアクティビティには以下が含まれます-

ウィジェットの作成と破棄：たとえば、

$( "#elem" ).progressbar();

ウィジェットオプションの変更：たとえば

$( "#elem" ).progressbar({ value: 20 });

サブクラス化されたウィジェットで「スーパー」コールを行う：たとえば

$( "#elem" ).progressbar( "value" );
or
$( "#elem" ).progressbar( "value", 40 );

イベント通知：例えば

$( "#elem" ).bind( "progressbarchange", function() {
   alert( "The value has changed!" );
});

例

次の例でカスタムウィジェットを作成しましょう。ボタンウィジェットを作成します。次の例では、ウィジェットでオプション、メソッド、イベントを作成する方法を説明します-

カスタムウィジェットの作成

最初に簡単なカスタムウィジェットを作成しましょう。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() {
                  this._button = $("<button>");
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width)
                  this._button.css("background-color", this.options.color);
                  this._button.css("position", "absolute");
                  this._button.css("left", "100px");
                  $(this.element).append(this._button);
               },
            });
            $("#button1").myButton();
         });
      </script>
   </head>

   <body>
      <div id = "button1"></div>
   </body>
</html>

上記のコードをHTMLファイル widgetfactoryexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も表示されるはずです-

カスタムウィジェットへのオプションの追加

前の例では、create_関数を使用してカスタムコントロールを作成しました。ただし、ユーザーは通常、オプションを設定および変更してコントロールをカスタマイズしたいと考えています。定義したすべてのオプションのデフォルト値を保存するオプションオブジェクトを定義できます。setOption_関数はこの目的に使用されます。ユーザーが設定する個々のオプションごとに呼び出されます。ここでは、ボタンの_width_と_background-color_を設定しています。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() {
                  this._button = $("<button>");
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width)
                  this._button.css("background-color", this.options.color);
                  this._button.css("position", "absolute");
                  this._button.css("left", "100px");
                  $(this.element).append(this._button);
               },
               _setOption: function(key, value) {
                  switch (key) {
                     case "width":
                     this._button.width(value);
                     break;
                     case "color":
                     this._button.css("background-color",value);
                     break;
                  }
               },
            });
            $("#button2").myButton();
            $("#button2").myButton("option", {width:100,color:"#cedc98"});
         });
      </script>
   </head>

   <body>
      <div id = "button2"></div>
   </body>
</html>

上記のコードをHTMLファイル widgetfactoryexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も表示されるはずです-

カスタムウィジェットへのメソッドの追加

次の例では、ユーザーが使用できるメソッドを追加します。これらのメソッドはフレームワークに非常に簡単に構築できます。ボタンを指定された水平距離だけ移動するMoveメソッドを記述します。これを機能させるには、__ create_関数で位置と左のプロパティを設定する必要もあります-

this._button.css("position", "absolute");
this._button.css("left", "100px");

これに続いて、ユーザーは通常のjQuery UIの方法でメソッドを呼び出すことができます-

this._button.css("position", "absolute");
this._button.css("left", "100px");

$("button3").myButton("move", 200);

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() {
                  this._button = $("<button>");
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width)
                  this._button.css("background-color", this.options.color);
                  this._button.css("position", "absolute");
                  this._button.css("left", "100px");
                  $(this.element).append(this._button);
               },

               move: function(dx) {
                  var x = dx + parseInt(this._button.css("left"));
                  this._button.css("left", x);
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button3").myButton();
            $("#button3").myButton("move", 200);
         });
      </script>
   </head>

   <body>
      <div id = "button3"></div>
   </body>
</html>

上記のコードをHTMLファイル widgetfactoryexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も表示されるはずです-

カスタムウィジェットへのイベントの追加

この例では、イベントを作成する方法を示します。イベントを作成するには、_triggerメソッドを使用するだけです。最初のパラメーターはイベントの名前、2番目は渡す標準イベントオブジェクト、3番目は渡すカスタムイベントオブジェクトです。

ここでは、ボタンがx = 400を超えて移動したときにイベントを発生させています。あなたがしなければならないのは、移動機能に追加することです-

if(x<400) { this._trigger("outbounds",{}, {position:x}); }

この場合、イベントはアウトバウンドと呼ばれ、空のイベントオブジェクトは、唯一のプロパティとして位置を提供するカスタムイベントオブジェクトと共に渡されます。

移動機能全体は-

move: function(dx) {
   var x = dx + parseInt(this._button.css("left"));
   this._button.css("left", x);
   if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}

ユーザーは、同じ名前のオプションを定義するだけで、イベント処理機能を設定できます。

$("button4").myButton("option", {
   width: 100,
   color: "red",
   outbounds:function(e,ui) {
      alert(ui.position);}
});

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() {
                  this._button = $("<button>");
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width)
                  this._button.css("background-color", this.options.color);
                  this._button.css("position", "absolute");
                  this._button.css("left", "100px");
                  $(this.element).append(this._button);
               },
               move: function(dx) {
                  var x = dx + parseInt(this._button.css("left"));
                  this._button.css("left", x);
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button4").myButton();
            $("#button4").on("mybuttonoutbounds", function(e, ui) {
               alert("out");
            });
            $("#button4").myButton("move", 500);
         });
      </script>
   </head>

   <body>
      <div id = "button4"></div>
   </body>
</html>

上記のコードをHTMLファイル widgetfactoryexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、警告ボックスが開きます。

Sr.No.	Action & Description
1	_create() このメソッドは、ウィジェットのコンストラクターです。パラメーターはありませんが、_this.element_と_this.options_は既に設定されています。アクション-_create（）このアクションは、要素のアコーディオン機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは、ウィジェットのコンストラクターです。パラメーターはありませんが、_this.element_と_this.options_は既に設定されています。例 `_create: function() { this.element.css( "background-color", this.options.color ); }`
2	_delay( fn [, delay )] このメソッドは、指定された遅延後に提供された関数を呼び出します。 _clearTimeout（）_で使用するタイムアウトIDを返します。アクション-_delay（fn [、delay]）このメソッドは、指定された遅延後に提供された関数を呼び出します。 _clearTimeout（）_で使用するタイムアウトIDを返します。例 `this._delay( this._foo, 100 );`
3	_destroy() public link：/jqueryui/jqueryui_widgetfactory＃action_publicdestroy [destroy（）]メソッドは、すべての一般的なデータ、イベントなどをクリーンアップします。カスタムのウィジェット固有のクリーンアップのために、この__destroy（）_メソッドに委任します。アクション-_destroy（） public link：/jqueryui/jqueryui_widgetfactory＃action_publicdestroy [destroy（）]メソッドは、すべての一般的なデータ、イベントなどをクリーンアップします。カスタムのウィジェット固有のクリーンアップのために、この__destroy（）_メソッドに委任します。例 `_destroy: function() { this.element.removeClass( "my-widget" ); }`
4	_focusable( element ) このメソッドは、_ui-state-focus_クラスをフォーカスに適用する要素を設定します。イベントハンドラは、破棄時に自動的にクリーンアップされます。アクション-_focusable（element）このメソッドは、_ui-state-focus_クラスをフォーカスに適用する要素を設定します。イベントハンドラは、破棄時に自動的にクリーンアップされます。例 `_create: function() { this._focusable( this.element.find( ".my-items" ) ); }`
5	_getCreateEventData() すべてのウィジェットが_create_イベントをトリガーします。デフォルトでは、イベントでデータは提供されませんが、このメソッドは、作成イベントのデータとして渡されるオブジェクトを返すことができます。アクション-_getCreateEventData（）すべてのウィジェットが_create_イベントをトリガーします。デフォルトでは、イベントでデータは提供されませんが、このメソッドは、作成イベントのデータとして渡されるオブジェクトを返すことができます。例 `_getCreateEventData: function() { return this.options; }`
6	_getCreateOptions() このメソッドにより、ウィジェットはインスタンス化中にオプションを定義するためのカスタムメソッドを定義できます。ユーザーが指定したオプションは、このメソッドによって返されるオプションをオーバーライドし、デフォルトのオプションをオーバーライドします。アクション-_getCreateOptions（）このメソッドにより、ウィジェットはインスタンス化中にオプションを定義するためのカスタムメソッドを定義できます。ユーザーが指定したオプションは、このメソッドによって返されるオプションをオーバーライドし、デフォルトのオプションをオーバーライドします。例 `_getCreateOptions: function() { return { id: this.element.attr( "id" ) }; }`
7	_hide( element, option [, callback )] このメソッドは、組み込みのアニメーションメソッドまたはカスタムエフェクトを使用して、要素をすぐに非表示にします。可能なオプション値については、hideオプションを参照してください。アクション-_hide（要素、オプション[、コールバック]）このメソッドは、組み込みのアニメーションメソッドまたはカスタムエフェクトを使用して、要素をすぐに非表示にします。可能なオプション値については、hideオプションを参照してください。例 `this._hide( this.element, this.options.hide, function() { $( this ).remove(); });`
8	_hoverable( element ) このメソッドは、ホバー時にui-state-hoverクラスを適用する要素を設定します。イベントハンドラは、破棄時に自動的にクリーンアップされます。アクション-_hoverable（element）このメソッドは、ホバー時にui-state-hoverクラスを適用する要素を設定します。イベントハンドラは、破棄時に自動的にクリーンアップされます。例 `this._hoverable( this.element.find( "div" ) );`
9	_init() プラグインが引数なしで、またはオプションハッシュのみで呼び出されるたびに、ウィジェットは初期化されます。これには、ウィジェットが作成されたときが含まれます。アクション-_init（）プラグインが引数なしで、またはオプションハッシュのみで呼び出されるたびに、ウィジェットは初期化されます。これには、ウィジェットが作成されたときが含まれます。例 `_init: function() { if ( this.options.autoOpen ) { this.open(); } }`
10	_off( element, eventName ) このメソッドは、指定された要素からイベントハンドラーのバインドを解除します。アクション-_off（element、eventName）このメソッドは、指定された要素からイベントハンドラーのバインドを解除します。例 `this._off( this.element, "click" );`
11	_on( [suppressDisabledCheck [, element ], handlers )] 指定された要素にイベントハンドラーをバインドします。委任は、「click .foo」などのイベント名内のセレクターを介してサポートされます。アクション-_on（[suppressDisabledCheck] [、element]、handlers）指定された要素にイベントハンドラーをバインドします。委任は、「click .foo」などのイベント名内のセレクターを介してサポートされます。例 `this._on( this.element, { "click a": function( event ) { event.preventDefault(); } });`
12	_setOption( key, value ) このメソッドは、個々のオプションごとにlink：/jqueryui/jqueryui_widgetfactory＃setOptions [_setOptions（）]メソッドから呼び出されます。ウィジェットの状態は、変更に基づいて更新する必要があります。アクション-_setOption（key、value）このメソッドは、個々のオプションごとにlink：/jqueryui/jqueryui_widgetfactory＃setOptions [_setOptions（）]メソッドから呼び出されます。ウィジェットの状態は、変更に基づいて更新する必要があります。例 `_setOption: function( key, value ) { if ( key === "width" ) { this.element.width( value ); } if ( key === "height" ) { this.element.height( value ); } this._super( key, value ); }`
13	_setOptions( options ) このメソッドは、option（）メソッドが呼び出された形式に関係なく、option（）メソッドが呼び出されるたびに呼び出されます。アクション-_setOptions（options）このメソッドは、option（）メソッドが呼び出された形式に関係なく、option（）メソッドが呼び出されるたびに呼び出されます。例 `_setOptions: function( options ) { var that = this, resize = false; $.each( options, function( key, value ) { that._setOption( key, value ); if ( key === "height"`
	key === "width" ) { resize = true; } }); if ( resize ) { this.resize(); } } ----
14	_show( element, option [, callback )] 組み込みのアニメーションメソッドまたはカスタムエフェクトを使用して、要素をすぐに表示します。可能なオプション値については、showオプションを参照してください。アクション-_show（要素、オプション[、コールバック]）組み込みのアニメーションメソッドまたはカスタムエフェクトを使用して、要素をすぐに表示します。可能なオプション値については、showオプションを参照してください。例 `_this._show( this.element, this.options.show, function() { //Focus the element when it's fully visible. this.focus(); }`
15	_super( [arg [, … ] )] このメソッドは、指定された引数を使用して、親ウィジェットから同じ名前のメソッドを呼び出します。基本的に.call（）。アクション-_super（[arg] [、… ] ) このメソッドは、指定された引数を使用して、親ウィジェットから同じ名前のメソッドを呼び出します。基本的に.call（）。例 `_setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._super( key, value ); }`
16	_superApply( arguments ) 引数の配列を使用して、親ウィジェットから同じ名前のメソッドを呼び出します。アクション-_superApply（arguments）引数の配列を使用して、親ウィジェットから同じ名前のメソッドを呼び出します。例 `_setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._superApply( arguments ); }`
17	_trigger( type [, event [, data ] )] このメソッドは、イベントとそれに関連するコールバックをトリガーします。 typeと同じ名前のオプションがコールバックとして呼び出されます。アクション-_trigger（type [、event] [、data]）このメソッドは、イベントとそれに関連するコールバックをトリガーします。 typeと同じ名前のオプションがコールバックとして呼び出されます。例 `this._on( this.element, { keydown: function( event ) { //Pass the original event so that the custom search event has //useful information, such as keyCode this._trigger( "search", event, { //Pass additional information unique to this event value: this.element.val() }); } });`
18	destroy() このメソッドは、ウィジェットの機能を完全に削除します。これにより、要素は初期化前の状態に戻ります。アクション-destroy（）このメソッドは、ウィジェットの機能を完全に削除します。これにより、要素は初期化前の状態に戻ります。例 `this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.destroy(); } });`
19	disable() このメソッドは、ウィジェットを無効にします。アクション-disable（）このメソッドは、ウィジェットを無効にします。例 `this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.disable(); } });`
20	enable() このメソッドは、ウィジェットを有効にします。アクション-enable（）このメソッドは、ウィジェットを有効にします。例 `this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.enable(); } });`
21	option( optionName ) このメソッドは、指定された_optionName_に現在関連付けられている値を取得します。アクション-option（optionName）このメソッドは、指定された_optionName_に現在関連付けられている値を取得します。例 `this.option( "width" );`
22	option() このメソッドは、現在のウィジェットオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-option（）このメソッドは、現在のウィジェットオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。例 `var options = this.option(); for ( var key in options ) { console.log( key, options[ key ] ); }`
23	option( optionName, value ) このメソッドは、指定されたoptionNameに関連付けられたウィジェットオプションの値を設定します。アクション-option（optionName、value）このメソッドは、指定されたoptionNameに関連付けられたウィジェットオプションの値を設定します。例 `this.option( "width", 500 );`
24	option( options ) このメソッドは、ウィジェットの1つ以上のオプションを設定します。アクション-オプション（オプション）このメソッドは、ウィジェットの1つ以上のオプションを設定します。例 `this.option({ width: 500, height: 500 });`
25	widget() このメソッドは、元の要素または他の関連する生成された要素を含むjQueryオブジェクトを返します。アクション-ウィジェット（）このメソッドは、元の要素または他の関連する生成された要素を含むjQueryオブジェクトを返します。例 `_create: function() { this.widget().css( "border", "2px solid red" ); }`

Jqueryui-widgetfactory

JqueryUI-ウィジェットファクトリ

構文

基本ウィジェット

オプション

方法

イベント

jQueryUIウィジェットファクトリライフサイクル

例

カスタムウィジェットの作成

カスタムウィジェットへのオプションの追加

カスタムウィジェットへのメソッドの追加

カスタムウィジェットへのイベントの追加

目次