JqueryUI-概要

JqueryUIは、jQuery JavaScriptライブラリの上に構築された強力なJavascriptライブラリです。 UIはユーザーインターフェイスの略で、jQueryコアライブラリに新しい機能を追加するjQueryのプラグインのセットです。

JqueryUIのプラグインのセットには、jQuery JavaScriptライブラリの上に構築されたインターフェイスインタラクション、エフェクト、アニメーション、ウィジェット、テーマが含まれます。

2007年9月にリリースされ、jquery.comのJohn Resigによるブログ投稿で発表されました。最新のリリース1.10.4には、jQuery 1.6以降のバージョンが必要です。 jQuery UIは無料のオープンソースソフトウェアであり、MITライセンスの下でライセンスされています。

特徴

JqueryUIは、相互作用、ウィジェット、効果、ユーティリティの4つのグループに分類されます。これらについては、後続の章で詳しく説明します。ライブラリの構造は、以下の画像に示すとおりです-

Jquery UI Cartegory

Interactions -ドラッグ、ドロップ、サイズ変更などのインタラクティブなプラグインで、ユーザーがDOM要素と対話できるようにします。
ウィジェット-jQueryプラグインであるウィジェットを使用して、accordian、datepickerなどのユーザーインターフェイス要素を作成できます。
効果-これらは、内部jQuery効果に基づいています。 DOM要素のカスタムアニメーションとトランジションの完全なスイートが含まれています。
ユーティリティ-これらは、JqueryUIライブラリが内部的に使用するモジュール式ツールのセットです。

JqueryUIの利点

以下は、Jquery UIの利点の一部です-

凝集性と一貫性のあるAPI。
包括的なブラウザのサポート。
オープンソースで自由に使用できます。
良いドキュメント
強力なテーマメカニズム。
安定しており、メンテナンスが容易です。

JqueryUI-環境設定

この章では、JqueryUIライブラリのダウンロードとセットアップについて説明します。また、ディレクトリ構造とその内容についても簡単に学習します。 JqueryUIライブラリは、Webページで2つの方法で使用することができます-

link：/jqueryui/jqueryui_environment_setup＃download_officialwebsite [公式WebサイトからのUIライブラリのダウンロード]
リンク：/jqueryui/jqueryui_environment_setup＃download_cdn [CDNからのUIライブラリのダウンロード]

[download_officialwebsite]#

公式WebサイトからUIライブラリをダウンロードする

あなたがリンクhttps://jqueryui.com/[http://jqueryui.com/]を開くと、JqueryUIライブラリをダウンロードする3つのオプションがあることがわかります-

JqueryUIダウンロードページ

カスタムダウンロード-ライブラリのカスタマイズバージョンをダウンロードするには、このボタンをクリックします。
安定-このボタンをクリックして、安定した最新バージョンのJqueryUIライブラリを取得します。
レガシー-JqueryUIライブラリの以前のメジャーリリースを取得するには、このボタンをクリックします。

ダウンロードビルダーを使用したカスタムダウンロード

Download Builderを使用すると、必要なライブラリの部分のみを含めるカスタムビルドを作成できます。選択したテーマに応じて、JqueryUIのこの新しいカスタマイズバージョンをダウンロードできます。次の画面が表示されます（同じページが2つの画像に分割されています）-

JqueryUIカスタムダウンロードページ

これは、JqueryUIライブラリの特定のプラグインまたは機能のみが必要な場合に便利です。このバージョンのディレクトリ構造は、次の図に示されています-

JqueryUIカスタムディレクトリ構造ページ

非圧縮ファイルは_development-bundle_ディレクトリにあります。非圧縮ファイルは、開発時またはデバッグ時に最適に使用されます。圧縮ファイルは帯域幅を節約し、本番環境でのパフォーマンスを向上させます。

安定したダウンロード

Stableボタンをクリックすると、ソース、サンプル、および最新バージョンのJqueryUIライブラリのドキュメントを含むZIPファイルが直接表示されます。 ZIPファイルの内容を_jqueryui_ディレクトリに抽出します。

このバージョンには、すべての依存関係を含むすべてのファイル、デモの大規模なコレクション、さらにライブラリの単体テストスイートが含まれています。このバージョンは、開始するのに役立ちます。

レガシーダウンロード

[レガシー]ボタンをクリックすると、JqueryUIライブラリの以前のメジャーリリースのZIPファイルが直接表示されます。このバージョンには、すべての依存関係を含むすべてのファイル、デモの大規模なコレクション、さらにライブラリの単体テストスイートも含まれています。このバージョンは、開始するのに役立ちます。

[download_cdn]#

CDNからUIライブラリをダウンロードする

CDNまたはコンテンツ配信ネットワークは、ユーザーにファイルを提供するように設計されたサーバーのネットワークです。 WebページでCDNリンクを使用すると、ファイルをホストする責任が独自のサーバーから一連の外部サーバーに移ります。これには、Webページへの訪問者が同じCDNからJqueryUIのコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点もあります。

jQuery Foundation、https://developers.google.com/speed/libraries/devguide [Google]、およびhttps://www.asp.net/ajaxlibrary/cdn。 ashx [Microsoft]はすべて、jQuery UIと同様にjQueryコアをホストするCDNを提供します。

CDNでは、独自のバージョンのjQueryおよびjQuery UIをホストする必要がないため、デモや実験に最適です。

'_このチュートリアルでは、ライブラリのCDNバージョンを使用しています。_

例

ここで、JqueryUIを使用して簡単な例を作成しましょう。 HTMLファイルを作成して、次のコンテンツを<head>タグにコピーしましょう-

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<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>

上記のコードの詳細は次のとおりです-

最初の行は、CSSを介してjQuery UIテーマ（この場合は_ui-lightness_）を追加します。このCSSはUIをスタイリッシュにします。
2行目は、jQuery UIがjQueryライブラリの上に構築されているため、jQueryライブラリを追加します。 *3行目は、jQuery UIライブラリを追加します。これにより、ページでjQuery UIが有効になります。

それでは<head>タグにコンテンツを追加しましょう-

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

<body>にこれを追加します-

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

完全なHTMLコードは次のとおりです。* myfirstexamplel *という名前で保存します

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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 type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>

   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

ブラウザで上記のページを開きます。次の画面が生成されます。

JqueryUI Fist Example Demo

JqueryUI-ドラッグ可能

jQueryUIには、DOM要素をドラッグ可能にする* draggable（）*メソッドが用意されています。要素がドラッグ可能になったら、マウスで要素をクリックしてビューポート内の任意の場所にドラッグすることで、その要素を移動できます。

構文

draggable（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_draggable＃draggable_options [$（selector、context）.draggable（options）]メソッド
link：/jqueryui/jqueryui_draggable＃draggable_methods [$（selector、context）.draggable（ "action"、[params]）]メソッド

[draggable_options]#

$（セレクター、コンテキスト）.draggable（オプション）メソッド

_draggable（options）_メソッドは、HTML要素をHTMLページ内で移動できることを宣言します。 _options_パラメーターは、関連する要素の動作を指定するオブジェクトです。

構文

$(selector, context).draggable(options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).draggable({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$(".selector").draggable(
   { addClasses: false }
);
$(".selector").draggable(
   { appendTo: "body"}
);
$(".selector").draggable(
   { axis: "x" }
);
$(".selector").draggable(
   { cancel: ".title" }
);
$(".selector").draggable(
   { connectToSortable: "#my-sortable" }
);
$(".selector").draggable(
   { containment: "parent" }
);
$(".selector").draggable(
   { cursor: "crosshair" }
);
$(".selector").draggable(
   $( ".selector" ).draggable({ cursorAt: { left: 5 } });
);
$(".selector").draggable(
   { delay: 300 }
);
$(".selector").draggable(
   { disabled: true }
);
$(".selector").draggable(
   { distance: 10 }
);
$(".selector").draggable(
   { grid: [ 50, 20 ] }
);
$(".selector").draggable(
   { handle: "h2" }
);
$(".selector").draggable(
   { helper: "clone" }
);
$(".selector").draggable(
   { iframeFix: true }
);
$(".selector").draggable(
   {  opacity: 0.35 }
);
$(".selector").draggable(
   { refreshPositions: true }
);
$(".selector").draggable(
   { revert: true }
);
$(".selector").draggable(
   { revertDuration: 200 }
);
$(".selector").draggable(
   { scope: "tasks" }
);
$(".selector").draggable(
   { scroll: false }
);
$(".selector").draggable(
   { scrollSensitivity: 100 }
);
$(".selector").draggable(
   { scrollSpeed: 100 }
);
$(".selector").draggable(
   { snap: true }
);
$(".selector").draggable(
   { snapMode: "inner" }
);
$(".selector").draggable(
   { snapTolerance: 30 }
);
$(".selector").draggable(
   { stack: ".products"  }
);
$(".selector").draggable(
   { zIndex: 100 }
);

次のセクションでは、ドラッグ機能のいくつかの実例を示します。

デフォルトの機能

次の例は、* draggable（）*メソッドにパラメーターを渡さないドラッグ可能な機能の簡単な例を示しています。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #draggable { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
      </style>

      <script>
         $(function() {
            $( "#draggable" ).draggable();
         });
      </script>
   </head>

   <body>
      <div id = "draggable" class = "ui-widget-content">
         <p>Drag me !!!</p>
      </div>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存し、JavaScriptをサポートする標準ブラウザで開きます。次の出力も表示する必要があります。今、あなたは結果で遊ぶことができます-

無効化、距離、および遅延の使用

次の例は、JqueryUIのドラッグ機能での3つの重要なオプション*（a）無効（b）遅延*および*（c）距離*の使用法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>
   </head>

   <body>
      <div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me!</span><br/><br/>
      </div>
      <div id = "div2" style = "border:solid 1px;background-color:grey;">
         <span>
            Dragging will start only after you drag me for 50px
         </span>
         <br/><br/>
      </div>
      <div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
         <span>
            You have to wait for 500ms for dragging to start!
         </span>
         <br/><br/>
      </div>

      <script>
         $("#div1 span").draggable (
            { disabled: true }
         );
         $("#div2 span").draggable (
            { distance: 50 }
         );
         $("#div3 span").draggable (
            { delay: 500 }
         );
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

動きを制限する

次の例は、JqueryUIのドラッグ機能の containment オプションを使用して、画面上の要素の移動を制限する方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>
   </head>

   <body>
      <div id = "div4" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can drag me only within this div.</span><br/><br/>
      </div>
      <div id = "div5" style = "border:solid 1px;background-color:grey;">
         <span>You can drag me only along x axis.</span><br/><br/>
      </div>

      <script>
         $("#div4 span").draggable ({
            containment : "#div4"
         });
         $("#div5 span").draggable ({
            axis : "x"
         });
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存し、JavaScriptをサポートする標準ブラウザで開きます。次の出力が生成されます。今、あなたは出力で遊ぶことができます-

ここで、<span>要素は、IDがdiv4である<div>の外に出ることはできません。また、「x」または「y」に相当するオプション_axis_を使用して、垂直または水平の動きに制約を課すこともできます。

複製してコンテンツを移動する

次の例は、選択した要素のクローンであるアイテムを移動する方法を示しています。これは、オプション_helper_と値_clone_を使用して行われます。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>
   </head>

   <body>
      <div id = "div6" style = "border:solid 1px;background:#eee; height:50px;">
         <span>You can duplicate me....</span>
      </div>

      <script>
         $("#div6 span").draggable ({
            helper : "clone"
         });
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

最初の要素がドラッグされていることを見るとわかるように、複製された要素のみが移動し、元のアイテムはそのままです。マウスを離すと、複製された要素は消え、元のアイテムは元の位置のままです。

現在のオプション値を取得

次の例は、スクリプトの実行中にいつでもオプションの値を取得する方法を示しています。ここでは、実行時に設定された cursor および cursorAt オプションの値を読み取ります。同様の方法で、利用可能な他のオプションの値を取得できます。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>
   </head>

   <body>
      <div id = "divX" style = "border:solid 1px;background:#eee; height:50px;">
         <span>Click anywhere on me to see cursor type...</span>
      </div>

      <script>
        /*First make the item draggable*/
         $("#divX span").draggable();

         $("#divX span").bind('click', function( event ) {
            var cursor = $( "#divX span" ).draggable( "option", "cursor" );
            var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
            alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
         });
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

[draggable_methods]#

$（セレクター、コンテキスト）.draggable（ "action"、[params]）メソッド

_draggable（action、params）_メソッドは、移動を防ぐなど、可動要素に対してアクションを実行できます。 action は最初の引数で文字列として指定され、オプションで、指定されたアクションに基づいて1つ以上の params を提供できます。

'_基本的に、ここでのアクションは何もありませんが、文字列の形で使用できるjQueryメソッドです。_

構文

$(selector, context).draggable ("action", [params]);

次の表は、このメソッドのアクションを示しています-


$(".selector").draggable("destroy");
$(".selector").draggable("disable");
$(".selector").draggable("enable");
var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
var options = $( ".selector" ).draggable( "option" );
$( ".selector" ).draggable( "option", "disabled", true );
$(".selector").draggable("option", { disabled: true } );
var widget = $(".selector ).draggable("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、アクション_disable_および_enable_の使用方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>
   </head>

   <body>
      <div id = "div7" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me. Dragging is disabled.</span><br><br>
      </div>
      <div id = "div8" style = "border:solid 1px;background-color:grey;">
         <span>You can move me. Dragging is enabled.</span><br><br>
      </div>

      <script>
         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');
      </script>
   </body>
</html>

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

ご覧のとおり、最初の要素が無効になり、2番目の要素のドラッグが有効になり、ドラッグを試みることができます。

移動した要素のイベント管理

前のセクションで見たドラッグ可能な（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

Sr.No.	Event Method & Description
1	create(event, ui) ドラッグ可能が作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-create（event、ui）ドラッグ可能が作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$(".selector").draggable( create: function(event, ui) {} );`
2	drag(event, ui) ドラッグ中にマウスが移動するとトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。イベント-drag（event、ui）ドラッグ中にマウスが移動するとトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。構文 `$(".selector").draggable( drag: function(event, ui) {} );`
3	start(event, ui) ドラッグの開始時にトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。イベント-start（event、ui）ドラッグの開始時にトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。構文 `$(".selector").draggable( start: function( event, ui ) {} );`
4	stop(event, ui) ドラッグが停止するとトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。イベント-停止（イベント、UI）ドラッグが停止するとトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。構文 `$(".selector").draggable( stop: function( event, ui ) {} );`

例

次の例は、ドラッグ機能中のイベントメソッドの使用を示しています。この例は、_drag_イベントの使用を示しています。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>
   </head>

   <body>
      <div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
         <span>Drag me to check the event method firing</span><br/><br/>
      </div>

      <script>
         $("#div9 span").draggable ({
            cursor: "move",
            axis : "x",
            drag: function( event, ui ) {
               alert("hi..");
            }
         });
      </script>
   </body>
</html>

上記のコードをHTMLファイル dragexample に保存し、javascriptをサポートする標準のブラウザで開きます。次の出力が必要です-

書かれたコンテンツをドラッグしようとすると、ドラッグイベントの start が発生し、ダイアログボックスが表示され、カーソルが移動アイコンに変わり、テキストがX軸のみで移動することがわかります。

JqueryUI-ドロップ可能

jQueryUIは* droppable（）*メソッドを提供して、指定されたターゲット（ドラッグ可能な要素のターゲット）でDOM要素をドロップ可能にします。

構文

droppable（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_droppable＃droppable_options [$（selector、context）.droppable（options）]メソッド
link：/jqueryui/jqueryui_droppable＃droppable_methods [$（selector、context）.droppable（ "action"、params）]メソッド

[droppable_options]#

$（セレクター、コンテキスト）.droppable（オプション）メソッド

_droppable（options）_メソッドは、HTML要素を他の要素をドロップできる要素として使用できることを宣言します。 _options_パラメーターは、関連する要素の動作を指定するオブジェクトです。

構文

$(selector, context).droppable (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).droppable({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).droppable(
   { accept: ".special" }
);
$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
$( ".selector" ).droppable(
   { addClasses: false }
);
$( ".selector" ).droppable(
   { disabled: true }
);
$( ".selector" ).droppable(
   { greedy: true }
);
$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
$( ".selector" ).droppable(
   { scope: "tasks" }
);
$( ".selector" ).droppable(
   { tolerance: "fit" }
);

次のセクションでは、ドロップ機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* droppable（）*メソッドにパラメーターを渡さない、ドロップ可能な機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #draggable-1 {
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0;
         }
         #droppable-1 {
            width: 120px; height: 90px;padding: 0.5em; float: left;
            margin: 10px;
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>

   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

addClass、無効、および許容値の使用

次の例は、JqueryUIのドロップ関数での3つのオプション*（a）addClass（b）disabled および（c）許容値*の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #draggable-2 {
            width: 100px; height: 50px; padding: 0.5em;
            margin: 0px 5px 10px 0;
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 {
            width: 120px; height: 90px;padding: 0.5em; float: left;
            margin: 10px;
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped!" );
               }
            });

            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped!" );
               }
            });

            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped with a touch!" );
               }
            });

            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>

   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

次に、「Tolerance Touch！」に要素をドロップしますボックス（このボックスの端をタッチするだけ）でターゲット要素の変更を確認します。次に、「Tolerance Fit！」に要素をドロップしますターゲットの場合、ドラッグ可能な要素はターゲット要素と完全にオーバーラップする必要があります。つまり、「Tolerance Fit！」ターゲット。

ドロップする要素を選択してください

次の例は、JqueryUIのドラッグ機能でオプション accept および scope オプションを使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial {
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
         }

         #japan,#india,#java,#spring {
            width: 140px; height: 100px;padding: 0.5em; float: left;
            margin: 10px;
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped!" );
               }
            });

            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});

            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped!" );
               }
            });

            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped!" );
               }
            });
         });
      </script>
   </head>

   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>

      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは出力で遊ぶことができます-

ここでは、「Japan」ターゲットのみに要素「People from Japan」を、ターゲットインドに「People from India」要素をドロップできることがわかります。同様に、「Javaを学習したい人」のスコープは「Java」をターゲットに設定され、「Springを学習したい人」は「Springターゲット」に設定されます。

外観の管理

次の例は、JqueryUIクラスの activeClass および hoverClass オプションの使用方法を示しています。これらは、外観の管理に役立ちます。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style type = "text/css">
         #draggable-3 {
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 {
            width: 120px; height: 90px;padding: 0.5em; float: left;
            margin: 10px;
         }
         .active {
            border-color : blue;
            background : grey;
         }
         .hover {
            border-color : red;
            background : green;
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped!" );
               }
            });
         });
      </script>
   </head>

   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

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

「ターゲットにドラッグしてください」要素をドラッグまたはホバーする（ターゲット上に）と、ターゲット要素の「ここにドロップする」の色が変わることがわかります。

[droppable_methods]#

$（セレクター、コンテキスト）.droppable（ "action"、params）メソッド

_droppable（ "action"、params）_メソッドは、ドロップ可能な機能の防止など、ドロップ可能な要素に対してアクションを実行できます。アクションは、最初の引数で文字列として指定されます（たとえば、ドロップを防ぐために「無効にする」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).droppable ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).droppable("destroy");
$( ".selector" ).droppable("disable");
$( ".selector" ).droppable("enable");
var options = $( ".selector" ).droppable( "option" );
var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
$( ".selector" ).droppable( "option", "disabled", true );
$( ".selector" ).droppable( "option", { disabled: true } );
var widget = $( ".selector" ).droppable( "widget" );

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_destroy（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .draggable-4 {
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;
            background-color:#B9CD6D;
         }
         .droppable-7 {
            width: 100px; height: 90px;padding: 0.5em; float: left;
            margin: 10px;
            border: 1px solid black;
            background-color:#A39480;
         }
         .droppable.active {
            background-color: red;
         }
      </style>

      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this)l(ui.draggable.remove()l());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>

   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

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

「ここにドロップ」という名前のエレメントのいずれかに「drag1」をドロップすると、このエレメントがドロップされ、このアクションによりエレメントのドロップ可能な機能が完全に破壊されることがわかります。この要素に「drag2」と「drag3」を再度ドロップすることはできません。

ドロップ可能な要素のイベント管理

前のセクションで見たドロップ可能な（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
$(".selector").droppable(
   deactivate: function(event, ui) {}
);
$(".selector").droppable(
   drop: function(event, ui) {}
);
$(".selector").droppable(
   out: function(event, ui) {}
);
$(".selector").droppable(
   over: function(event, ui) {}
);

例

次の例は、ドロップ機能中のイベントメソッドの使用方法を示しています。この例は、drop _、 over_、および_out_イベントの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #draggable-5 {
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0;
         }
         #droppable-8 {
            width: 120px; height: 90px;padding: 0.5em; float: left;
            margin: 10px;
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "Dropped!" );
               },

               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  l( "moving out!" );
               }
            });
         });
      </script>
   </head>

   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

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

ここでは、要素をドラッグすると、ドロップ可能な要素内のメッセージがどのように変化するかがわかります。

JqueryUI-サイズ変更可能

jQueryUIは、DOM要素のサイズを変更するresizable（）メソッドを提供します。このメソッドは、要素のサイズ変更を簡単にします。そうしないと、HTMLで時間と大量のコーディングが必要になります。 resizable（）メソッドは、サイズを変更するアイテムの右下にアイコンを表示します。

構文

resizable（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_resizable＃resizable_options [$（selector、context）.resizable（options）]メソッド
link：/jqueryui/jqueryui_resizable＃resizable_methods [$（selector、context）.resizable（ "action"、params）]メソッド

[resizable_options]#

$（セレクター、コンテキスト）.resizable（オプション）メソッド

_resizable（options）_メソッドは、HTML要素のサイズを変更できることを宣言します。 _options_パラメーターは、サイズ変更時に関連する要素の動作を指定するオブジェクトです。

構文

$(selector, context).resizable (options);

Javascriptオブジェクトの使用時に、1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).resizable({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).resizable({ alsoResize: "#identifier" });
$( ".selector" ).resizable({ animate: true });
$( ".selector" ).resizable({ animateDuration: "fast" });
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
$( ".selector" ).resizable({ aspectRatio: true });
$( ".selector" ).resizable({ autoHide: true });
$( ".selector" ).resizable({ cancel: ".cancel" });
$( ".selector" ).resizable({ containment: "parent" });
$( ".selector" ).resizable({ delay: 150 });
$( ".selector" ).resizable({ disabled: true });
$( ".selector" ).resizable({ distance: 30 });
$( ".selector" ).resizable({ ghost: true });
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
$( ".selector" ).resizable({ handles: "n, e, s, w" });
$( ".selector" ).resizable({ helper: "resizable-helper" });
$( ".selector" ).resizable({ maxHeight: 300 });
$( ".selector" ).resizable({ maxWidth: 300 });
$( ".selector" ).resizable({ minHeight: 150 });
$( ".selector" ).resizable({ minWidth: 150 });

次のセクションでは、サイズ変更機能のいくつかの実例を示します。

デフォルトの機能

次の例は、* resizable（）*メソッドにパラメーターを渡さない、サイズ変更可能な機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "resizable" class = "ui-widget-content">
         <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

上記のコードをHTMLファイル resizeexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

サイズを変更するには、正方形の境界線をドラッグします。

アニメートとゴーストの使用

次の例は、JqueryUIのサイズ変更関数で2つのオプション animate および ghost を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-2,#resizable-3 {
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "resizable-2" class = "ui-widget-content">
         <h3 class = "ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id = "resizable-3" class = "ui-widget-content">
         <h3 class = "ui-widget-header">I'm ghost!!</h3>
      </div>
   </body>
</html>

上記のコードをHTMLファイル resizeexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

正方形の境界線をドラッグしてサイズを変更し、アニメーションオプションとゴーストオプションの効果を確認します。

包含、minHeight、およびminWidthの使用

次の例は、JqueryUIのサイズ変更関数で3つのオプション containment 、 minHeight および minWidth を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left;
            width: 150px; height: 150px; }
         #resizable-4, #container { padding: 0.5em; }
      </style>

      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>

   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル resizeexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

四角い境界線をドラッグしてサイズを変更します。メインコンテナを超えてサイズを変更することはできません。

遅延、距離、および自動非表示の使用

次の例は、JqueryUIのサイズ変更関数で3つのオプション delay 、 distance および autoHide を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>

      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>

   <body>
      <div id = "resizable-5" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id = "resizable-6" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id = "resizable-7" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

上記のコードをHTMLファイル resizeexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

サイズを変更するには正方形の境界線をドラッグし、あなたがそれに気づくことができます-

最初の四角いボックスは、1000msの遅延後にサイズ変更され、
マウスが40px移動すると、2番目の四角いボックスのサイズが変更されます。
3番目の四角いボックスにマウスを合わせると、拡大アイコンが表示されます。

alsoResizeの使用

次の例は、JqueryUIのサイズ変更関数でオプション alsoResize を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px;
            padding: 0.5em;text-align: center; margin: 0; }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "resizable-8" class = "ui-widget-content">
         <h3 class = "ui-widget-header">Resize!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content">
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div>
   </body>
</html>

上記のコードをHTMLファイル resizeexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

四角形の境界線をドラッグしてサイズを変更すると、2番目の四角形ボックスも最初の四角形ボックスと同じサイズに変更されます。

AspectRatio、Gridの使用

次の例は、JqueryUIのサイズ変更関数でオプション aspectRatio および grid を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>

      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10/3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>

   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

上記のコードをHTMLファイル resizeexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

正方形の境界線をドラッグしてサイズを変更します。最初の正方形のボックスは10/3のアスペクト比でサイズ変更され、2番目のボックスは[50,20]のグリッドでサイズ変更されます。

[resizable_methods]#

$（セレクター、コンテキスト）.resizable（ "action"、params）メソッド

_resizable（ "action"、params）_メソッドは、サイズ変更機能の許可または禁止など、サイズ変更可能な要素に対してアクションを実行できます。アクションは、最初の引数で文字列として指定されます（サイズ変更を防ぐために「無効」など）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).resizable ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


 $( ".selector" ).resizable("destroy");
 $( ".selector" ).resizable("disable");
$( ".selector" ).resizable("enable");
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
var options = $( ".selector" ).resizable( "option" );
$( ".selector" ).resizable( "option", "disabled", true );
$( ".selector" ).resizable( "option", { disabled: true } );
var widget = $( ".selector" ).resizable( "widget" );

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_destroy（）_および_disable（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px;
            padding: 0.5em;text-align: center; margin: 0; }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "resizable-12" class = "ui-widget-content">
         <h3 class = "ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id = "resizable-13" class = "ui-widget-content">
         <h3 class = "ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

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

最初の四角いボックスは無効になっているためサイズを変更できず、2番目の四角いボックスは破棄されます。

サイズ変更可能な要素のイベント管理

前のセクションで見たサイズ変更可能な（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

Sr.No.	Event Method & Description
1	create(event, ui) このイベントは、サイズ変更可能な要素が作成されたときにトリガーされます。イベント-create（event、ui）このイベントは、サイズ変更可能な要素が作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).resizable({ create: function( event, ui ) {} });`
2	resize(event, ui) このイベントは、サイズ変更可能な要素のハンドラーがドラッグされるとトリガーされます。イベント-resize（event、ui）このイベントは、サイズ変更可能な要素のハンドラーがドラッグされるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- element -サイズ変更可能な要素を表すjQueryオブジェクト。 helper -サイズ変更されているヘルパーを表すjQueryオブジェクト。 originalElement -ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition -サイズ変更可能なサイズが変更される前の\ {left、top}として表される位置。 originalSize -サイズ変更可能なサイズが変更される前の\ {width、height}で表されるサイズ。 position -\ {left、top}として表される現在の位置。サイズ-\ {幅、高さ}として表される現在のサイズ。構文 `$( ".selector" ).resizable({ resize: function( event, ui ) {} });`
3	start(event, ui) このイベントは、サイズ変更操作の開始時にトリガーされます。イベント-start（event、ui）このイベントは、サイズ変更操作の開始時にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- element -サイズ変更可能な要素を表すjQueryオブジェクト。 helper -サイズ変更されているヘルパーを表すjQueryオブジェクト。 originalElement -ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition -サイズ変更可能なサイズが変更される前の\ {left、top}として表される位置。 originalSize -サイズ変更可能なサイズが変更される前の\ {width、height}で表されるサイズ。 position -\ {left、top}として表される現在の位置。サイズ-\ {幅、高さ}として表される現在のサイズ。構文 `$( ".selector" ).resizable({ start: function( event, ui ) {} });`
4	stop(event, ui) このイベントは、サイズ変更操作の最後にトリガーされます。イベント-停止（イベント、UI）このイベントは、サイズ変更操作の最後にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- element -サイズ変更可能な要素を表すjQueryオブジェクト。 helper -サイズ変更されているヘルパーを表すjQueryオブジェクト。 originalElement -ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition -サイズ変更可能なサイズが変更される前の\ {left、top}として表される位置。 originalSize -サイズ変更可能なサイズが変更される前の\ {width、height}で表されるサイズ。 position -\ {left、top}として表される現在の位置。 size -\ {width、height}で表される現在のサイズ。構文 `$( ".selector" ).resizable({ stop: function( event, ui ) {} });`

例

次の例は、サイズ変更機能中のイベントメソッドの使用方法を示しています。この例は、_create_および_resize_イベントの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px;
         padding: 0.5em;text-align: center; margin: 0; }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "resizable-14" class = "ui-widget-content">
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

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

四角いボックスをドラッグすると、サイズ変更イベントで出力が表示されます。

JqueryUI-選択可能

jQueryUIは、DOM要素を個別にまたはグループで選択するselectable（）メソッドを提供します。この方法では、要素上でマウスを使用してボックス（なげなわとも呼ばれる）をドラッグすることで要素を選択できます。また、Ctrl/Metaキーを押しながらクリックまたはドラッグして要素を選択できるため、複数の（連続しない）選択が可能です。

構文

selectable（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_selectable＃selectable_options [$（selector、context）.selectable（options）]メソッド
link：/jqueryui/jqueryui_selectable＃selectable_methods [$（selector、context）.selectable（ "action"、params）]メソッド

[selectable_options]#

$（セレクター、コンテキスト）.selectable（オプション）メソッド

_selectable（options）_メソッドは、HTML要素に選択可能な項目が含まれていることを宣言します。 _options_パラメーターは、選択時に関係する要素の動作を指定するオブジェクトです。

構文

$(selector, context).selectable (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).selectable({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).selectable({ appendTo: "#identifier" });
$( ".selector" ).selectable({ autoRefresh: false });
$( ".selector" ).selectable({ cancel: "a,.cancel" });
$( ".selector" ).selectable({ delay: 150 });
$( ".selector" ).selectable({ disabled: true });
$( ".selector" ).selectable({ distance: 30 });
$( ".selector" ).selectable({ filter: "li" });
$( ".selector" ).selectable({ tolerance: "fit" });

次のセクションでは、選択可能な機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* selectable（）*メソッドにパラメーターを渡さない、選択可能な機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #selectable-1 .ui-selecting { background: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0;
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em;
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>

   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

上記のコードをHTMLファイル selectableexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

製品をクリックして、CTRLSキーを使用して複数の製品を選択してください。

遅延と距離の使用

次の例は、JqueryUIの選択可能な関数で2つのオプション delay および distance を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting {
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected {
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0;
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em;
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>

   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id = "selectable-2">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

上記のコードをHTMLファイル selectableexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

製品をクリックして、CTRLキーを使用して複数の製品を選択してください。製品1、製品2、および製品3の選択は、1000ミリ秒の遅延後に開始されます。製品4、製品5、製品6、および製品7を個別に選択することはできません。マウスが100pxの距離を移動した後にのみ、選択が開始されます。

フィルターの使用

次の例は、JqueryUIの選択可能な関数で2つのオプション delay および distance を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #selectable-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0;
            padding: 0; width: 20%; }
         #selectable-4 li { margin: 3px; padding: 0.4em;
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#selectable-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>

   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

上記のコードをHTMLファイル selectableexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

製品をクリックしてみてください。最初の製品のみを選択できます。

[selectable_methods]#

$（セレクター、コンテキスト）.selectable（ "action"、params）メソッド

_selectable（ "action"、params）_メソッドは、選択可能な機能の防止など、選択可能な要素に対してアクションを実行できます。アクションは、最初の引数に文字列として指定されます（たとえば、選択を停止するには「無効」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).selectable ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).selectable("destroy");
$( ".selector" ).selectable("disable");
$( ".selector" ).selectable("enable");
var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
var options = $( ".selector" ).selectable( "option" );
$( ".selector" ).selectable( "option", "disabled", true );
$( ".selector" ).selectable( "option", { disabled: true } );
$( ".selector" ).selectable("refresh");
var widget = $( ".selector" ).selectable( "widget" );

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_disable（）_および_option（optionName、value）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting {
            background: #707070 ; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected {
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 {
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li {
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );
         });
      </script>
   </head>

   <body>
      <h3>Disabled using disable() method</h3>
      <ol id = "selectable-5">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

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

製品をクリックして、CTRLキーを使用して複数の製品を選択してください。製品1、製品2、および製品3が無効になっていることがわかります。製品4、製品5、製品6、および製品7の選択は、マウスが1ピクセルの距離を移動した後に行われます。

選択可能な要素のイベント管理

前のセクションで見た選択可能（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});
$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

例

次の例は、選択可能な機能中のイベントメソッドの使用方法を示しています。この例は、_selected_イベントの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0;
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em;
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>

      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>

   <body>
      <h3>Events</h3>
      <ol id = "selectable-7">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>

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

製品をクリックして、CTRLキーを使用して複数の製品を選択してください。選択した製品番号が下部に印刷されていることがわかります。

JqueryUI-ソート可能

jQueryUIは、マウスを使用してリストまたはグリッド内の要素を並べ替える* sortable（）*メソッドを提供します。このメソッドは、最初のパラメーターとして渡された操作文字列に基づいてソート可能アクションを実行します。

構文

ソート可能な（）*メソッドは2つの形式で使用することができます-

link：/jqueryui/jqueryui_sortable＃sortable_options [$（selector、context）.sortable（options）]メソッド
link：/jqueryui/jqueryui_sortable＃sortable_methods [$（selector、context）.sortable（ "action"、[params]）]メソッド

[sortable_options]#

$（セレクター、コンテキスト）.sortable（オプション）メソッド

_sortable（options）_メソッドは、HTML要素に交換可能な要素が含まれることを宣言します。 _options_パラメーターは、並べ替え中に関係する要素の動作を指定するオブジェクトです。

構文

$(selector, context).sortable(options);

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$(".selector").sortable(
   { appendTo: document.body }
);
$(".selector").sortable(
   { axis: "x" }
);
$(".selector").sortable(
   { cancel: "a,button" }
);
$(".selector").sortable(
   { connectWith: "#identifier" }
);
$(".selector").sortable(
   { containment: "parent" }
);
$(".selector").sortable(
   { cursor: "move" }
);
$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
$(".selector").sortable(
   { delay: 150 }
);
$(".selector").sortable(
   { disabled: true }
);
$(".selector").sortable(
   { distance: 5 }
);
$(".selector").sortable(
   { dropOnEmpty: false }
);
$(".selector").sortable(
   { forceHelperSize: true }
);
$(".selector").sortable(
   { forcePlaceholderSize: true }
);
$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
$(".selector").sortable(
   { handle: ".handle" }
);
$(".selector").sortable(
   { helper: "clone" }
);
$(".selector").sortable(
   { items: "> li" }
);
$(".selector").sortable(
   { opacity: 0.5 }
);
$(".selector").sortable(
   { addClasses: false }
);
$(".selector").sortable(
   { revert: true }
);
$(".selector").sortable(
   { scroll: false }
);
$(".selector").sortable(
   { scrollSensitivity: 10 }
);
$(".selector").sortable(
   { scrollSpeed: 40 }
);
$(".selector").sortable(
   { tolerance: "pointer" }
);
$(".selector").sortable(
   { zIndex: 9999 }
);

次のセクションでは、ドラッグ機能のいくつかの実例を示します。

デフォルトの機能

次の例は、* sortable（）*メソッドにパラメーターを渡さない、ソート可能な機能の簡単な例を示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #sortable-1 { list-style-type: none; margin: 0;
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>

   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

上記のコードをHTMLファイル sortexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

上記の製品を再配置し、マウスを使用してアイテムをドラッグします。

オプションの使用遅延と距離

次の例は、JqueryUIのソート関数で3つのオプション*（a）delay および（b）distance *を使用する方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0;
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>

   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

上記のコードをHTMLファイル sortexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

上記の製品を再配置し、マウスを使用してアイテムをドラッグします。遅延（時間）または距離による誤ったソートを防ぐために、_delay_オプションでソートを開始する前に要素をドラッグする必要があるミリ秒数を設定しました。また、_distance_オプションでソートを開始する前に要素をドラッグする必要がある距離をピクセル単位で設定しました。

プレースホルダーの使用

次の例は、JqueryUIのsort関数で3つのオプション placeholder を使用する方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #sortable-4 { list-style-type: none; margin: 0;
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>

   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

上記のコードをHTMLファイル sortexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

アイテムをドラッグして再配置します。アイテムをドラッグしている間、プレースホルダー（_highlight_クラスを使用してこのスペースのスタイルを設定します）が利用可能な場所に表示されます。

オプションConnectwithおよびDroponemptyの使用

次の例は、JqueryUIのsort関数での3つのオプション*（a）connectWith および（b）dropOnEmpty *の使用法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #sortable-5, #sortable-6,#sortable-7 {
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li {
            margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>

   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

上記のコードをHTMLファイル sortexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

セレクタを_connectWith_オプションに渡すことにより、リスト1から別のリスト1（リスト2）にアイテムをソートします。これは、すべての関連リストをCSSクラスでグループ化してから、そのクラスをソート可能な関数に渡します（つまり、connectWith： '＃sortable-5、＃sortable-6'）。

リスト3の下のアイテムをリスト2またはリスト1にドラッグしてみてください。 _dropOnEmpty_オプションを_false_に設定したため、これらのアイテムをドロップすることはできません。

[sortable_methods]#

$（セレクター、コンテキスト）.sortable（ "action"、[params]）メソッド

_sortable（action、params）_メソッドは、変位を防ぐなど、ソート可能な要素に対してアクションを実行できます。 action は最初の引数で文字列として指定され、オプションで、指定されたアクションに基づいて1つ以上の params を提供できます。

'_基本的に、ここでのアクションは何もありませんが、文字列の形で使用できるjQueryメソッドです。_

構文

$(selector, context).sortable ("action", [params]);

次の表は、このメソッドのアクションを示しています-


$(".selector").sortable("cancel");
$(".selector").sortable("destroy");
$(".selector").sortable("disable");
$(".selector").sortable("enable");
var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
$(".selector").sortable("option");
$(".selector").sortable("option", "disabled", true);
$( ".selector" ).sortable( "option", { disabled: true } );
$(".selector").sortable("refresh");
var sortedIDs = $( ".selector" ).sortable( "toArray" );
var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
$(".selector").sortable("refreshPositions");
$(".selector").sortable("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_toArray（options）_メソッドの使用方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #sortable-8{ list-style-type: none; margin: 0;
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>

      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>

   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

上記のコードをHTMLファイル sortexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

アイテムを並べ替えると、アイテムの順序が下部に表示されます。ここでは、_ $（this）.sortable（ 'toArray'）。toString（）_を呼び出しています。これは、すべてのアイテムIDの文字列リストを提供し、 1,2,3,4 のようになります。

ソート可能な要素のイベント管理

前のセクションで見たソート可能な（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

例

次の例は、ドロップ機能中のイベントメソッドの使用方法を示しています。この例では、receive _、 start_、および_stop_イベントの使用方法を示します。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #sortable-10, #sortable-11 { list-style-type: none;
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px;
            padding: 0.4em; padding-left: 1.5em;
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>

      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result")l ($("span#result")l ()
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result")l ($("span#result")l ()
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result")l ($("span#result")l ()
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>

   <body>
      <div class = "wrap">
         <div class = "wrap1">
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3>
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr/>
      <span id = result></span>
   </body>
</html>

上記のコードをHTMLファイル sortexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

リスト1のアイテムを並べ替えてみてください。イベントの_start_と_stop_にメッセージが表示されます。リスト2からリスト1にアイテムをドロップします。ここでも、_receive_イベントでメッセージが表示されます。

JqueryUI-アコーディオン

jQueryUIのアコーディオンウィジェットは、jQueryベースの拡張および折りたたみ可能なコンテンツホルダーであり、セクションに分割され、おそらくタブのように見えます。 jQueryUIはこれを実現するためにaccordion（）メソッドを提供します。

構文

accordion（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_accordion＃accordion_options [$（selector、context）.accordion（options）]メソッド
link：/jqueryui/jqueryui_accordion＃accordion_methods [$（selector、context）.accordion（ "action"、params）]メソッド

$（セレクター、コンテキスト）.accordion（オプション）メソッド

_accordion（オプション）_メソッドは、HTML要素とそのコンテンツをアコーディオンメニューとして扱い、管理することを宣言します。 _options_パラメーターは、関連するメニューの外観と動作を指定するオブジェクトです。

構文

$(selector, context).accordion (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).accordion({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).accordion(
   { active: 2 }
);
$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
$( ".selector" ).accordion(
   { collapsible: true }
);
$( ".selector" ).accordion(
   { disabled: true }
);
$( ".selector" ).accordion(
   { event: "mouseover" }
);
$( ".selector" ).accordion(
   { header: "h3" }
);
$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

次のセクションでは、アコーディオンウィジェット機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* accordion（）*メソッドにパラメーターを渡さない、アコーディオンウィジェット機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#accordion-1" ).accordion();
         });
      </script>

      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ヘッダー（タブ1、タブ2、タブ3）をクリックして、タブのように論理セクションに分割されたコンテンツを展開/折りたたみます。

折りたたみ式の使用

次の例は、JqueryUIのアコーディオンウィジェットで3つのオプション*折りたたみ可能*を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>

      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ここでは、collapsibleを_true_に設定しました。アコーディオンヘッダーをクリックすると、アクティブなセクションが折りたたまれます。

heightStyleの使用

次の例は、JqueryUIのアコーディオンウィジェットで3つのオプション heightStyle を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>

      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>

   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua.
               </p>
            </div>
         </div>
      </div><br><br>

      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ここには2つのアコーディオンがあり、最初のアコーディオンには_content_に設定された_heightStyle_オプションがあります。これにより、アコーディオンパネルはネイティブの高さを維持できます。 2番目のアコーディオンには_heightStyle_オプションが_fill_に設定されており、スクリプトは自動的にアコーディオンの寸法をその親コンテナの高さに設定します。

[accordion_methods]#

$（セレクター、コンテキスト）.accordion（ "action"、params）メソッド

_accordion（ "action"、params）_メソッドは、アコーディオンメニューの選択/選択解除など、アコーディオン要素に対してアクションを実行できます。アクションは、最初の引数で文字列として指定されます（たとえば、「disable」はすべてのメニューを無効にします）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).accordion ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$(".selector").accordion("destroy");
$(".selector").accordion("disable");
$(".selector").accordion("enable");
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
var options = $( ".selector" ).accordion( "option" );
$( ".selector" ).accordion( "option", "disabled", true );
$( ".selector" ).accordion( "option", { disabled: true } );
$(".selector").accordion("refresh");
var widget = $( ".selector" ).accordion( "widget" );

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_option（optionName、value）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>

      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat.
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked
               value = "enable">Enable accordion
         </div>
     </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

ここでは、アコーディオンの有効化と無効化を示します。それぞれのラジオボタンを選択して、各アクションを確認します。

アコーディオン要素のイベント管理

前のセクションで見たアコーディオン（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

Sr.No. Event Method & Description

1

activate(event, ui)

このイベントは、メニューがアクティブになるとトリガーされます。このイベントはパネルのアクティブ化でのみ発生し、アコーディオンウィジェットが作成されたときの初期パネルでは発生しません。

イベント-activate（event、ui）

このイベントは、メニューがアクティブになるとトリガーされます。このイベントはパネルのアクティブ化でのみ発生し、アコーディオンウィジェットが作成されたときの初期パネルでは発生しません。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

newHeader -アクティブ化されたばかりのヘッダーを表すjQueryオブジェクト。
oldHeader -非アクティブ化されたばかりのヘッダーを表すjQueryオブジェクト。
newPanel -アクティブ化されたばかりのパネルを表すjQueryオブジェクト。
oldPanel -非アクティブ化されたばかりのパネルを表すjQueryオブジェクト。

構文

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});

2

beforeActivate(event, ui)

このイベントは、パネルがアクティブになる前にトリガーされます。このイベントをキャンセルして、パネルがアクティブにならないようにすることができます。

イベント-beforeActivate（event、ui）

このイベントは、パネルがアクティブになる前にトリガーされます。このイベントをキャンセルして、パネルがアクティブにならないようにすることができます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

newHeader -アクティブ化されようとしているヘッダーを表すjQueryオブジェクト。
oldHeader -非アクティブ化しようとしているヘッダーを表すjQueryオブジェクト。
newPanel -アクティブ化されようとしているパネルを表すjQueryオブジェクト。
oldPanel -非アクティブ化されようとしているパネルを表すjQueryオブジェクト。

構文

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});

3

create(event, ui)

このイベントは、アコーディオンが作成されるとトリガーされます。

イベント-create（event、ui）

このイベントは、アコーディオンが作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

header -アクティブなヘッダーを表すjQueryオブジェクト。
panel -アクティブなパネルを表すjQueryオブジェクト。

構文

$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

例

次の例は、アコーディオンウィジェットでのイベントメソッドの使用方法を示しています。この例では、create _、 beforeActive_、および_active_イベントの使用方法を示します。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result")l ($("span#result")l () +
                     "<b>Created</b><br>");
               },

               beforeActivate : function (event, ui) {
                  $("span#result")l ($("span#result")l () +
                     ", <b>beforeActivate</b><br>");
               },

               activate: function (event, ui) {
                  $("span#result")l ($("span#result")l () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>

      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua. Ut enim ad minim veniam, quis nostrud
               exercitation ullamco laboris nisi ut aliquip ex ea
               commodo consequat.
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua. Ut enim ad minim veniam, quis nostrud
               exercitation ullamco laboris nisi ut aliquip ex ea
               commodo consequat.
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua. Ut enim ad minim veniam, quis nostrud
               exercitation ullamco laboris nisi ut aliquip ex ea
               commodo consequat.
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr/>
      <span id = result></span>
   </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

ここでは、イベントに基づいて下部にテキストを表示しています。

JqueryUI-オートコンプリート

自動補完は、最近のWebサイトで頻繁に使用されるメカニズムで、ユーザーがテキストボックスに入力した単語の先頭の候補リストを提供します。その後、ユーザーはリストから項目を選択でき、入力フィールドに表示されます。この機能により、ユーザーは単語全体または一連の単語を入力する必要がなくなります。

JQueryUIは、オートコンプリートウィジェットを提供します。これは、<select>ドロップダウンによく似たコントロールですが、ユーザーがコントロールに入力しているものに一致するもののみを表示するように選択をフィルタリングします。 jQueryUIは、入力フィールドの下に候補のリストを作成する* autocomplete（）*メソッドを提供し、適切なスタイルを与えるために関連する要素に新しいCSSクラスを追加します。

入力を受け取ることができるフィールドは、オートコンプリート、つまり_ <input> 要素、 <textarea> _要素、および_contenteditable_属性を持つ要素に変換できます。

構文

autocomplete（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_autocomplete＃autocomplete_options [$（selector、context）.autocomplete（options）]メソッド
link：/jqueryui/jqueryui_autocomplete＃autocomplete_methods [$（selector、context）.autocomplete（ "action"、params）]メソッド

[autocomplete_options]#

$（セレクター、コンテキスト）.autocomplete（オプション）メソッド

_autocomplete（options）_メソッドは、HTML <input>要素を、提案リストの上に表示される入力フィールドとして管理する必要があることを宣言します。 _options_パラメーターは、ユーザーが入力フィールドに入力しているときの候補リストの動作を指定するオブジェクトです。

構文

$(selector, context).autocomplete (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).autocomplete({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).autocomplete({ appendTo: "#identifier" });
$( ".selector" ).autocomplete({ autoFocus: true });
$( ".selector" ).autocomplete({ delay: 500 });
$( ".selector" ).autocomplete({ disabled: true });
$( ".selector" ).autocomplete({ minLength: 0 });
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

次のセクションでは、オートコンプリートウィジェット機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* autocomplete（）*メソッドにパラメーターを渡さない、オートコンプリートウィジェット機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials  =  [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

autoFocusの使用

次の例は、JqueryUIのオートコンプリートウィジェットでオプション autoFocus を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

minLengthと遅延の使用

次の例は、JqueryUIのオートコンプリートウィジェットでの2つのオプション minLength および delay の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"
            ];
            $( "#automplete-3" ).autocomplete({
               minLength:2,
               delay:500,
               source: availableTutorials
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ラベルの使用

次の例は、JqueryUIのオートコンプリートウィジェットでオプション label を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

外部ソースの使用

次の例は、JqueryUIのオートコンプリートウィジェットの source オプションに外部ファイルを使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script>
   </head>

   <body>
      <input id = "autocomplete-5">
   </body>
</html>

_search.php_ファイルは、上記のファイル（autocompleteexamplel）と同じ場所に配置されます。 search.phpの内容は以下の通りです-

<?
$term = $_GET[ "term" ];
$companies = array(
   array( "label" => "JAVA", "value" => "1" ),
   array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
   array( "label" => "JAVASCRIPT", "value" => "3" ),
   array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
   array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
   array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
   array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
   array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
   array( "label" => "CLOUD COMPUTING", "value" => "9" ),
   array( "label" => "DATA MINING", "value" => "10" ),
   array( "label" => "DATA WAREHOUSE", "value" => "11" ),
   array( "label" => "E-COMMERCE", "value" => "12" ),
   array( "label" => "DBMS", "value" => "13" ),
   array( "label" => "HTTP", "value" => "14" )

);

$result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

[autocomplete_methods]#

$（セレクター、コンテキスト）.autocomplete（ "action"、params）メソッド

_autocomplete（ "action"、params）_メソッドは、表示や非表示などの提案のリストに対してアクションを実行できます。アクションは、最初の引数で文字列として指定されます（例：リストを非表示にする「閉じる」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).autocomplete ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).autocomplete("close");
$( ".selector" ).autocomplete("destroy");
$( ".selector" ).autocomplete("disable");
$( ".selector" ).autocomplete("enable");
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: true } );
$( ".selector" ).autocomplete( "search", "" );
$( ".selector" ).autocomplete("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_option（optionName、value）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" })
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も確認する必要があります-

拡張ポイント

オートコンプリートウィジェットは、ウィジェットファクトリでビルドされたものとして拡張できます。ウィジェットを拡張する場合、既存のメソッドの動作をオーバーライドまたは追加することができます。次の表は、リンクをリストしたプラグインメソッドと同じAPI安定性を持つ拡張ポイントとして機能するメソッドを示しています：/jqueryui/jqueryui_autocomplete＃autocomplete_methods [上記]。

Sr.No.

Method & Description

1

_renderItem( ul, item )

このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。このメソッドは、新しい<li>要素を作成し、メニューに追加して返します。

_renderItem（ul、item）*

このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。このメソッドは、新しい<li>要素を作成し、メニューに追加して返します。どこ-

<ul> は、新しく作成された<li>要素に追加する必要がある要素です。
項目 +は、label（String）、アイテムに表示する文字列、または_value（String）_、アイテムが選択されたときに入力に挿入する値になります。

2

_renderMenu( ul, items )

このメソッドは、ウィジェットのメニューの構築を制御します。

_renderMenu（ul、items）*

このメソッドは、ウィジェットのメニューの構築を制御します。どこ-

<ul> は、ユーザーが入力した用語に一致するアイテムの配列です。各アイテムは、_label_プロパティと_value_プロパティを持つオブジェクトです。

3

_resizeMenu()

このメソッドは、表示前のメニューのサイズ変更を制御します。メニュー要素は、_this.menu.element_で使用できます。このメソッドは引数を取りません。

_resizeMenu（）*

このメソッドは、表示前のメニューのサイズ変更を制御します。メニュー要素は、_this.menu.element_で使用できます。このメソッドは引数を取りません。

オートコンプリート要素のイベント管理

前のセクションで見たオートコンプリート（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

例

次の例は、オートコンプリートウィジェットでのイベントメソッドの使用方法を示しています。この例では、イベント_focus_および_select_の使用方法を示します。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            var projects = [
               {
                  value: "java",
                  label: "Java",
                  desc: "write once run anywhere",
               },
               {
                  value: "jquery-ui",
                  label: "jQuery UI",
                  desc: "the official user interface library for jQuery",
               },
               {
                  value: "Bootstrap",
                  label: "Twitter Bootstrap",
                  desc: "popular front end frameworks ",
               }
            ];
            $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                     return false;
               },
               select: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value );
                  $( "#project-description" )l( ui.item.desc );
                  return false;
               }
            })

            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>

   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。また、次の出力を確認する必要があります-

JqueryUI-ボタン

jQueryUIはbutton（）メソッドを提供し、HTML要素（ボタン、入力、アンカーなど）をテーマ対応ボタンに変換し、マウスの動きを自動的に管理し、すべてjQuery UIによって透過的に管理します。

ラジオボタンをグループ化するために、Buttonは_Buttonset_と呼ばれる追加のウィジェットも提供します。 Buttonset_は、コンテナ要素（ラジオボタンを含む）を選択し、。buttonset（）_を呼び出すことで使用されます。

構文

button（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_button＃button_options [$（selector、context）.button（options）]メソッド
link：/jqueryui/jqueryui_button＃button_methods [$（selector、context）.button（ "action"、params）]メソッド

[button_options]#

$（セレクター、コンテキスト）.button（オプション）メソッド

_button（options）_メソッドは、HTML要素をボタンとして扱うことを宣言します。 _options_パラメーターは、ボタンの動作と外観を指定するオブジェクトです。

構文

$(selector, context).button (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).button({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No.	Option & Description
1	disabled このオプションは、ボタンが_true_に設定されていることを無効にします。デフォルトでは、その値は false です。オプション-無効このオプションは、ボタンが_true_に設定されていることを無効にします。デフォルトでは、その値は false です。構文 `$( ".selector" ).button({ disabled: true });`
2	icons このオプションは、1つまたは2つのアイコンを_buttonに表示することを指定します。左側のプライマリアイコン、右側のセカンダリアイコン。プライマリアイコンはオブジェクトの_primary_プロパティによって識別され、_secondary_アイコンはセカンダリプロパティによって識別されます。デフォルトでは、その値は primary：null、secondary：null です。オプション-アイコンこのオプションは、1つまたは2つのアイコンを_buttonに表示することを指定します。左側のプライマリアイコン、右側のセカンダリアイコン。プライマリアイコンはオブジェクトの_primary_プロパティによって識別され、_secondary_アイコンはセカンダリプロパティによって識別されます。デフォルトでは、その値は primary：null、secondary：null です。構文 `$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });`
3	label このオプションは、自然ラベルを上書きするボタンに表示するテキストを指定します。省略した場合、要素の自然なラベルが表示されます。ラジオボタンとチェックボックスの場合、自然なラベルはコントロールに関連付けられた<label>要素です。デフォルトでは、その値は null です。オプション-ラベルこのオプションは、自然ラベルを上書きするボタンに表示するテキストを指定します。省略した場合、要素の自然なラベルが表示されます。ラジオボタンとチェックボックスの場合、自然なラベルはコントロールに関連付けられた<label>要素です。デフォルトでは、その値は null です。構文 `$( ".selector" ).button({ label: "custom label" });`
4	text このオプションは、テキストをボタンに表示するかどうかを指定します。 _false_として指定されている場合、アイコンオプションで少なくとも1つのアイコンが指定されている場合にのみテキストが抑制されます。デフォルトでは、その値は true です。オプション-テキストこのオプションは、テキストをボタンに表示するかどうかを指定します。 _false_として指定されている場合、アイコンオプションで少なくとも1つのアイコンが指定されている場合にのみテキストが抑制されます。デフォルトでは、その値は true です。構文 `$( ".selector" ).button({ text: false });`

デフォルトの機能

次の例は、* button（）*メソッドにパラメーターを渡さないボタンウィジェット機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>

   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>

上記のコードをHTMLファイル buttonexample に保存し、JavaScriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

この例は、ボタンに使用できるマークアップ、ボタン要素、送信タイプの入力、アンカーを示しています。

アイコン、テキスト、および無効の使用

次の例は、JqueryUIのボタン関数での2つのオプション icons 、 text および disabled の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>

   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>

上記のコードをHTMLファイル buttonexample に保存し、JavaScriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

ここでは、アイコンのみのボタン、2つのアイコンのボタン、および無効なボタンを見ることができます。

[button_methods]#

$（セレクター、コンテキスト）.button（ "action"、params）メソッド

_button（ "action"、params）_メソッドは、ボタンを無効にするなど、ボタンに対してアクションを実行できます。アクションは、最初の引数で文字列として指定されます（たとえば、ボタンを無効にするには「無効」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).button ("action", params);

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).button("destroy");
$( ".selector" ).button("disable");
$( ".selector" ).button("enable");
var isDisabled = $( ".selector" ).button( "option", "disabled" );
$( ".selector" ).button("option");
$( ".selector" ).button( "option", "disabled", true );
$( ".selector" ).button( "option", { disabled: true } );
$( ".selector" ).button("refresh");
$( ".selector" ).button("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_destroy（）_および_disable（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>

   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>

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

ボタンのイベント管理

前のセクションで見たボタン（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

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

例

次の例は、ボタンウィジェット機能のイベントメソッドの使用方法を示しています。この例は、_create_イベントの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>

      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result")l ($("p#result")
                  l () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>

   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

上記のコードをHTMLファイル buttonexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

JqueryUI-日付ピッカー

jQueryUIのDatepickerにより、ユーザーは日付を簡単かつ視覚的に入力できます。日付の形式と言語をカスタマイズし、選択可能な日付範囲を制限し、ボタンやその他のナビゲーションオプションを簡単に追加できます。

jQueryUIには、日付ピッカーを作成し、新しいCSSクラスを追加してページ上のHTML要素の外観を変更する* datepicker（）*メソッドが用意されています。ラップされたセットの<input>、<div>、および<span>要素をdatepickerコントロールに変換します。

'_デフォルトでは、<input>要素の場合、関連付けられたテキストフィールドにフォーカスが移動すると、datepickerカレンダーが小さなオーバーレイで開きます。インラインカレンダーの場合は、日付ピッカーを<div>または<span>要素に添付するだけです。_

構文

datepicker（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_datepicker＃datepicker_options [$（selector、context）.datepicker（options）]メソッド
link：/jqueryui/jqueryui_datepicker＃datepicker_methods [$（selector、context）.datepicker（ "action"、[params]）]メソッド

[datepicker_options]#

$（セレクター、コンテキスト）.datepicker（オプション）メソッド

datepicker（オプション）オプション

構文

$(selector, context).datepicker(options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).datepicker({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$(".selector").datepicker(
   { altField: "#actualDate" }
);
$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
$(".selector").datepicker(
   { autoSize: true }
);


$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);
$(".selector").datepicker(
   { buttonImageOnly: true }
);
$(".selector").datepicker(
   { buttonText: "Choose" }
);
$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);
$(".selector").datepicker(
   { changeMonth: true }
);
$(".selector").datepicker(
   { changeYear: true }
);
$(".selector").datepicker(
   { closeText: "Close" }
);
$(".selector").datepicker(
   { constrainInput: false }
);
$(".selector").datepicker(
   { currentText: "Now" }
);
$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);
$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);
$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);
$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);
$(".selector").datepicker(
   { defaultDate: +7 }
);
$(".selector").datepicker(
   { duration: "slow" }
);
$(".selector").datepicker(
   { firstDay: 1 }
);
$(".selector").datepicker(
   { gotoCurrent: true }
);
$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);
$(".selector").datepicker(
   { isRTL: true }
);
$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);
$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);
$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);
$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);
$(".selector").datepicker(
   { navigationAsDateFormat: true }
);
$(".selector").datepicker(
   {  nextText: "Later" }
);
$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);



$(".selector").datepicker(
   { prevText: "Earlier" }
);
$(".selector").datepicker(
   { selectOtherMonths: true }
);
$(".selector").datepicker(
   { shortYearCutoff: 50 }
);
$(".selector").datepicker(
   { showAnim: "fold" }
);
$(".selector").datepicker(
   { showButtonPanel: true }
);
$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);
$(".selector").datepicker(
   { showMonthAfterYear: true }
);
$(".selector").datepicker(
   { showOn: "both" }
);
$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);
$(".selector").datepicker(
   { showOtherMonths: true }
);
$(".selector").datepicker(
   { showWeek: true }
);
$(".selector").datepicker(
   { stepMonths: 3 }
);
$(".selector").datepicker(
   { weekHeader: "W" }
);
$(".selector").datepicker(
   { yearRange: "2002:2012" }
);
$(".selector").datepicker(
   { yearSuffix: "CE" }
);

次のセクションでは、datepicker機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* datepicker（）*メソッドにパラメーターを渡さないdatepicker機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

インライン日付ピッカー

次の例は、インライン日付ピッカー機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、<div>要素を使用してインライン日付ピッカーを取得します。

appendText、dateFormat、altField、altFormatの使用

次の例は、JqueryUIのdatepicker関数での3つの重要なオプション*（a）appendText（b）dateFormat * （c）altField *および（d）altFormat *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、最初の入力の日付形式が_yy-mm-dd_として設定されていることがわかります。 datepickerから何らかの日付を選択すると、日付形式が「DD、d MM、yy」に設定されている2番目の入力フィールドに同じ日付が反映されます。

beforeShowDayの使用

次の例は、JqueryUIのdatepicker関数でオプション beforeShowDay を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                 //0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、日曜日と土曜日が無効になっています。

showOn、buttonImage、およびbuttonImageOnlyの使用

次の例は、JqueryUIのdatepicker関数での3つの重要なオプション*（a）showOn（b）buttonImage および（c）buttonImageOnly *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、日付ピッカーを開くにはbをクリックする必要があるアイコンが表示されます。

defaultDate、dayNamesMin、およびdurationの使用

次の例は、JqueryUIのdatepicker関数での3つの重要なオプション*（a）dayNamesMin（b）dayNamesMin および（c）duration *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、_dayNamesMin_を使用して曜日の名前が変更されています。デフォルトの日付が設定されていることも確認できます。

prevText、nextText、showOtherMonthsおよびselectOtherMonthsの使用

次の例は、JqueryUIのdatepicker関数の3つの重要なオプション*（a）prevText（b）nextText（c）showOtherMonths および（d）selectOtherMonths *の使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>
      <!-- Javascript -->

      <script>
         $(function() {
            $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、prevおよびnectリンクにキャプションがあります。要素をクリックすると、日付ピッカーが開きます。最初の日付ピッカーでは、selectOtherMonthsがsetfalseであるため、他の月の日付は無効になっています。 2番目の入力タイプの2番目の日付ピッカーでは、selectOtherMonthsがtotrueに設定されます。

changeMonth、changeYear、numberOfMonthsの使用

次の例は、JqueryUIのdatepicker関数での3つの重要なオプション*（a）changeMonth（b）changeYear および（c）numberOfMonths *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、月と年のフィールドのドロップダウンメニューを見ることができます。そして、[2,2]の配列構造で4か月を失望しています。

showWeek、yearSuffix、showAnimの使用

次の例は、JqueryUIのdatepicker関数での3つの重要なオプション*（a）showWeek（b）yearSuffix および（c）showAnim *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、_showWeek_が_true_に設定されているため、datepickerの左側に週番号が表示されていることがわかります。年の接尾辞は「-CE」です。

[datepicker_methods]#

$（セレクター、コンテキスト）.datepicker（ "action"、[params]）メソッド

_datepicker（action、params）_メソッドは、カレンダーで新しい日付の選択などのアクションを実行できます。 action は最初の引数で文字列として指定され、オプションで、指定されたアクションに基づいて1つ以上の params を提供できます。

'_基本的に、ここでのアクションは何もありませんが、文字列の形で使用できるjQueryメソッドです。_

構文

$(selector, context).datepicker ("action", [params]);

次の表は、このメソッドのアクションを示しています-


$(".selector").datepicker("destroy");
$(".selector").datepicker( "dialog", "10/12/2012" );
$(".selector").datepicker("getDate");
$(".selector").datepicker("hide");
$(".selector").datepicker("isDisabled");
$(".selector").datepicker( "option", "disabled");
var options = $( ".selector" ).datepicker( "option" );
$(".selector").datepicker( "option", "disabled", true );
$(".selector").datepicker("option", { disabled: true });
$(".selector").datepicker("refresh");
$(".selector").datepicker("setDate", "10/12/2012");
$(".selector").datepicker("show");
$(".selector").datepicker("widget");

次の例は、上の表にリストされているアクションのいくつかの使用法を示しています。

setDate（）アクションの使用

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_setDate_アクションの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

show（）アクションの使用

次の例は、アクション_show_の使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

上記のコードをHTMLファイル datepickerexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

日付ピッカー要素のイベント管理

現在、datepickerイベントメソッドはありません！

JqueryUI-ダイアログ

ダイアログボックスは、HTMLページに情報を表示する優れた方法の1つです。ダイアログボックスは、タイトルとコンテンツ領域を備えたフローティングウィンドウです。このウィンドウは、デフォルトで「X」アイコンを使用して移動、サイズ変更、およびもちろん閉じることができます。

jQueryUIは、ダイアログボックスを表示するために、ページに記述されたHTMLコードをHTMLコードに変換する* dialog（）*メソッドを提供します。

構文

dialog（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_dialog＃dialog_options [$（selector、context）.dialog（options）]メソッド
link：/jqueryui/jqueryui_dialog＃dialog_methods [$（selector、context）.dialog（ "action"、[params]）]メソッド

[dialog_options]#

$（セレクター、コンテキスト）.dialog（オプション）メソッド

ダイアログ（オプション）オプション

構文

$(selector, context).dialog(options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).dialog({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$(".selector").dialog(
   { appendTo: "#identifier" }
);
$(".selector").dialog(
   { autoOpen: false }
);
$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);
$(".selector").dialog(
   { closeOnEscape: false }
);
$(".selector").dialog(
   { closeText: "hide" }
);
$(".selector").dialog(
   { dialogClass: "alert" }
);
$(".selector").dialog(
   { draggable: false }
);
$(".selector").dialog(
   { height: 400 }
);
$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
$(".selector").dialog(
   { maxHeight: 600 }
);
$(".selector").dialog(
   { maxWidth: 600 }
);
$(".selector").dialog(
   { minHeight: 200 }
);
$(".selector").dialog(
   { minWidth: 200 }
);
$(".selector").dialog(
   { modal: true }
);
$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
$(".selector").dialog(
   { resizable: false }
);
$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);
$(".selector").dialog(
   { title: "Dialog Title" }
);
$(".selector").dialog(
   { width: 500 }
);

次のセクションでは、ダイアログ機能の実際の例をいくつか示します。

デフォルトの機能

次の例は、* dialog（）*メソッドにパラメーターを渡さないダイアログ機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "dialog-1"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ボタン、タイトル、位置の使用

次の例は、JqueryUIのダイアログウィジェットでの3つのオプション*ボタン*、*タイトル*および*位置*の使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

hide、show、heightの使用

次の例は、JqueryUIのダイアログウィジェットで3つのオプション hide 、 show および height を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false,
               hide: "puff",
               show : "slide",
               height: 200
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

モーダルの使用

次の例は、JqueryUIのダイアログウィジェットでの3つのオプション*ボタン*、*タイトル*および*位置*の使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false,
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

$（セレクター、コンテキスト）.dialog（ "action"、[params]）メソッド

_dialog（action、params）_メソッドは、ダイアログボックスに対して、ボックスを閉じるなどのアクションを実行できます。 action は最初の引数で文字列として指定され、オプションで、指定されたアクションに基づいて1つ以上の params を提供できます。

'_基本的に、ここでのアクションは何もありませんが、文字列の形で使用できるjQueryメソッドです。_

構文

$(selector, context).dialog ("action", [params]);

次の表は、このメソッドのアクションを示しています-


$(".selector").dialog("close");
$(".selector").dialog("destroy");
$(".selector").dialog("isOpen");
$(".selector").dialog("moveToTop");
$(".selector").dialog("open");
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
var options = $( ".selector" ).dialog( "option" );
$(".selector").dialog( "option", "disabled", true );
$(".selector").dialog( "option", { disabled: true });
$(".selector").dialog("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、isOpen（）、_ open（）_、および_close（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>

   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

ダイアログボックスでのイベント管理

前のセクションで見たダイアログ（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$(".selector").dialog (
   beforeClose: function(event, ui) {}
);
$(".selector").dialog (
   close: function(event, ui) {}
);
$(".selector").dialog (
   create: function(event, ui) {}
);
$(".selector").dialog (
   drag: function(event, ui) {}
);
$(".selector").dialog (
   dragStart: function(event, ui) {}
);
$(".selector").dialog (
   dragStop: function(event, ui) {}
);
$(".selector").dialog (
   focus: function(event, ui) {}
);
$(".selector").dialog (
   open: function(event, ui) {}
);
$(".selector").dialog (
   resize: function(event, ui) {}
);
$(".selector").dialog (
   resizeStart: function(event, ui) {}
);
$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

次の例は、上記の表にリストされているイベントの使用法を示しています。

beforeCloseイベントメソッドの使用

次の例は、 beforeClose イベントメソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>

      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
           autoOpen: false,
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the
         parties with respect to the subject matter of the Request. This Agreement shall be
         governed by and construed in accordance with the laws of the State, without giving
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

resize Eventメソッドの使用

次の例は、 resize イベントメソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false,
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
             ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>

   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

上記のコードをHTMLファイル dialogexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

拡張ポイント

ダイアログウィジェットは、ウィジェットファクトリで構築されており、拡張できます。ウィジェットを拡張するには、既存のメソッドの動作をオーバーライドまたは追加できます。次のメソッドは、ダイアログメソッドと同じAPI安定性を拡張ポイントとして提供します。リンク：/jqueryui/jqueryui_dialog＃dialog_methods [上記の表]にリストされています。

Sr.No. Method & Description

1

_allowInteraction(event)

このメソッドを使用すると、ユーザーはダイアログの子ではないがユーザーは使用できるようにする要素をホワイトリストに登録することで、指定されたターゲット要素と対話できます。ここで、_event_は_Event_型です。

拡張ポイント-allowInteraction（event、ui）

このメソッドを使用すると、ユーザーはダイアログの子ではないがユーザーは使用できるようにする要素をホワイトリストに登録することで、指定されたターゲット要素と対話できます。ここで、_event_は_Event_型です。

コード例

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" )

this._super( event ); } ----

Select2プラグインはモーダルダイアログ内で使用されます * super（）呼び出しは、ダイアログ内の要素が引き続き対話できるようにします。

'_jQuery UIウィジェットファクトリは、jQuery UIのすべてのウィジェットが構築される拡張可能なベースです。ウィジェットファクトリを使用してプラグインを作成すると、状態管理に便利なだけでなく、プラグインメソッドの公開やインスタンス化後のオプションの変更などの一般的なタスクの規則が提供されます。_

JqueryUI-メニュー

メニューウィジェットは通常、ポップアップメニューのあるメインメニューバーで構成されます。ポップアップメニューの項目には、多くの場合、サブポップアップメニューがあります。親子関係が維持されている限り、マークアップ要素を使用してメニューを作成できます（<ul>または<ol>を使用）。各メニュー項目にはアンカー要素があります。

jQueryUIのメニューウィジェットは、インラインメニューやポップアップメニューに使用したり、より複雑なメニューシステムを構築するためのベースとして使用したりできます。たとえば、カスタム配置でネストされたメニューを作成できます。

jQueryUIは、メニューを作成するmenu（）メソッドを提供します。

構文

menu（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_menu＃menu_options [$（selector、context）.menu（options）]メソッド
link：/jqueryui/jqueryui_menu＃menu_methods [$（selector、context）.menu（ "action"、params）]メソッド

[menu_options]#

$（セレクター、コンテキスト）.menu（オプション）メソッド

_menu（options）_メソッドは、HTML要素とそのコンテンツをメニューとして扱い、管理する必要があることを宣言します。 _options_パラメーターは、関連するメニュー項目の外観と動作を指定するオブジェクトです。

構文

$(selector, context).menu (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).menu({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).menu (
   { disabled: true }
);
$( ".selector" ).menu (
   { icons: { submenu: "ui-icon-circle-triangle-e" } }
);
$( ".selector" ).menu (
   { menus: "div" }
);
$( ".selector" ).menu (
   { position: { my: "left top", at: "right-5 top+5" } }
);
$( ".selector" ).menu (
   { role: null }
);

デフォルトの機能

次の例は、* menu（）*メソッドにパラメーターを渡さないメニューウィジェット機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->

      <script>
         $(function() {
            $( "#menu-1" ).menu();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <ul id = "menu-1">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

上記のコードをHTMLファイル menuexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、ナビゲーションのためのマウスとキーボードの相互作用があるテーマ可能なメニューを見ることができます。

アイコンと位置の使用

次の例は、JqueryUIのメニュー関数での2つのオプション icons および position の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-2" ).menu({
               icons: { submenu: "ui-icon-circle-triangle-e"},
               position: { my: "right top", at: "right-10 top+5" }
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <ul id = "menu-2">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

上記のコードをHTMLファイル menuexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、サブメニューリストにアイコン画像を適用し、サブメニューの位置を変更したことがわかります。

[menu_methods]#

$（セレクター、コンテキスト）.menu（ "action"、params）メソッド

_menu（ "action"、params）_メソッドは、メニューの有効化/無効化などのメニュー要素に対するアクションを実行できます。アクションは、最初の引数で文字列として指定されます（たとえば、「disable」はメニューを無効にします）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).menu ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$(".selector").menu( "blur" );
$(".selector").menu( "collapse" );
$(".selector").menu( "collapseAll", null, true );
$(".selector").menu( "destroy" );
$(".selector").menu( "disable" );
$(".selector").menu( "enable" );
$(".selector").menu( "expand" );
$(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );
$(".selector").menu( "isFirstItem" );
$(".selector").menu( "isLastItem" );
$(".selector").menu( "next" );
$(".selector").menu( "nextPage" );
var isDisabled = $( ".selector" ).menu( "option", "disabled" );
var options = $( ".selector" ).menu( "option" );
$(".selector").menu( "option", "disabled", true );
$(".selector").menu( "option", { disabled: true } );
$(".selector").menu( "previous" );
$(".selector").menu( "previousPage" );
$(".selector").menu( "refresh" );
$(".selector").menu( "select" );
$(".selector").menu( "widget" );

次の例は、上記の表に示されているアクションの使用方法を示しています。

無効化メソッドの使用

次の例は、_disable（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->

      <script>
         $(function() {
            $( "#menu-3" ).menu();
            $( "#menu-3" ).menu("disable");
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <ul id = "menu-3">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

上記のコードをHTMLファイル menuexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

上記の例では、メニューが無効になっていることがわかります。

focusおよびcollapseAllメソッドの使用

次の例は、_focus（）_および_collapseAll_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            var menu = $("#menu-4").menu();
            $( "#menu-4" ).menu(
               "focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
            $(menu).mouseleave(function () {
               menu.menu('collapseAll');
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <ul id = "menu-4">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
   </body>
</html>

上記のコードをHTMLファイル menuexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

上記の例では、フォーカスが最後のメニュー項目にあることがわかります。ここでサブメニューを展開し、マウスがサブメニューを離れると、サブメニューが閉じます。

メニュー要素のイベント管理

前のセクションで見たメニュー（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

Sr.No.	Event Method & Description
1	blur(event, ui) このイベントは、メニューがフォーカスを失ったときにトリガーされます。イベント-blur（event、ui）このイベントは、メニューがフォーカスを失ったときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型であり、現在アクティブなメニュー項目を表します。構文 `$( ".selector" ).menu({ blur: function( event, ui ) {} });`
2	create(event, ui) このイベントは、メニューが作成されるとトリガーされます。イベント-create（event、ui）このイベントは、メニューが作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).menu({ create: function( event, ui ) {} });`
3	focus(event, ui) このイベントは、メニューがフォーカスを取得したとき、またはメニュー項目がアクティブになったときにトリガーされます。イベント-focus（event、ui）このイベントは、メニューがフォーカスを取得したとき、またはメニュー項目がアクティブになったときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型であり、現在アクティブなメニュー項目を表します。構文 `$( ".selector" ).menu({ focus: function( event, ui ) {} });`
4	select(event, ui) このイベントは、メニュー項目が選択されるとトリガーされます。イベント-select（event、ui）このイベントは、メニュー項目が選択されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型であり、現在アクティブなメニュー項目を表します。構文 `$( ".selector" ).menu({ select: function( event, ui ) {} });`

例

次の例は、メニューウィジェット機能のイベントメソッドの使用方法を示しています。この例は、create _、 blur 、 focus_イベントの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-5" ).menu({
               create: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Create event<br>" );
               },
               blur: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Blur event<br>" );
               },
               focus: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "focus event<br>" );
               }
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <ul id = "menu-5">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
      <span id = "result"></span>
   </body>
</html>

上記のコードをHTMLファイル menuexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

上記の例では、トリガーされたイベントに基づいてメッセージを出力しています。

JqueryUI-プログレスバー

進行状況バーは、操作またはプロセスの完了率を示します。進行状況バーを*確定的な進行状況バー*および*不確定な進行状況バー*に分類できます。

進行状況バーの決定*は、システムが現在のステータスを正確に更新できる状況でのみ使用してください。確定的な進行状況バーは、左から右に塗りつぶされてから、単一のプロセスで空にループバックすることはありません。

実際のステータスを計算できない場合は、*不確定プログレスバー*を使用してユーザーフィードバックを提供する必要があります。

jQueryUIは使いやすいプログレスバーウィジェットを提供します。このウィジェットを使用して、アプリケーションが要求された操作を実行するのが難しいことをユーザーに知らせることができます。 jQueryUIは、プログレスバーを作成するためのprogressbar（）メソッドを提供します。

構文

progressbar（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_progressbar＃progressbar_options [$（selector、context）.progressbar（options）]メソッド
link：/jqueryui/jqueryui_progressbar＃progressbar_methods [$（selector、context）.progressbar（ "action"、params）]メソッド

[progressbar_options]#

$（セレクター、コンテキスト）.progressbar（オプション）メソッド

_progressbar（options）_メソッドは、HTML要素をプログレスバーの形式で管理できることを宣言します。 _options_パラメーターは、進行状況バーの外観と動作を指定するオブジェクトです。

構文

$(selector, context).progressbar (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).progressbar({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No. Option & Description

1

disabled

このオプションを_true_に設定すると、進行状況バーが無効になります。デフォルトでは、その値は false です。

オプション-無効

このオプションを_true_に設定すると、進行状況バーが無効になります。デフォルトでは、その値は false です。

構文

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

2

max

このオプションは、プログレスバーの最大値を設定します。デフォルトでは、その値は 100 です。

オプション-最大

このオプションは、プログレスバーの最大値を設定します。デフォルトでは、その値は 100 です。

構文

$( ".selector" ).progressbar({ max: 500});

3

value

このオプションは、プログレスバーの初期値を指定します。デフォルトでは、その値は 0 です。

オプション-値

このオプションは、プログレスバーの初期値を指定します。デフォルトでは、その値は 0 です。

構文

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

次のセクションでは、プログレスバー機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* progressbar（）*メソッドにパラメーターを渡さない、プログレスバー機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>

      <script>
         $(function() {
            $( "#progressbar-1" ).progressbar({
               value: 30
            });
         });
      </script>
   </head>

   <body>
      <div id = "progressbar-1"></div>
   </body>
</html>

上記のコードをHTMLファイル progressbarexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

この例は、_progressbar（）_メソッドを使用したプログレスバーの作成を示しています。これはデフォルトの確定プログレスバーです。

最大値と値の使用

次の例は、JqueryUIのprogressbar関数で2つのオプション values および max を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>

      <script>
         $(function() {
            var progressbar = $( "#progressbar-2" );
            $( "#progressbar-2" ).progressbar({
               value: 30,
               max:300
            });
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>

   <body>
      <div id = "progressbar-2"></div>
   </body>
</html>

上記のコードをHTMLファイル progressbarexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ここでは、進行状況バーが右から左に塗りつぶされ、値が300に達すると停止することがわかります。

[progressbar_methods]#

$（セレクター、コンテキスト）.progressbar（ "action"、params）メソッド

_progressbar（ "action"、params）_メソッドは、満たされたパーセンテージの変更など、プログレスバーでアクションを実行できます。アクションは、最初の引数の文字列として指定されます（例：満たされた割合を変更するための「値」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).progressbar ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-

シニア

アクションと説明

1

link：#action_destroy [destroy]

このアクションにより、要素の進行状況バー機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。

アクション-破壊

このアクションにより、要素の進行状況バー機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。

構文

$( ".selector" ).progressbar("destroy");

2

link：#action_destroy [destroy]

このアクションにより、要素の進行状況バー機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。

アクション-破壊

このアクションにより、要素の進行状況バー機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。

構文

$( ".selector" ).progressbar("destroy");

3

link：#action_disable [disable]

このアクションは、要素の進行状況バー機能を無効にします。このメソッドは引数を取りません。

アクション-無効

このアクションは、要素の進行状況バー機能を無効にします。このメソッドは引数を取りません。

構文

$( ".selector" ).progressbar("disable");

4

link：#action_enable [enable]

このアクションにより、進行状況バー機能が有効になります。このメソッドは引数を取りません。

アクション-有効

このアクションにより、進行状況バー機能が有効になります。このメソッドは引数を取りません。

構文

$( ".selector" ).progressbar("enable");

5

link：#action_optionName [option（optionName）]

このアクションは、指定された_optionName_に現在関連付けられている値を取得します。ここで、_optionName_は文字列です。

アクション-option（optionName）

このアクションは、指定された_optionName_に現在関連付けられている値を取得します。ここで、_optionName_は文字列です。

構文

var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );

6

link：#action_option [option]

このアクションは、現在のプログレスバーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。

アクション-オプション

このアクションは、現在のプログレスバーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。

構文

var options = $( ".selector" ).progressbar( "option" );

7

link：#action_optionName_value [option（optionName、value）]

このアクションは、指定された_optionName_に関連付けられたprogressbarオプションの値を設定します。

アクション-option（optionName、value）

このアクションは、指定された_optionName_に関連付けられたprogressbarオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。

構文

$( ".selector" ).progressbar( "option", "disabled", true );

8

link：#action_options [option（options）]

このアクションは、進行状況バーの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。

アクション-オプション（オプション）

このアクションは、進行状況バーの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。

構文

( ".selector" ).progressbar( "option", { disabled: true } );

9

link：#action_value [value]

このアクションは、_options.value_の現在の値、つまり進行状況バーの塗りつぶしの割合を取得します。

アクション-値

このアクションは、_options.value_の現在の値、つまり進行状況バーの塗りつぶしの割合を取得します。

構文

$( ".selector" ).progressbar("value");

10

link：#action_value_value [value（value）]

このアクションは、プログレスバーに入力されたパーセンテージに新しい値を指定します。引数_value_は、数値またはブール値にすることができます。

アクション-値（値）

このアクションは、プログレスバーに入力されたパーセンテージに新しい値を指定します。引数_value_は、数値またはブール値にすることができます。

構文

$( ".selector" ).progressbar( "value", 50 );

11

link：#action_widget [widget]

このアクションは、プログレスバーを含むjQueryオブジェクトを返します。このメソッドは引数を取りません。

アクション-ウィジェット

このアクションは、プログレスバーを含むjQueryオブジェクトを返します。このメソッドは引数を取りません。

構文

$( ".selector" ).progressbar("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_disable（）_および_option（optionName、value）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>

      <script>
         $(function() {
            $( "#progressbar-3" ).progressbar({
               value: 30
            });
            $( "#progressbar-3" ).progressbar('disable');
            $( "#progressbar-4" ).progressbar({
               value: 30
            });
            var progressbar = $( "#progressbar-4" );
            $( "#progressbar-4" ).progressbar( "option", "max", 1024 );
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>

   <body>
      <h3>Disabled Progressbar</h3>
      <div id = "progressbar-3"></div><br>
      <h3>Progressbar with max value set</h3>
      <div id = "progressbar-4"></div>
   </body>
</html>

上記のコードをHTMLファイル progressbarexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も確認する必要があります-

無効な進行状況バー

===== Progress bar with max value set

=== Event Management on progress bar elements

前のセクションで見たprogressbar（options）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

Sr.No. Event Method & Description

1

change(event, ui)

このイベントは、進行状況バーの値が変更されるたびにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-change（event、ui）

このイベントは、進行状況バーの値が変更されるたびにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文

$( ".selector" ).progressbar({
   change: function( event, ui ) {}
});

2

complete(event, ui)

このイベントは、プログレスバーが最大値に達するとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-完了（イベント、UI）

>このイベントは、プログレスバーが最大値に達するとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文

$( ".selector" ).progressbar({
   complete: function( event, ui ) {}
});

3

create(event, ui)

このイベントは、progressbarが作成されるたびにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-create（event、ui）

このイベントは、progressbarが作成されるたびにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文

$( ".selector" ).progressbar({
   create: function( event, ui ) {}
});

例

次の例は、プログレスバー機能中のイベントメソッドの使用方法を示しています。この例は、イベント_change_および_complete_の使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
         .progress-label {
            position: absolute;
            left: 50%;
            top: 13px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
         }
      </style>

      <script>
         $(function() {
            var progressbar = $( "#progressbar-5" );
            progressLabel = $( ".progress-label" );
            $( "#progressbar-5" ).progressbar({
               value: false,
               change: function() {
                  progressLabel.text(
                     progressbar.progressbar( "value" ) + "%" );
               },
               complete: function() {
                  progressLabel.text( "Loading Completed!" );
               }
            });
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>

   <body>
      <div id = "progressbar-5">
         <div class = "progress-label">
            Loading...
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル progressbarexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も確認する必要があります-

ここでは、プログレスバーが変更されると、変更された値が出力され、イベントが完了すると「Loading Completed！」が表示されます。メッセージが表示されます。

link：/index [Tutorials Point、title = "Tutorials Point"]

リンク：/about/index [__私たちについて]
リンク：/about/about_terms_of_use [__利用規約]
リンク：/about/about_privacy [__プライバシーポリシー]
リンク：/about/faq [__ FAQ’s]
リンク：/about/about_helping [__ Helping]
リンク：/about/contact_us [__連絡先]

JqueryUI-スライダー

_slider_は、特定の範囲内の数値を取得する場合に使用されます。テキスト入力に対するスライダーの利点は、ユーザーが間違った値を入力することが不可能になることです。スライダーで選択できる値はすべて有効です。

jQueryUIは、スライダーウィジェットを介してスライダーコントロールを提供します。 jQueryUIは、ページ内のHTML要素の外観を変更するSlider（）メソッドを提供し、適切なスタイルを与える新しいCSSクラスを追加します。

構文

スライダー（）*メソッドは2つの形式で使用することができます-

link：/jqueryui/jqueryui_slider＃slider_options [$（selector、context）.slider（options）]メソッド
link：/jqueryui/jqueryui_slider＃slider_methods [$（selector、context）.slider（ "action"、params）]メソッド

[slider_options]#

$（セレクター、コンテキスト）.slider（オプション）メソッド

_slider（options）_メソッドは、HTML要素をスライダーとして管理する必要があることを宣言します。 _options_パラメーターは、スライダーの外観と動作を指定するオブジェクトです。

構文

$(selector, context).slider (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).slider({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).slider(
   { animate: "fast" }
);
$( ".selector" ).slider(
   { disabled: true }
);
$( ".selector" ).slider(
   { max: 50 }
);
$( ".selector" ).slider(
   { min: 10 }
);
$( ".selector" ).slider(
   { "option", "orientation" }
);
$( ".selector" ).slider(
   { range: true }
);
$( ".selector" ).slider(
   { step: 5 }
);
$( ".selector" ).slider(
   { value: 10 }
);
$( ".selector" ).slider(
   { values: [ 10, 25 ] }
);

次のセクションでは、スライダー機能のいくつかの実用的な例を示します。

デフォルトの機能

次の例は、* slider（）*メソッドにパラメーターを渡さない、スライダー機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-1" ).slider();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "slider-1"></div>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、基本的な水平スライダーであり、マウスまたは矢印キーを使用して移動できる単一のハンドルがあります。

価値、アニメーション、向きの使用

次の例は、JqueryUIのスライダー関数での3つのオプション*（a）値（b）animate および（c）orientation *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-2" ).slider({
               value: 60,
               animate:"slow",
               orientation: "horizontal"
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "slider-2"></div>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、スライダーの_value_、つまり初期値が60に設定されているため、初期値60のハンドルが表示されます。軸を直接クリックして、アニメーション効果を確認してください。

範囲、最小、最大、および値の使用

次の例は、JqueryUIのスライダー関数での3つのオプション*（a）範囲、（b）min 、（c）max 、および（d）値*の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-3" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               slide: function( event, ui ) {
                  $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
            });
            $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
               " - $" + $( "#slider-3" ).slider( "values", 1 ) );
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>
         <label for = "price">Price range:</label>
         <input type = "text" id = "price"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-3"></div>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、範囲オプションをtrueに設定して、2つのドラッグハンドルで値の範囲をキャプチャしました。ハンドル間のスペースは、これらの値が選択されていることを示すために異なる背景色で塗りつぶされます。

[slider_methods]#

$（セレクター、コンテキスト）.slider（ "action"、params）メソッド

_slider（ "action"、params）_メソッドを使用すると、カーソルを新しい場所に移動するなど、スライダーでアクションを実行できます。アクションは、最初の引数に文字列として指定されます（たとえば、カーソルの新しい値を示す「値」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).slider ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).slider("destroy");
$( ".selector" ).slider("disable");
$( ".selector" ).slider("enable");
var isDisabled = $( ".selector" ).slider( "option", "disabled" );
var options = $( ".selector" ).slider( "option" );
$( ".selector" ).slider( "option", "disabled", true );
$( ".selector" ).slider( "option", { disabled: true } );
$( ".selector" ).slider("value");
$( ".selector" ).slider( "value", 55 );
var values = $( ".selector" ).slider( "values" );
var value = $( ".selector" ).slider( "values", 0 );
$( ".selector" ).slider( "values", 0, 55 );
$( ".selector" ).slider( "values", [ 55, 105 ] );
var widget = $( ".selector" ).slider( "widget" );

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_disable（）_および_value（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-4" ).slider({
               orientation:"vertical"
            });
            $( "#slider-4" ).slider('disable');
            $( "#slider-5" ).slider({
               orientation:"vertical",
               value:50,
               slide: function( event, ui ) {
                  $( "#minval" ).val( ui.value );
               }
            });
            $( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "slider-4"></div>
      <p>
         <label for = "minval">Minumum value:</label>
         <input type = "text" id = "minval"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-5"></div>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

上記の例では、最初のスライダーが無効になり、2番目のスライダーの値が50に設定されます。

スライダー要素のイベント管理

前のセクションで見たスライダー（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).slider({
   change: function( event, ui ) {}
});
$( ".selector" ).slider({
   create: function( event, ui ) {}
});
$( ".selector" ).slider({
   slide: function( event, ui ) {}
});
$( ".selector" ).slider({
   start: function( event, ui ) {}
});
$( ".selector" ).slider({
   stop: function( event, ui ) {}
});

例

次の例は、スライダー機能中のイベントメソッドの使用方法を示しています。この例は、start _、 stop 、 change_、および_slide_イベントの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-6" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               start: function( event, ui ) {
                  $( "#startvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               stop: function( event, ui ) {
                  $( "#stopvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               change: function( event, ui ) {
                  $( "#changevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               slide: function( event, ui ) {
                  $( "#slidevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "slider-6"></div>
      <p>
         <label for = "startvalue">Start:</label>
         <input type = "text" id = "startvalue"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "stopvalue">Stop:</label>
         <input type = "text" id = "stopvalue"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "changevalue">Change:</label>
         <input type = "text" id = "changevalue"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "slidevalue">Slide:</label>
         <input type = "text" id = "slidevalue"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

JqueryUI-スピナー

スピナーウィジェットは、入力ボックスの左に上/下矢印を追加するため、ユーザーは入力ボックスの値を増減できます。ユーザーは値を直接入力するか、キーボード、マウス、またはスクロールホイールで回転して既存の値を変更できます。値をスキップするステップ機能もあります。基本的な数値機能に加えて、グローバル化された書式設定オプション（通貨、千単位の区切り記号、小数など）も有効になるため、便利な国際化されたマスクエントリボックスが提供されます。

'__ 次の例は、Globalize_に依存しています。 Globalizeファイルはhttps://github.com/jquery/globalizeから取得できます。 _releases_リンクをクリックし、必要なバージョンを選択して、。zip_または_tar.gz_ファイルをダウンロードします。ファイルを抽出し、次のファイルをサンプルのあるフォルダーにコピーします。

lib/globalize.js：このファイルには、ローカライズを処理するためのJavascriptコードが含まれています
lib/globalize.culture.js：このファイルには、Globalizeライブラリに付属しているロケールの完全なセットが含まれています。

これらのファイルは、jquery-uiライブラリの_external_フォルダーにもあります。 '__

jQueryUIは、スピナーを作成するspinner（）メソッドを提供します。

構文

spinner（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_spinner＃spinner_options [$（selector、context）.spinner（options）]メソッド
link：/jqueryui/jqueryui_spinner＃spinner_methods [$（selector、context）.spinner（ "action"、params）]メソッド

[spinner_options]#

$（セレクター、コンテキスト）.spinner（オプション）メソッド

_spinner（オプション）_メソッドは、HTML要素とそのコンテンツをスピナーとして処理および管理する必要があることを宣言します。 _options_パラメーターは、関連するスピナー要素の外観と動作を指定するオブジェクトです。

構文

$(selector, context).spinner (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).spinner({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).spinner(
   { culture: "fr" }
);
$( ".selector" ).spinner(
   { disabled: true }
);
$( ".selector" ).spinner(
   { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);
$( ".selector" ).spinner(
   { incremental: false }
);
$( ".selector" ).spinner(
   { max: 50 }
);
$( ".selector" ).spinner(
   { min: 0 }
);
$( ".selector" ).spinner(
   { numberFormat: "n" }
);
$( ".selector" ).spinner(
   { page: 5 }
);
$( ".selector" ).spinner(
   { step: 2 }
);

次のセクションでは、スピナーウィジェットの機能のいくつかの実例を示します。

デフォルトの機能

次の例は、* spinner（）*メソッドにパラメーターを渡さない、スピナーウィジェット機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style type = "text/css">
         #spinner-1 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-1" ).spinner();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "example">
         <input type = "text" id = "spinner-1" value = "0"/>
      </div>
   </body>
</html>

上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

最小、最大、およびステップオプションの使用

次の例は、JqueryUIのスピナーウィジェットで3つのオプション min 、_ max 、 step_を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style type = "text/css">
         #spinner-2,#spinner-3 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-2" ).spinner({
               min: -10,
               max: 10
            });
            $('#spinner-3').spinner({
               step: 100,
               min: -1000000,
               max: 1000000
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "example">
         Spinner Min, Max value set:
         <input type = "text" id = "spinner-2" value = "0"/><br><br>
         Spinner increments/decrements in step of of 100:
         <input type = "text" id = "spinner-3" value = "0"/>
      </div>
   </body>
</html>

上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、最初のスピナーで最大値と最小値がそれぞれ10と-10に設定されていることがわかります。したがって、これらの値を超えると、スピナーはインクリメント/デクリメントを停止します。 2番目のスピナーでは、スピナーの値が100ずつ増加/減少します。

アイコンの使用オプション

次の例は、JqueryUIのスピナーウィジェットでオプション icons を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style type = "text/css">
         #spinner-5 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-5" ).spinner({
               icons: {
                  down: "custom-down-icon", up: "custom-up-icon"
               }
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "example">
         <input type = "text" id = "spinner-5" value = "0"/>
      </div>
   </body>
</html>

上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、画像スピナーが変更されていることがわかります。

カルチャ、numberFormat、およびページオプションの使用

次の例は、JqueryUIのスピナーウィジェットで3つのオプション culture 、_ numberFormat_および_page_を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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 src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>

      <script>
         $(function() {
            $( "#spinner-4" ).spinner({
               culture:"de-DE",
               numberFormat:"C",
               step:2,
               page:10
            });
         });
      </script>
   </head>

   <body>
      <p>
         <label for = "spinner-4">Amount to donate:</label>
         <input id = "spinner-4" name = "spinner" value = "5">
      </p>

   </body>
</html>

上記のコードをHTMLファイル spinnerexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、_numberFormat_が "C"に設定され、_culture_が "de-DE"に設定されているため、スピナーに通貨形式で数値が表示されています。ここでは、jquery-uiライブラリのGlobalizeファイルを使用しました。

[spinner_methods]#

$（セレクター、コンテキスト）.spinner（ "action"、params）メソッド

_spinner（ "action"、params）_メソッドは、スピナーの有効化/無効化など、スピナー要素に対してアクションを実行できます。アクションは、最初の引数で文字列として指定されます（たとえば、「disable」はスピナーを無効にします）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).spinner ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$(".selector").spinner("destroy");
$(".selector").spinner("disable");
$(".selector").spinner("enable");
var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
var options = $( ".selector" ).spinner( "option" );
$( ".selector" ).spinner( "option", "disabled", true );
$(".selector").spinner("option", { disabled: true });
$(".selector").spinner("pageDown");
$(".selector").spinner("pageUp");
$(".selector").spinner("stepDown");
$(".selector").spinner("stepUp");
var value = $( ".selector" ).spinner( "value" );
$( ".selector" ).spinner( "value", 50 );
$( ".selector" ).spinner( "widget");

次の例は、上記の表に示されているアクションの使用方法を示しています。

アクションstepUp、stepDown、pageUp、およびpageDownの使用

次の例は、_stepUp、stepDown、pageUp_および_pageDown_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style type = "text/css">
         #spinner-6 input {width: 100px}
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-6").spinner();
            $('button').button();

            $('#stepUp-2').click(function () {
               $("#spinner-6").spinner("stepUp");
            });

            $('#stepDown-2').click(function () {
               $("#spinner-6").spinner("stepDown");
            });

            $('#pageUp-2').click(function () {
               $("#spinner-6").spinner("pageUp");
            });

            $('#pageDown-2').click(function () {
               $("#spinner-6").spinner("pageDown");
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <input id = "spinner-6"/>
      <br/>
      <button id = "stepUp-2">Increment</button>
      <button id = "stepDown-2">Decrement</button>
      <button id = "pageUp-2">Increment Page</button>
      <button id = "pageDown-2">Decrement Page</button>
   </body>
</html>

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

上記の例では、それぞれのボタンを使用して、スピナーを増減します。

アクションの使用の有効化と無効化

次の例は、_enable_および_disable_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style type = "text/css">
         #spinner-7 input {width: 100px}
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-7").spinner();
            $('button').button();
            $('#stepUp-3').click(function () {
               $("#spinner-7").spinner("enable");
            });
            $('#stepDown-3').click(function () {
               $("#spinner-7").spinner("disable");
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <input id = "spinner-7"/>
      <br/>
      <button id = "stepUp-3">Enable</button>
      <button id = "stepDown-3">Disable</button>
   </body>
</html>

上記のコードをHTMLファイル spinnerexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

上記の例では、有効化/無効化ボタンを使用してスピナーを有効または無効にします。

スピナー要素のイベント管理

前のセクションで見たスピナー（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).spinner({
   change: function( event, ui ) {}
});
$( ".selector" ).spinner({
   create: function( event, ui ) {}
});
$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});
$( ".selector" ).spinner({
   start: function( event, ui ) {}
});
$( ".selector" ).spinner({
   stop: function( event, ui ) {}
});

例

次の例は、スピナーウィジェットでのイベントメソッドの使用方法を示しています。この例は、spin _、 change_、および_stop_イベントの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style type = "text/css">
         #spinner-8 input {width: 100px}
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-8" ).spinner({
               spin: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
               },
               change: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
               },
               stop: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
               }
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "example">
         <input type = "text" id = "spinner-8" value = "0"/>
      </div>
      <span id = "result-2"></span>
   </body>
</html>

上記のコードをHTMLファイル spinnerexample に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

上記の例では、スピナーの値を変更し、スピンおよび停止イベントについて以下に表示されるメッセージを確認します。スピナーのフォーカスを変更すると、変更イベントでメッセージが表示されます。

拡張ポイント

スピナーウィジェットは、ウィジェットファクトリで構築され、拡張できます。ウィジェットを拡張するには、既存のメソッドの動作をオーバーライドまたは追加できます。次のメソッドは、スピナーメソッドと同じAPI安定性を拡張ポイントとして提供します。 link：/jqueryui/jqueryui_spinner＃dialog_spinner [上記の表]にリストされています。

Sr.No. Method & Description

1

_buttonHtml(event)

このメソッドは、HTMLである文字列を返します。このHTMLは、スピナーの増分ボタンと減分ボタンに使用できます。関連付けられたイベントが機能するには、各ボタンにui-spinner-buttonクラス名を指定する必要があります。このメソッドは引数を取りません。

拡張ポイント-_buttonHtml（event、ui）

このメソッドは、HTMLである文字列を返します。このHTMLは、スピナーの増分ボタンと減分ボタンに使用できます。関連付けられたイベントが機能するには、各ボタンにui-spinner-buttonクラス名を指定する必要があります。このメソッドは引数を取りません。

コード例

_buttonHtml: function() {
  return "" +
    "" +
      "▲" +
    "" +
    "" +
      "▼" +
    "";
}

2

_uiSpinnerHtml(event)

このメソッドは、スピナーの<input>要素をラップするために使用するHTMLを決定します。このメソッドは引数を取りません。

拡張ポイント-_uiSpinnerHtml（event、ui）

このメソッドは、スピナーの<input>要素をラップするために使用するHTMLを決定します。このメソッドは引数を取りません。

コード例

_uiSpinnerHtml: function() {
  return "";
}

'_jQuery UIウィジェットファクトリは、jQuery UIのすべてのウィジェットが構築される拡張可能なベースです。ウィジェットファクトリを使用してプラグインを作成すると、状態管理に便利なだけでなく、プラグインメソッドの公開やインスタンス化後のオプションの変更などの一般的なタスクの規則が提供されます。_

JqueryUI-タブ

タブは、論理的にグループ化されたコンテンツのセットであり、それらをすばやく切り替えることができます。タブを使用すると、アコーディオンのようなスペースを節約できます。タブがマークアップのセットに従って正しく動作するためには、使用する必要があります-

タブは、ordered（<ol>）またはunordered（<ul>）のリストに含まれている必要があります。
各タブタイトルは各<li>内にあり、_href_属性を持つアンカー（<a>）タグでラップする必要があります。
各タブパネルには任意の有効な要素を指定できますが、関連するタブのアンカーのハッシュに対応する_id_が必要です。

jQueryUIは、tabs（）メソッドを提供して、ページ内のHTML要素の外観を大幅に変更します。このメソッドは（内部的にjQuery UIで）HTMLコードを走査し、関連する要素（ここではタブ）に新しいCSSクラスを追加して、適切なスタイルを与えます。

構文

タブ（）*メソッドは2つの形式で使用することができます-

link：/jqueryui/jqueryui_tabs＃tabs_options [$（selector、context）.tabs（options）]メソッド
link：/jqueryui/jqueryui_tabs＃tabs_methods [$（selector、context）.tabs（ "action"、params）]メソッド

[tabs_options]#

$（セレクター、コンテキスト）.tabs（オプション）メソッド

_tabs（options）_メソッドは、HTML要素とそのコンテンツをタブとして管理する必要があることを宣言します。 _options_パラメーターは、タブの外観と動作を指定するオブジェクトです。

構文

$(selector, context).tabs (options);

JavaScriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).tabs({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).tabs (
   { active: 1 }
);
$( ".selector" ).tabs (
   { collapsible: true }
);
$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
$( ".selector" ).tabs (
   { event: "mouseover" }
);
$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

次のセクションでは、タブ機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* tabs（）*メソッドにパラメーターを渡さない、タブ機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
         " rel = "stylesheet">
      <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() {
            $( "#tabs-1" ).tabs();
         });
      </script>

      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>

   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit
               amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit
               voluptatem accusantium doloremque laudantium, totam rem aperiam,
               eaque ipsa quae ab illo inventore veritatis et quasi architecto
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル tabsexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

上記の例では、タブをクリックしてコンテンツを切り替えます。

heightStyle、collapsible、hideの使用

次の例は、JqueryUIのタブ関数での3つのオプション*（a）heightStyle（b）collapsible 、および（c）hide *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>

      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>

   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
               ab illo inventore veritatis et quasi architecto beatae vitae dicta
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル tabsexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

選択したタブをクリックして、コンテンツの開閉を切り替えます。また、タブを閉じたときにアニメーション効果「slideUp」を見ることができます。

イベントの使用

次の例は、JqueryUIのタブ機能での3つのオプション event の使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel="stylesheet">
      <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() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>

      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>

   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul>
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit
               voluptatem accusantium doloremque laudantium, totam rem aperiam,
               eaque ipsa quae ab illo inventore veritatis et quasi architecto
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル tabsexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、タブの上にマウスを置いて開閉するセクションを切り替えます。

[tabs_methods]#

$（セレクター、コンテキスト）.tabs（ "action"、params）メソッド

_tabs（ "action"、params）_メソッドを使用すると、タブでのアクション（JavaScriptプログラムを使用）、タブの選択、無効化、追加、または削除を行うことができます。アクションは、最初の引数の文字列として指定されます（たとえば、新しいタブを追加するには「追加」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).tabs ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).tabs("destroy");
$( ".selector" ).tabs("disable");
$( ".selector" ).tabs( "disable", 1 );
$( ".selector" ).tabs("enable");
$( ".selector" ).tabs( "enable", 1 );
$( ".selector" ).tabs("load", 1);
var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
$( ".selector" ).tabs("option");
$( ".selector" ).tabs( "option", "disabled", true );
$( ".selector" ).tabs( "option", { disabled: true } );
$( ".selector" ).tabs( "refresh" );
var widget = $( ".selector" ).tabs( "widget" );

Action Disable（）の使用

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_disable（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>

      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>

   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit
               voluptatem accusantium doloremque laudantium, totam rem aperiam,
               eaque ipsa quae ab illo inventore veritatis et quasi architecto
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル tabsexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

ここでは、すべてのタブが無効になっています。

Action Disable（index）の使用

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_disable（index）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>

      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>

   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
               ab illo inventore veritatis et quasi architecto beatae vitae dicta
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

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

上記の例では、タブ3が無効になっています。

タブ要素のイベント管理

前のセクションで見たタブ（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).slider({
   activate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});
$( ".selector" ).slider({
   create: function( event, ui ) {}
});
$( ".selector" ).slider({
   load: function( event, ui ) {}
});

例

次の例は、タブウィジェットでのイベントメソッドの使用方法を示しています。この例では、_activate_および_create_イベントの使用方法を示します。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>

      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>

   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
               ab illo inventore veritatis et quasi architecto beatae vitae dicta
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
               enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div><br>

      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

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

タブをクリックすると、イベントに固有のメッセージが以下に印刷されます。

JqueryUI-ツールチップ

jQueryUIのツールチップウィジェットは、ネイティブのツールチップを置き換えます。このウィジェットは新しいテーマを追加し、カスタマイズを可能にします。まず、ツールチップが何であるかを理解しましょう。ツールチップはどの要素にも付けることができます。ツールチップを表示するには、_title_属性を入力要素に追加するだけで、タイトル属性値がツールチップとして使用されます。マウスで要素をホバーすると、要素の隣の小さなボックスにタイトル属性が表示されます。

jQueryUIは、ツールチップを表示する任意の要素にツールチップを追加するための* tooltip（）*メソッドを提供します。これは、可視性を切り替えるだけの場合と比較して、ツールチップの表示と非表示を切り替えるフェードアニメーションをデフォルトで提供します。

構文

tooltip（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_tooltip＃tooltip_options [$（selector、context）.tooltip（options）]メソッド
link：/jqueryui/jqueryui_tooltip＃tooltip_methods [$（selector、context）.tooltip（ "action"、[params]）]メソッド

[tooltip_options]#

$（セレクター、コンテキスト）.tooltip（オプション）メソッド

ツールチップ（オプション）オプション

構文

$(selector, context).tooltip(options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).tooltip({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$(".selector").tooltip(
   { content: "Some content!" }
);
$(".selector").tooltip(
   { disabled: true }
);
$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);
$(".selector").tooltip(
   { items: "img[alt]" }
);
$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);
$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
$(".selector").tooltip(
   { track: true }
);

次のセクションでは、ツールチップ機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* tooltip（）*メソッドにパラメーターを渡さないツールチップ機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

上記のコードをHTMLファイル tooltipexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、上のリンクにカーソルを合わせるか、Tabキーを使用して各要素にフォーカスを移動します。

コンテンツの使用、追跡、および無効化

次の例は、JqueryUIのツールヒント関数での3つの重要なオプション*（a）content（b）track および（c）disabled *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

上記のコードをHTMLファイル tooltipexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、最初のボックスのツールチップのコンテンツは、_content_オプションを使用して設定されます。また、ツールチップがマウスに追従していることもわかります。 2番目の入力ボックスのツールチップは無効になっています。

ポジションの使用

次の例は、JqueryUIのツールヒント関数でオプション position を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

上記のコードをHTMLファイル tooltipexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、ツールチップの位置は入力ボックスの上に設定されています。

[tooltip_methods]#

$（セレクター、コンテキスト）.tooltip（ "action"、[params]）メソッド

_tooltip（action、params）_メソッドは、ツールチップの無効化など、ツールチップ要素に対してアクションを実行できます。 action は最初の引数で文字列として指定され、オプションで、指定されたアクションに基づいて1つ以上の params を提供できます。

'_基本的に、ここでのアクションは何もありませんが、文字列の形で使用できるjQueryメソッドです。_

構文

$(selector, context).tooltip ("action", [params]);

次の表は、このメソッドのアクションを示しています-


$(".selector").tooltip("close");
$(".selector").tooltip("destroy");
$(".selector").tooltip("disable");
$(".selector").tooltip("enable");
$(".selector").tooltip("open");
var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
$(".selector").tooltip("option");
$( ".selector" ).tooltip( "option", "disabled", true );
$( ".selector" ).tooltip( "option", { disabled: true } );
$(".selector").tooltip("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、アクション_disable_および_enable_の使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
              //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>

   <body style = "padding:100px;">
      <!-- HTML -->
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7"/>
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn"/>
   </body>
</html>

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

上記の例では、_myBtn_ボタンをクリックすると、ツールチップがポップアップ表示されます。

ツールチップ要素のイベント管理

前のセクションで見たツールヒント（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

Sr.No. Event Method & Description

1

create(event, ui)

ツールチップが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-create（event、ui）

ツールチップが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文

$(".selector").tooltip(
   create: function(event, ui) {}
);

2

close(event, ui)

ツールチップが閉じられたときにトリガーされます。通常、_focusout_または_mouseleave_でトリガーします。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-close（event、ui）

ツールチップが閉じられたときにトリガーされます。通常、_focusout_または_mouseleave_でトリガーします。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

tooltip -生成されたツールチップ要素。

構文

$(".selector").tooltip(
   close: function(event, ui) {}
);

3

open(event, ui)

ツールチップが表示または表示されたときにトリガーされます。通常、_focusin_または_mouseover_でトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-open（event、ui）

ツールチップが表示または表示されたときにトリガーされます。通常、_focusin_または_mouseover_でトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型です。_ui_の可能な値は-

tooltip -生成されたツールチップ要素。

構文

$(".selector").tooltip(
   open: function(event, ui) {}
);

例

次の例は、ツールチップ機能中のイベントメソッドの使用方法を示しています。この例は、_open_および_close_イベントの使用を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown",//show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to finddevguides…',
               show: "fold",
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1);
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>

   <body style = "padding:100px;">
      <!-- HTML -->
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

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

上記の例では、_Hover over me！_のツールチップはすぐに消えますが、_Hover over me！_のツールチップは1000ミリ秒後に消えます。

JqueryUI-クラスを追加

この章では、jQueryUI視覚効果の管理に使用されるメソッドの1つである* addClass（）*メソッドについて説明します。 _addClass（）_メソッドを使用すると、CSSプロパティの変更をアニメーション化できます。

_addClass（）_メソッドは、すべてのスタイル変更をアニメーション化しながら、指定されたクラスを一致した要素に追加します。

構文

jQueryUIのバージョン1.0で追加

addClass（）*メソッドの基本的な構文は次のとおりです-

.addClass( className [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	className これは、1つ以上のCSSクラスを含むストリングです（スペースで区切られます）。
2	duration これは、Number型またはString型であり、エフェクトのミリ秒数を示します。値が0の場合、要素は進行せずに新しいスタイルで直接使用されます。デフォルト値は_400_です。
3	easing これはString型で、エフェクトの進行方法を示します。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
4	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加

バージョン1.9では、このメソッドは_children_オプションをサポートするようになりました。これは子孫要素もアニメーション化します。

.addClass( className [, options ] )

Sr.No.

Parameter & Description

1

className

これは、1つ以上のCSSクラスを含むストリングです（スペースで区切られます）。

2

options

これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は-

duration -これはNumber型またはString型で、エフェクトのミリ秒数を示します。値が0の場合、要素は進行せずに新しいスタイルで直接使用されます。デフォルト値は_400_です。
easing -これはString型で、エフェクトの進行方法を示します。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
complete -これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。
children -これはブール型で、一致した要素のすべての子孫にアニメーションを追加で適用するかどうかを表します。デフォルト値は_false_です。
キュー-これはブール型または文字列型で、アニメーションをエフェクトキューに配置するかどうかを表します。デフォルト値は_true_です。

例

次の例は、_addClass（）_メソッドの使用方法を示しています。

単一のクラスを渡す

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>

      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>

   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

上記のコードをHTMLファイル addclassexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

[クラスの追加]ボタンと[クラスの削除]ボタンをクリックして、ボックスに対するクラスの効果を確認します。

複数のクラスを渡す

この例は、_addClass_メソッドに複数のクラスを渡す方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>

      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>

   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>

上記のコードをHTMLファイル addclassexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

JqueryUI-カラーアニメーション

jQueryUIはいくつかのコアjQueryメソッドを拡張して、要素のさまざまな遷移をアニメーション化できるようにします。それらの1つは_animate_メソッドです。 jQueryUIはjQuery _animate_メソッドを拡張して、色のアニメーション化のサポートを追加します。要素の色を定義するいくつかのCSSプロパティの1つをアニメーション化できます。以下は、_animate_メソッドがサポートするCSSプロパティです。

backgroundColor -要素の背景色を設定します。
borderTopColor -要素の境界線の上側の色を設定します。
borderBottomColor -要素の境界線の下側の色を設定します。
borderLeftColor -要素の境界の左側の色を設定します。
borderRightColor -要素の境界の右側の色を設定します。
color -要素のテキストの色を設定します。
outlineColor -アウトラインの色を設定します。要素を強調するために使用されます。

構文

以下はjQueryUI _animate_メソッドの構文です-

$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);

このメソッドには、、（コンマ）で区切った任意の数のプロパティを設定できます。

例

次の例は、_addClass（）_メソッドの使用方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>

      <script type = "text/javascript">
         $(document).ready(function() {
            $('#button-1').click(function() {
               $('#animTarget').animate({
                  backgroundColor: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>

   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button id = "button-1">Click Me</button>
   </body>
</html>

上記のコードをHTMLファイル animateexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ボタンをクリックして、ボックスのアニメーションがどのように変化するかを確認します。

JqueryUI-効果

この章では、jQueryUI視覚効果の管理に使用されるメソッドの1つである* effect（）*メソッドについて説明します。 _effect（）_メソッドは、要素を表示または非表示にすることなく、アニメーション効果を要素に適用します。

構文

effect（）*メソッドには次の構文があります-

.effect( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Parameter & Description
1	effect これは、トランジションに使用する効果を示す文字列です。
2	options これはタイプObjectで、エフェクト固有の設定とリンクを示します：/jqueryui/jqueryui_easings [easing]。さらに、各効果には独自のオプションセットがあり、_jQueryUI Effects_テーブルで説明されている複数の効果で共通に指定できます。
3	duration これは、Number型またはString型であり、エフェクトのミリ秒数を示します。デフォルト値は_400_です。
4	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIの効果

次の表は、effects（）メソッドで使用できるさまざまな効果について説明しています-

Sr.No.	Effect & Description
1	blind ウィンドウブラインドのように要素を表示または非表示にします。指定された_direction_および_mode_に応じて、下端を上下または右端を左右に移動します。
2	bounce 要素を垂直方向または水平方向にバウンスさせ、オプションで要素を表示または非表示にします。
3	clip 要素の中央に出会うまで要素の反対側の境界線を移動することにより、要素を表示または非表示にします。
4	drop 要素をページにドロップまたはドロップオフするように表示することにより、要素を表示または非表示にします。
5	explode 要素を複数の部分に分割することにより、要素を表示または非表示にします。要素は、ページに爆発する、またはページから爆発するかのように放射方向に移動します。
6	fade 不透明度を調整して要素を表示または非表示にします。これはコアフェードエフェクトと同じですが、オプションはありません。
7	fold 要素を表示または非表示にするには、反対側の境界線を内側または外側に調整してから、他の境界線セットに対して同じことを行います。
8	highlight 要素を表示または非表示にしながら、背景色を一時的に変更することにより、要素に注意を促します。
9	puff 不透明度を調整しながら、要素を所定の位置で拡大または縮小します。
10	pulsate 要素が指定どおりに表示または非表示になるようにする前に、要素の不透明度のオンとオフを調整します。
11	scale 指定した割合で要素を拡大または縮小します。
12	shake 要素を前後または左右に振る。
13	size 指定された幅と高さに要素のサイズを変更します。ターゲットサイズの指定方法を除き、scaleと同様です。
14	slide ページ上またはページ外にスライドするように要素を移動します。
15	transfer 一時的なアウトライン要素をアニメーション化し、要素を別の要素に転送するように見せます。アウトライン要素の外観は、ui-effects-transferクラスまたはオプションとして指定されたクラスのCSSルールを介して定義する必要があります。

例

次の例は、上記の表にリストされているさまざまな効果を持つ_effect（）_メソッドの使用法を示しています。

エフェクト-シェイク

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI effect Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         #box-1 {
            height: 100px;
            width: 100px;
            background: #b9cd6d;
         }
      </style>

      <script>
         $(document).ready(function() {
            $('#box-1').click(function() {
               $( "#box-1" ).effect( "shake", {
                  times: 10,
                  distance: 100
               }, 3000, function() {
                  $( this ).css( "background", "#cccccc" );
               });
            });
         });
      </script>
   </head>

   <body>
      <div id = "box-1">Click On Me</div>
   </body>
</html>

上記のコードをHTMLファイル effectexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。今、あなたは結果で遊ぶことができます-

効果-爆発

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel="stylesheet">
      <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>

      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
            background: #b9cd6d;
         }
      </style>

      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "explode",
                  easing: "easeInExpo",
                  pieces: 4,
                  duration: 5000
               });
            });
         });
      </script>
   </head>

   <body>
      <div id="box-2"></div>
   </body>
</html>

上記のコードをHTMLファイル effectexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

JqueryUI-非表示

この章では、jQueryUI視覚効果の管理に使用されるメソッドの1つである* hide（）*メソッドについて説明します。 _effect（）_メソッドは、アニメーション効果を適用して要素を非表示にします。

構文

hide（）*メソッドには次の構文があります-

.hide( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Parameter & Description
1	effect これは、トランジションに使用する効果を示す文字列です。
2	options これはタイプObjectで、エフェクト固有の設定とリンクを示します：/jqueryui/jqueryui_easings [easing]。さらに、各効果には独自のオプションセットがあり、_jQueryUI Effects_テーブルで説明されている複数の効果で共通に指定できます。
3	duration これは、Number型またはString型であり、エフェクトのミリ秒数を示します。デフォルト値は_400_です。
4	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIの効果

次の表は、_hide（）_メソッドで使用できるさまざまな効果を説明しています-

Sr.No.	Effect & Description
1	blind ウィンドウブラインドのように要素を表示または非表示にします。指定された_direction_および_mode_に応じて、下端を上下または右端を左右に移動します。
2	bounce 要素を垂直方向または水平方向にバウンスさせ、オプションで要素を表示または非表示にします。
3	clip 要素の中央に出会うまで要素の反対側の境界線を移動することにより、要素を表示または非表示にします。
4	drop 要素をページにドロップまたはドロップオフするように表示することにより、要素を表示または非表示にします。
5	explode 要素を複数の部分に分割することにより、要素を表示または非表示にします。要素は、ページに爆発する、またはページから爆発するかのように放射方向に移動します。
6	fade 不透明度を調整して要素を表示または非表示にします。これはコアフェードエフェクトと同じですが、オプションはありません。
7	fold 要素を表示または非表示にするには、反対側の境界線を内側または外側に調整してから、他の境界線セットに対して同じことを行います。
8	highlight 要素を表示または非表示にしながら、背景色を一時的に変更することにより、要素に注意を促します。
9	puff 不透明度を調整しながら、要素を所定の位置で拡大または縮小します。
10	pulsate 要素が指定どおりに表示または非表示になるようにする前に、要素の不透明度のオンとオフを調整します。
11	scale 指定した割合で要素を拡大または縮小します。
12	shake 要素を前後または左右に振る。
14	size 指定された幅と高さに要素のサイズを変更します。ターゲットサイズの指定方法を除き、scaleと同様です。
15	slide ページ上またはページ外にスライドするように要素を移動します。
16	transfer 一時的なアウトライン要素をアニメーション化し、要素を別の要素に転送するように見せます。アウトライン要素の外観は、ui-effects-transferクラスまたはオプションとして指定されたクラスのCSSルールを介して定義する必要があります。

例

次の例は、上記の表にリストされているさまざまな効果を持つ_hide（）_メソッドの使用を示しています。

効果-ブラインド

次の例は、_blind_効果を持つ_hide（）_メソッドの使用を示しています。 _Blind Effect Hide_ボタンをクリックして、要素が非表示になる前にブラインド効果を確認します。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI hide Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .toggler { width: 500px; height: 200px; }
            #button { padding: .5em 1em; text-decoration: none; }
            #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>

      <script>
         $(function() {
            function runEffect() {
               $( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
            };
           //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
               }, 1000 );
            };

            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>

   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a>
   </body>
</html>

上記のコードをHTMLファイル hideexample に保存し、JavaScriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

エフェクト-シェイク

次の例は、_blind_効果を持つ_shake（）_メソッドの使用を示しています。 _Shake Effect Hide_ボタンをクリックして、要素が非表示になる前のシェイク効果を確認します。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI hide Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .toggler-1 { width: 500px; height: 200px; }
            #button-1 { padding: .5em 1em; text-decoration: none; }
            #effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>

      <script>
         $(function() {
            function runEffect() {
               $( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback );
            };

           //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
               }, 1000 );
            };

           //set effect from select menu value
            $( "#button-1" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>

   <body>
      <div class = "toggler-1">
         <div id = "effect-1" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a>
   </body>
</html>

上記のコードをHTMLファイル hideexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

JqueryUI-クラスを削除

この章では、* removeClass（）*メソッドについて説明します。これは、jQueryUI視覚効果の管理に使用されるメソッドの1つです。 _removeClass（）_メソッドは、適用されたクラスを要素から削除します。

_removeClass（）_メソッドは、すべてのスタイル変更をアニメートしながら、指定されたクラスを一致した要素から削除します。

構文

jQueryUIのバージョン1.0で追加

removeClass（）*メソッドの基本的な構文は次のとおりです-

.removeClass( className [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	className これは、削除する1つ以上のCSSクラス（スペースで区切られた）を含む文字列です。
2	duration これは、Number型またはString型であり、エフェクトのミリ秒数を示します。値が0の場合、要素は進行せずに新しいスタイルで直接使用されます。デフォルト値は_400_です。
3	easing これはString型で、エフェクトの進行方法を示します。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
4	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加

バージョン1.9では、このメソッドは_children_オプションをサポートするようになりました。これは子孫要素もアニメーション化します。

.removeClass( className [, options ] )

Sr.No.

Parameter & Description

1

className

これは、1つ以上のCSSクラスを含むストリングです（スペースで区切られます）。

2

options

これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は-

duration -これはNumber型またはString型で、エフェクトのミリ秒数を示します。値が0の場合、要素は進行せずに新しいスタイルで直接使用されます。デフォルト値は_400_です。
easing -これはString型で、エフェクトの進行方法を示します。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
complete -これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。
children -これはブール型で、一致した要素のすべての子孫にアニメーションを追加で適用するかどうかを表します。デフォルト値は_false_です。
キュー-これはブール型または文字列型で、アニメーションをエフェクトキューに配置するかどうかを表します。デフォルト値は_true_です。

例

次の例は、_removeClass（）_メソッドの使用方法を示しています。

単一のクラスを渡す

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI removeClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>

      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>

   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>

      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

上記のコードをHTMLファイル removeclassexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

[クラスの追加]ボタンと[クラスの削除]ボタンをクリックして、ボックスに対するクラスの効果を確認します。

JqueryUI-表示

この章では、jQueryUI視覚効果の管理に使用されるメソッドの1つである* show（）*メソッドについて説明します。 _show（）_メソッドは、指定された効果を使用してアイテムを表示します。

_show（）_メソッドは、指定された効果を使用して、ラップされた要素の可視性を切り替えます。

構文

show（）*メソッドには次の構文があります-

.show( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Parameter & Description
1	effect これは、遷移に使用する効果を示す文字列です。これは文字列であり、要素の可視性を調整するときに使用する効果を表します。以下の表に効果を示します。
2	options これはタイプObjectで、エフェクト固有の設定とリンクを示します：/jqueryui/jqueryui_easings [easing]。さらに、各効果には独自のオプションセットがあり、_jQueryUI Effects_テーブルで説明されている複数の効果で共通に指定できます。
3	duration これは、Number型またはString型であり、アニメーションの実行時間を決定します。デフォルト値は_400_です。
4	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIの効果

次の表は、effects（）メソッドで使用できるさまざまな効果について説明しています-

Sr.No.	Effect & Description
1	blind ウィンドウブラインドのように要素を表示または非表示にします。指定された_direction_および_mode_に応じて、下端を上下または右端を左右に移動します。
2	bounce 要素を垂直方向または水平方向にバウンスさせ、オプションで要素を表示または非表示にします。
3	clip 要素の中央に出会うまで要素の反対側の境界線を移動することにより、要素を表示または非表示にします。
4	drop 要素をページにドロップまたはドロップオフするように表示することにより、要素を表示または非表示にします。
5	explode 要素を複数の部分に分割することにより、要素を表示または非表示にします。要素は、ページに爆発する、またはページから爆発するかのように放射方向に移動します。
6	fade 不透明度を調整して要素を表示または非表示にします。これはコアフェードエフェクトと同じですが、オプションはありません。
7	fold 要素を表示または非表示にするには、反対側の境界線を内側または外側に調整してから、他の境界線セットに対して同じことを行います。
8	highlight 要素を表示または非表示にしながら、背景色を一時的に変更することにより、要素に注意を促します。
9	puff 不透明度を調整しながら、要素を所定の位置で拡大または縮小します。
10	pulsate 要素が指定どおりに表示または非表示になるようにする前に、要素の不透明度のオンとオフを調整します。
11	scale 指定した割合で要素を拡大または縮小します。
12	shake 要素を前後または左右に振る。
13	size 指定された幅と高さに要素のサイズを変更します。ターゲットサイズの指定方法を除き、scaleと同様です。
14	slide ページ上またはページ外にスライドするように要素を移動します。
15	transfer 一時的なアウトライン要素をアニメーション化し、要素を別の要素に転送するように見せます。アウトライン要素の外観は、ui-effects-transferクラスまたはオプションとして指定されたクラスのCSSルールを介して定義する必要があります。

例

次の例は、_show（）_メソッドの使用方法を示しています。

シェイク効果で表示

次の例は、_shake_効果を持つ_show（）_メソッドを示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI show Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .toggler { width: 500px; height: 200px; }
         #button { padding: .5em 1em; text-decoration: none; }
         #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
         #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>

      <script>
         $(function() {
           //run the currently selected effect
            function runEffect() {
              //run the effect
               $( "#effect" ).show( "shake", {times: 10,distance: 100}, 1000, callback);
            };

           //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>

   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Show</h3>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Run Effect</a>
   </body>
</html>

上記のコードをHTMLファイル showexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

[クラスの追加]ボタンと[クラスの削除]ボタンをクリックして、ボックスに対するクラスの効果を確認します。

ブラインド効果で表示

次の例は、_blind_効果で_show（）_メソッドを使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI show Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .toggler { width: 500px; height: 200px; }
            #button { padding: .5em 1em; text-decoration: none; }
            #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>

      <script>
         $(function() {
           //run the currently selected effect
            function runEffect() {
              //run the effect
               $( "#effect" ).show( "blind", {times: 10,distance: 100}, 1000, callback);
            };

           //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };

           //set effect from select menu value
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>

   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Show</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Run Effect</a>
   </body>
</html>

上記のコードをHTMLファイル showexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

JqueryUI-スイッチクラス

この章では、操作に役立つ新しいクラスである* switchClass（）*メソッドについて説明します。 _switchClass（）_メソッドは、あるCSSクラスから別のCSSクラスに移動し、ある状態から別の状態への遷移をアニメーション化します。

構文

jQueryUIのバージョン1.0で追加

switchClass（）*メソッドの基本的な構文は次のとおりです-

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	removeClassName これは文字列であり、削除するCSSクラス名、またはクラス名のスペース区切りリストを表します。
2	addClassName これはString型で、一致した各要素のクラス属性に追加される1つ以上のクラス名（スペースで区切られた）を表します。
3	duration これは、Number型またはString型で、オプションで_slow、normal、fast、_、またはミリ秒単位のエフェクトの期間のいずれかを提供します。省略すると、animate（）メソッドがデフォルトを決定します。デフォルト値は_400_です。
4	easing animate（）メソッドに渡されるイージング関数の名前。
5	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加

バージョン1.9では、このメソッドは_children_オプションをサポートするようになりました。これは子孫要素もアニメーション化します。

.switchClass( removeClassName, addClassName [, options ] )

Sr.No.

Parameter & Description

1

removeClassName

これは文字列であり、削除するCSSクラス名、またはクラス名のスペース区切りリストを表します。

2

addClassName

これはString型で、一致した各要素のクラス属性に追加される1つ以上のクラス名（スペースで区切られた）を表します。

3

options

これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は-

duration -アニメーションの実行時間を決定する文字列または数値。デフォルト値は_400_です。
easing -遷移に使用するイージング関数を示す文字列。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
complete -これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。
children -これはブール値であり、一致する要素のすべての子孫にアニメーションを追加で適用するかどうかを表します。
queue -これは文字列/ブール型で、アニメーションをエフェクトキューに配置するかどうかを示します。

例

次の例は、_switchClass（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .LargeClass {
            font-family: Arial;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>

      <script>
         $(function() {
            $('#btnSwitch').click(function() {
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>

   <body>
      <div class = "NormalClass">
         Tutorials Point Rocks!!!
      </div>
      <div class = "NormalClass">
         Welcome to Tutorials Point!!!
      </div>
      <br/>
      <input type = "button" id = "btnSwitch" value = "Switch Class"/>
   </body>
</html>

上記のコードをHTMLファイル switchclassexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

_Switch Class_ボタンをクリックして、ボックスでのクラスの効果を確認します。

JqueryUI-トグル

この章では、jQueryUI視覚効果の* toggle（）*メソッドについて説明します。 _toggle（）_メソッドは、要素が非表示かどうかに応じてshow（）またはhide（）メソッドを切り替えます。

構文

toggle（）*メソッドには次の構文があります-

.toggle( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Parameter & Description
1	effect これは、遷移に使用する効果を示す文字列です。これは文字列であり、要素の可視性を調整するときに使用する効果を表します。以下の表に効果を示します。
2	options これはタイプObjectで、エフェクト固有の設定とリンクを示します：/jqueryui/jqueryui_easings [easing]。さらに、各効果には独自のオプションセットがあり、_jQueryUI Effects_テーブルで説明されている複数の効果で共通に指定できます。
3	duration これは、Number型またはString型であり、アニメーションの実行時間を決定します。デフォルト値は_400_です。
4	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIの効果

次の表は、effects（）メソッドで使用できるさまざまな効果について説明しています-

Sr.No.	Effect & Description
1	blind ウィンドウブラインドのように要素を表示または非表示にします。指定された_direction_および_mode_に応じて、下端を上下または右端を左右に移動します。
2	bounce 要素を垂直方向または水平方向にバウンスさせ、オプションで要素を表示または非表示にします。
3	clip 要素の中央に出会うまで要素の反対側の境界線を移動することにより、要素を表示または非表示にします。
4	drop 要素をページにドロップまたはドロップオフするように表示することにより、要素を表示または非表示にします。
5	explode 要素を複数の部分に分割することにより、要素を表示または非表示にします。要素は、ページに爆発する、またはページから爆発するかのように放射方向に移動します。
6	fade 不透明度を調整して要素を表示または非表示にします。これはコアフェードエフェクトと同じですが、オプションはありません。
7	fold 要素を表示または非表示にするには、反対側の境界線を内側または外側に調整してから、他の境界線セットに対して同じことを行います。
8	highlight 要素を表示または非表示にしながら、背景色を一時的に変更することにより、要素に注意を促します。
9	puff 不透明度を調整しながら、要素を所定の位置で拡大または縮小します。
10	pulsate 要素が指定どおりに表示または非表示になるようにする前に、要素の不透明度のオンとオフを調整します。
11	scale 指定した割合で要素を拡大または縮小します。
12	shake 要素を前後または左右に振る。
13	size 指定された幅と高さに要素のサイズを変更します。ターゲットサイズの指定方法を除き、scaleと同様です。
14	slide ページ上またはページ外にスライドするように要素を移動します。
15	transfer 一時的なアウトライン要素をアニメーション化し、要素を別の要素に転送するように見せます。アウトライン要素の外観は、ui-effects-transferクラスまたはオプションとして指定されたクラスのCSSルールを介して定義する必要があります。

例

次の例は、上記の表にリストされているさまざまな効果を持つ_toggle（）_メソッドの使用を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Toggle Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .toggler { width: 500px; height: 200px; }
         #button { padding: .5em 1em; text-decoration: none; }
         #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
         #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>

      <script>
         $(function() {
            function runEffect() {
               $( "#effect" ).toggle('explode', 300);
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>

   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
   </body>
</html>

上記のコードをHTMLファイル toggleexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

トグルボタンをクリックして、クラスの表示と非表示を確認します。

JqueryUI-クラスの切り替え

この章では、操作に役立つ新しいクラスである* toggleClass（）*メソッドについて説明します。 _toggleClass（）_メソッドは、一致した要素のセット内の各要素に1つ以上のクラスを追加または削除します。

構文

jQueryUIのバージョン1.0で追加

toggleClass（）*メソッドの基本的な構文は次のとおりです-

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	className これは文字列であり、追加、削除、または切り替えられるCSSクラス名またはクラス名のスペース区切りリストを表します。
2	switch これはブール型であり、指定された場合、_toggleClass（）_メソッドが_true_の場合はクラスを追加し、_false_の場合はクラスを削除します。
3	duration これは、Number型またはString型で、オプションで_slow、normal、fast、_、またはミリ秒単位のエフェクトの期間のいずれかを提供します。省略すると、animate（）メソッドがデフォルトを決定します。デフォルト値は_400_です。
4	easing animate（）メソッドに渡されるイージング関数の名前。
5	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加

バージョン1.9では、このメソッドは_children_オプションをサポートするようになりました。これは子孫要素もアニメーション化します。

.toggleClass( className [, switch ] [, options ] )

Sr.No.

Parameter & Description

1

className

これは文字列であり、追加、削除、または切り替えられるCSSクラス名またはクラス名のスペース区切りリストを表します。

2

switch

これはブール型であり、指定された場合、_toggleClass（）_メソッドが_true_の場合はクラスを追加し、_false_の場合はクラスを削除します。

3

options

これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は-

duration -アニメーションの実行時間を決定する文字列または数値。デフォルト値は_400_です。
easing -遷移に使用するイージング関数を示す文字列。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
complete -これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。
children -これはブール値であり、一致する要素のすべての子孫にアニメーションを追加で適用するかどうかを表します。
queue -これは、アニメーションをエフェクトキューに配置するかどうかを示すString/Boolean型です。

例

次の例は、_toggleClass（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>

      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>

   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>

上記のコードをHTMLファイル toggleclassexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

[Toggle]ボタンをクリックして、テキストのCSSクラスがどのように変更されるかを確認します。

JqueryUI-位置

この章では、jqueryUiのユーティリティメソッドの1つである_position（）_メソッドを参照します。 _position（）_メソッドを使用すると、別の要素またはマウスイベントに対して要素を配置できます。

jQuery UIは、jQueryコアの.position（）メソッドを拡張して、自然に他の人に説明するのと同じ方法で要素を配置する方法を説明できるようにします。数字や数学を使用する代わりに、意味のある単語（左右など）と関係を使用します。

構文

以下は、_position（）_メソッドの構文です-

.position( options )

_options_はObject型で、ラップされたセットの要素の配置方法を指定する情報を提供します。次の表は、このメソッドで使用できるさまざまな_options_のリストです-

Sr.No.	Option & Description
1	my このオプションは、ラップされた要素（再配置される要素）の位置を指定して、ターゲット要素または位置に合わせます。デフォルトでは、その値は center です。オプション-my * このオプションは、ラップされた要素（再配置される要素）の位置を指定して、ターゲット要素または位置に合わせます。デフォルトでは、その値は center です。これらの値のうち2つを使用して場所を指定します。top、left、bottom、right、およびcenter。スペース文字で区切られます。最初の値は horizontal 値で、2番目は vertical です。指定された単一の値が horizontal または vertical とみなされるかどうかは、使用する値によって異なります（たとえば、_top_は垂直、_right_は水平）。例 `top, or bottom right.`
2	at このオプションは文字列タイプで、再配置された要素を整列させるターゲット要素の位置を指定します。 _my_オプションと同じ値を取ります。デフォルトでは、その値は center です。オプション-at * このオプションは文字列タイプで、再配置された要素を整列させるターゲット要素の位置を指定します。 _my_オプションと同じ値を取ります。デフォルトでは、その値は center です。例 `"right", or "left center"`
3	of これはタイプSelectorまたはElementまたはjQueryまたはEventです。ラップされた要素が再配置されるターゲット要素、またはターゲット位置として使用するマウス座標を含むEventインスタンスを識別します。デフォルトでは、その値は null です。オプション-of * これはタイプSelectorまたはElementまたはjQueryまたはEventです。ラップされた要素が再配置されるターゲット要素、またはターゲット位置として使用するマウス座標を含むEventインスタンスを識別します。デフォルトでは、その値は null です。例 `#top-menu`
4	collision このオプションはString型であり、配置された要素が任意の方向にウィンドウを超えて拡張するときに適用されるルールを指定します。デフォルトでは、その値は flip です。オプション-衝突このオプションはString型であり、配置された要素が任意の方向にウィンドウを超えて拡張するときに適用されるルールを指定します。デフォルトでは、その値は flip です。次の2つ（水平に続いて垂直）を受け入れます- flip -要素を反対側に反転し、フィットのために再度衝突検出を実行します。どちらの側も収まらない場合、中央がフォールバックとして使用されます。 fit -エレメントを希望の方向に保ちますが、フィットするように位置を調整します。 flipfit -最初にフリップロジックを適用し、要素をより多くの要素が見えるようにする側に要素を配置します。次に、フィットロジックを適用して、できるだけ多くの要素が見えるようにします。なし-衝突検出を無効にします。単一の値が指定されている場合、それは両方向に適用されます。例 `"flip", "fit", "fit flip", "fit none"`
5	using このオプションは、要素の位置を変更する内部関数を置き換える関数です。計算されたターゲット位置に設定された_left_および_top_プロパティと、関数コンテキストとして設定された要素を持つオブジェクトハッシュで構成される単一の引数で、ラップされた各要素に対して呼び出されます。デフォルトでは、その値は null です。オプション-使用このオプションは、要素の位置を変更する内部関数を置き換える関数です。計算されたターゲット位置に設定された_left_および_top_プロパティと、関数コンテキストとして設定された要素を持つオブジェクトハッシュで構成される単一の引数で、ラップされた各要素に対して呼び出されます。デフォルトでは、その値は null です。例 `{horizontal: "center", vertical: "left", important: "horizontal" }`
6	within このオプションはセレクター、エレメント、またはjQueryエレメントであり、衝突検出の境界ボックスとして使用するエレメントを指定できます。これは、ページの特定のセクション内に配置された要素を含める必要がある場合に便利です。デフォルトでは、その値は window です。オプション-以内このオプションはセレクター、エレメント、またはjQueryエレメントであり、衝突検出の境界ボックスとして使用するエレメントを指定できます。これは、ページの特定のセクション内に配置された要素を含める必要がある場合に便利です。デフォルトでは、その値は window です。

例

次の例は、_position_メソッドの使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <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>

      <!-- CSS -->
      <style>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #b9cd6d;
         }
         #targetElement {
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>

      <script>
         $(function() {
           //Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>

   <body>
      <div id = "targetElement">
         <div class = "positionDiv" id = "position1">Box 1</div>
         <div class = "positionDiv" id = "position2">Box 2</div>
         <div class = "positionDiv" id = "position3">Box 3</div>
         <div class = "positionDiv" id = "position4">Box 4</div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル positionmethodexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

この例では-

_Box 1_は、div要素の中央（水平および垂直方向）に配置されます。
Box 2はdiv要素の左上（水平および垂直）_of_に配置されます。
Box 3はウィンドウの右上隅に表示されますが、メッセージがより目立つようにパディングを残します。これは、_my_または_at_の水平および垂直値を使用して行われます。
_Box 4_の場合、_of_値はイベントオブジェクトとして設定されます。これは、ポインターに関連付けられたイベントであり、マウスイベントと共に移動します。

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.	Option & Description
1	addClasses このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。デフォルトでは、その値は true です。オプション-addClasses * このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。デフォルトでは、その値は true です。構文 `$(".selector").draggable( { addClasses: false } );`
2	appendTo ドラッグ中にドラッグ可能なヘルパーを追加する要素を指定します。デフォルトでは、その値は「親」です。オプション-appendTo * ドラッグ中にドラッグ可能なヘルパーを追加する要素を指定します。デフォルトでは、その値は「親」です。構文 `$(".selector").draggable( { appendTo: "body"} );`
3	axis このオプションは、水平（x）または垂直（y）軸へのドラッグを制限します。可能な値：「x」、「y」。オプション-軸このオプションは、水平（x）または垂直（y）軸へのドラッグを制限します。可能な値：「x」、「y」。構文 `$(".selector").draggable( { axis: "x" } );`
4	cancel このオプションを使用して、指定した要素でドラッグが開始されないようにすることができます。デフォルトでは、その値は「input、textarea、button、select、option」です。オプション-キャンセルこのオプションを使用して、指定した要素でドラッグが開始されないようにすることができます。デフォルトでは、その値は「input、textarea、button、select、option」です構文 `$(".selector").draggable( { cancel: ".title" } );`
5	connectToSortable このオプションを使用して、要素が交換可能なリストを指定できます。配置の最後に、要素はリストの一部になります。デフォルトでは、その値は「false」です。オプション-connectToSortable * このオプションを使用して、要素が交換可能なリストを指定できます。配置の最後に、要素はリストの一部になります。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { connectToSortable: "#my-sortable" } );`
6	containment 指定された要素または領域の境界内にドラッグすることを制限します。デフォルトでは、その値は「false」です。オプション-封じ込め指定された要素または領域の境界内にドラッグすることを制限します。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { containment: "parent" } );`
7	cursor 要素が移動するときのカーソルCSSプロパティを指定します。マウスポインターの形状を表します。デフォルトでは、その値は「auto」です。オプション-カーソル要素が移動するときのカーソルCSSプロパティを指定します。マウスポインターの形状を表します。デフォルトでは、その値は「auto」です。他の可能な値は- 「crosshair」（クロス）「デフォルト」（矢印）「ポインター」（手）「移動」（2つの矢印が交差する）「e-resize」（右に展開）「ne-resize」（右に拡大）「nw-resize」（左上に拡大）「n-resize」（拡大）「se-resize」（右下に展開）「sw-resize」（左下に拡大）「s-resize」（展開）「auto」（デフォルト）「w-resize」（左に展開） "text"（テキストを書き込むためのポインター）「待機」（砂時計） "help"（ヘルプポインター）構文 `$(".selector").draggable( { cursor: "crosshair" } );`
8	cursorAt マウスカーソルを基準としたドラッグヘルパーのオフセットを設定します。座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして与えることができます：\ {top、left、right、bottom}。デフォルトでは、その値は「false」です。オプション-cursorAt * マウスカーソルを基準としたドラッグヘルパーのオフセットを設定します。座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして与えることができます：\ {top、left、right、bottom}。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( $( ".selector" ).draggable({ cursorAt: { left: 5 } }); );`
9	delay マウスの最初の動きが考慮されるまでの遅延（ミリ秒）。その時間の後に変位が始まる場合があります。デフォルトでは、その値は「0」です。オプション-遅延マウスの最初の動きが考慮されるまでの遅延（ミリ秒）。その時間の後に変位が始まる場合があります。デフォルトでは、その値は「0」です。構文 `$(".selector").draggable( { delay: 300 } );`
10	disabled trueに設定すると、アイテムを移動する機能が無効になります。この機能が有効になるまで、アイテムは移動できません（ドラッグ可能（「有効」）命令を使用）。デフォルトでは、その値は「false」です。オプション-無効 trueに設定すると、アイテムを移動する機能が無効になります。この機能が有効になるまで、アイテムは移動できません（ドラッグ可能（「有効」）命令を使用）。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { disabled: true } );`
11	distance 変位を考慮する前にマウスを移動する必要があるピクセル数。デフォルトでは、その値は「1」です。オプション-距離変位を考慮する前にマウスを移動する必要があるピクセル数。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { distance: 10 } );`
12	grid xおよびyピクセルごとに、ドラッグヘルパーをグリッドにスナップします。配列は[x、y]の形式でなければなりません。デフォルトでは、その値は「false」です。オプション-グリッド xおよびyピクセルごとに、ドラッグヘルパーをグリッドにスナップします。配列は[x、y]の形式でなければなりません。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { grid: [ 50, 20 ] } );`
13	handle 指定した場合、指定した要素でマウスダウンが発生しない限り、ドラッグの開始を制限します。デフォルトでは、その値は「false」です。オプション-ハンドル指定した場合、指定した要素でマウスダウンが発生しない限り、ドラッグの開始を制限します。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { handle: "h2" } );`
14	helper ディスプレイのドラッグにヘルパー要素を使用できるようにします。デフォルトでは、その値は「オリジナル」です。オプション-ヘルパーディスプレイのドラッグにヘルパー要素を使用できるようにします。デフォルトでは、その値は「オリジナル」です。構文 `$(".selector").draggable( { helper: "clone" } );`
15	iframeFix ドラッグ中にiframeがmousemoveイベントをキャプチャしないようにします。デフォルトでは、その値は「false」です。オプション-iframeFix * ドラッグ中にiframeがmousemoveイベントをキャプチャしないようにします。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { iframeFix: true } );`
16	opacity 移動するときに移動される要素の不透明度。デフォルトでは、その値は「false」です。オプション-不透明度移動するときに移動される要素の不透明度。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { opacity: 0.35 } );`
17	refreshPositions _true_に設定すると、すべてのマウス移動でドロップ可能な位置がすべて計算されます。デフォルトでは、その値は「false」です。オプション-refreshPositions * _true_に設定すると、すべてのマウス移動でドロップ可能な位置がすべて計算されます。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { refreshPositions: true } );`
18	revert 移動の終了時に要素が元の位置に戻されるかどうかを示します。デフォルトでは、その値は「false」です。オプション-元に戻す移動の終了時に要素が元の位置に戻されるかどうかを示します。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { revert: true } );`
19	revertDuration 要素が元の位置に戻るまでの変位時間（ミリ秒）（options.revertを参照）。デフォルトでは、その値は「500」です。オプション-revertDuration * 要素が元の位置に戻るまでの変位時間（ミリ秒）（options.revertを参照）。デフォルトでは、その値は「500」です。構文 `$(".selector").draggable( { revertDuration: 200 } );`
20	scope droppableのacceptオプションに加えて、ドラッグ可能なアイテムとドロップ可能なアイテムのセットをグループ化するために使用します。デフォルトでは、その値は「デフォルト」です。オプション-スコープ droppableのacceptオプションに加えて、ドラッグ可能なアイテムとドロップ可能なアイテムのセットをグループ化するために使用します。デフォルトでは、その値は「デフォルト」です。構文 `$(".selector").draggable( { scope: "tasks" } );`
21	scroll true（デフォルト）に設定すると、アイテムがウィンドウの表示可能領域の外側に移動すると、ディスプレイがスクロールします。デフォルトでは、その値は「true」です。オプション-スクロール true（デフォルト）に設定すると、アイテムがウィンドウの表示可能領域の外側に移動すると、ディスプレイがスクロールします。デフォルトでは、その値は「true」です。構文 `$(".selector").draggable( { scroll: false } );`
22	scrollSensitivity ディスプレイをスクロールさせるためにマウスがウィンドウを出る必要があるピクセル数を示します。デフォルトでは、その値は「20」です。オプション-scrollSensitivity * ディスプレイをスクロールさせるためにマウスがウィンドウを出る必要があるピクセル数を示します。デフォルトでは、その値は「20」です。構文 `$(".selector").draggable( { scrollSensitivity: 100 } );`
23	scrollSpeed スクロールが開始されると、ディスプレイのスクロール速度を示します。デフォルトでは、その値は「20」です。オプション-scrollSpeed * スクロールが開始されると、ディスプレイのスクロール速度を示します。デフォルトでは、その値は「20」です。構文 `$(".selector").draggable( { scrollSpeed: 100 } );`
24	snap 他の要素（飛行している）上で移動されるアイテムの表示を調整します。デフォルトでは、その値は「false」です。オプション-スナップ他の要素（飛行している）上で移動されるアイテムの表示を調整します。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { snap: true } );`
25	snapMode 移動した要素と_options.snap_で示された要素の間で調整を行う方法を指定します。デフォルトでは、その値は「両方」です。オプション-snapMode * >移動された要素と_options.snap_で示された要素の間で調整を行う方法を指定します。デフォルトでは、その値は「両方」です。構文 `$(".selector").draggable( { snapMode: "inner" } );`
26	snapTolerance 調整を確立するために必要な位置の差の最大ピクセル数。デフォルトでは、その値は「20」です。オプション-snapTolerance * 調整を確立するために必要な位置の差の最大ピクセル数。デフォルトでは、その値は「20」です。構文 `$(".selector").draggable( { snapTolerance: 30 } );`
27	stack セレクタに一致する一連の要素のz-indexを制御し、常に現在ドラッグされているアイテムを前面に移動します。ウィンドウマネージャーのようなもので非常に便利です。デフォルトでは、その値は「false」です。オプション-スタックセレクタに一致する一連の要素のz-indexを制御し、常に現在ドラッグされているアイテムを前面に移動します。ウィンドウマネージャーのようなもので非常に便利です。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { stack: ".products" } );`
28	zIndex ドラッグ中のヘルパーのZインデックス。デフォルトでは、その値は「false」です。オプション-zIndex * ドラッグ中のヘルパーのZインデックス。デフォルトでは、その値は「false」です。構文 `$(".selector").draggable( { zIndex: 100 } );`

Sr.No.	Action & Description
1	destroy() ドラッグ機能を完全に削除します。要素は移動できなくなりました。これにより、要素は初期化前の状態に戻ります。アクション-destroy（）ドラッグ機能を完全に削除します。要素は移動できなくなりました。これにより、要素は初期化前の状態に戻ります。構文 `$(".selector").draggable("destroy");`
2	disable() ドラッグ機能を無効にします。要素は、次にdraggable（ "enable"）メソッドを呼び出すまで移動できません。アクション-disable（）ドラッグ機能を無効にします。要素は、次にdraggable（ "enable"）メソッドを呼び出すまで移動できません。構文 `$(".selector").draggable("disable");`
3	enable() ドラッグ管理を再アクティブ化します。要素は再び移動できます。アクション-enable（）ドラッグ管理を再アクティブ化します。要素は再び移動できます。構文 `$(".selector").draggable("enable");`
4	option(optionName) 指定された_optionName_に現在関連付けられている値を取得します。ここで、_optionName_は取得するオプションの名前で、タイプは_String_です。アクション-オプション（オプション名）指定された_optionName_に現在関連付けられている値を取得します。ここで、_optionName_は取得するオプションの名前で、タイプは_String_です。構文 `var isDisabled = $( ".selector" ).draggable( "option", "disabled" );`
5	option() 現在のドラッグ可能なオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-option（）現在のドラッグ可能なオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `var options = $( ".selector" ).draggable( "option" );`
6	option(optionName, value) 指定された_optionName_に関連付けられたドラッグ可能なオプションの_value_を設定します。ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。アクション-オプション（オプション名、値）指定された_optionName_に関連付けられたドラッグ可能なオプションの_value_を設定します。ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).draggable( "option", "disabled", true );`
7	option(options) ドラッグ可能の1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）ドラッグ可能の1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。構文 `$(".selector").draggable("option", { disabled: true } );`
8	widget() ドラッグ可能な要素を含むjQueryオブジェクトを返します。アクション-ウィジェット（）ドラッグ可能な要素を含むjQueryオブジェクトを返します。構文 `var widget = $(".selector ).draggable("widget");`

Sr.No.	Event Method & Description
1	create(event, ui) ドラッグ可能が作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-create（event、ui）ドラッグ可能が作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$(".selector").draggable( create: function(event, ui) {} );`
2	drag(event, ui) ドラッグ中にマウスが移動するとトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。イベント-drag（event、ui）ドラッグ中にマウスが移動するとトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。構文 `$(".selector").draggable( drag: function(event, ui) {} );`
3	start(event, ui) ドラッグの開始時にトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。イベント-start（event、ui）ドラッグの開始時にトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。構文 `$(".selector").draggable( start: function( event, ui ) {} );`
4	stop(event, ui) ドラッグが停止するとトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。イベント-停止（イベント、UI）ドラッグが停止するとトリガーされます。ここで、_event_は_Event_型であり、_ui_はヘルパー、位置、オフセットなどの_Object_型です。構文 `$(".selector").draggable( stop: function( event, ui ) {} );`

Sr.No.	Option & Description
1	accept このオプションは、ドロップ可能な要素をどのドラッグ可能要素で制御する必要がある場合に使用されます。デフォルトでは、その値は*です。オプション-受け入れこのオプションは、ドロップ可能な要素をどのドラッグ可能要素で制御する必要がある場合に使用されます。デフォルトでは、その値はで、すべてのアイテムがドロップ可能に受け入れられることを意味します。これはタイプにすることができます- セレクタ*-このタイプは、どのドラッグ可能な要素が受け入れられるかを示します。関数-ページ上の各ドラッグ可能な要素に対してコールバック関数が呼び出されます。ドラッグ可能な要素がdroppableによって受け入れられた場合、この関数は_true_を返す必要があります。構文 `$( ".selector" ).droppable( { accept: ".special" } );`
2	activeClass このオプションは、受け入れられた要素（_options.accept_に示されている要素の1つ）がドラッグされているときにドロップ可能な要素に追加される1つ以上のCSSクラスを表す文字列です。デフォルトでは、その値は false です。オプション-activeClass * このオプションは、受け入れられた要素（_options.accept_に示されている要素の1つ）がドラッグされているときにドロップ可能な要素に追加される1つ以上のCSSクラスを表す文字列です。デフォルトでは、その値は false です。構文 `$( ".selector" ).droppable( { activeClass: "ui-state-highlight" } );`
3	addClasses このオプションを_false_に設定すると、_ui-droppable_クラスがドロップ可能な要素に追加されなくなります。デフォルトでは、その値は true です。オプション-addClasses * このオプションを_false_に設定すると、ui-droppable_クラスがドロップ可能な要素に追加されなくなります。デフォルトでは、その値は true* です。これは、数百の要素で*.droppable（）_ initを呼び出すときのパフォーマンスの最適化として望ましい場合があります。構文 `$( ".selector" ).droppable( { addClasses: false } );`
4	disabled このオプションを_true_に設定すると、ドロップ可能が無効になります。デフォルトでは、その値は false です。オプション-無効このオプションを_true_に設定すると、ドロップ可能が無効になります。つまり、指定された要素上でのアイテムの移動とそれらの要素へのドロップが無効になります。デフォルトでは、その値は false です。構文 `$( ".selector" ).droppable( { disabled: true } );`
5	greedy このオプションは、ネストされたドロップ可能項目にドロップするためにどのドラッグ可能要素を受け入れるかを制御する必要がある場合に使用されます。デフォルトでは、その値は false です。このオプションが_true_に設定されている場合、親droppablesは要素を受け取りません。オプション-貪欲このオプションは、ネストされたドロップ可能項目にドロップするためにどのドラッグ可能要素を受け入れるかを制御する必要がある場合に使用されます。デフォルトでは、その値は false です。このオプションが_true_に設定されている場合、親droppablesは要素を受け取りません。構文 `$( ".selector" ).droppable( { greedy: true } );`
6	hoverClass このオプションは、受け入れられる要素（_options.accept_で示される要素）がdroppableの要素に移動するときに追加される1つ以上のCSSクラスを表す_String_です。デフォルトでは、その値は false です。オプション-hoverClass * このオプションは、受け入れられる要素（_options.accept_で示される要素）がdroppableの要素に移動するときに追加される1つ以上のCSSクラスを表す_String_です。デフォルトでは、その値は false です。構文 `$( ".selector" ).droppable( { hoverClass: "drop-hover" } );`
7	scope このオプションは、ドラッグ可能な要素のドロップ可能なアクションを、同じ_options.scope_（draggable（options）で定義）を持つアイテムのみに制限するために使用されます。デフォルトでは、その値は "default" です。オプション-スコープこのオプションは、ドラッグ可能な要素のドロップ可能なアクションを、同じ_options.scope_（draggable（options）で定義）を持つアイテムのみに制限するために使用されます。デフォルトでは、その値は "default" です。構文 `$( ".selector" ).droppable( { scope: "tasks" } );`
8	tolerance このオプションは、ドラッグ可能なオブジェクトがドロップ可能なオブジェクトの上にあるかどうかをテストするために使用するモードを指定する_String_です。デフォルトでは、その値は "intersect" です。オプション-公差このオプションは、受け入れ可能なドロップのドロップ可能要素をドラッグ可能要素がどのようにカバーするかを指定する_String_です。デフォルトでは、その値は "intersect" です。可能な値は- fit -ドラッグ可能は、ドロップ可能な要素を完全にカバーします。 intersect -ドラッグ可能は、ドロップ可能要素と両方向で少なくとも50％オーバーラップします。 pointer -マウスポインターがドロップ可能な要素に重なっています。 touch -Draggableは、ドロップ可能な任意の量のタッチに重なります。構文 `$( ".selector" ).droppable( { tolerance: "fit" } );`

Sr.No.	Action & Description
1	destroy このアクションは、要素のドロップ可能な機能を完全に破壊します。要素は初期化前の状態に戻ります。アクション-破壊このアクションは、要素のドロップ可能な機能を完全に破壊します。要素は初期化前の状態に戻ります。構文 `$( ".selector" ).droppable("destroy");`
2	disable このアクションは、ドロップ可能な操作を無効にします。要素はドロップ可能な要素ではなくなりました。このメソッドは引数を取りません。アクション-無効このアクションは、ドロップ可能な操作を無効にします。要素はドロップ可能な要素ではなくなりました。このメソッドは引数を取りません。構文 `$( ".selector" ).droppable("disable");`
3	enable このアクションにより、ドロップ可能な操作が再びアクティブになります。要素は再びドロップ可能な要素を受け取ることができます。このメソッドは引数を取りません。アクション-有効このアクションにより、ドロップ可能な操作が再びアクティブになります。要素は再びドロップ可能な要素を受け取ることができます。このメソッドは引数を取りません。構文 `$( ".selector" ).droppable("enable");`
4	option このアクションは、現在のドロップ可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。このメソッドは引数を取りません。アクション-オプションこのアクションは、現在のドロップ可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。このメソッドは引数を取りません。構文 `var options = $( ".selector" ).droppable( "option" );`
5	option( optionName ) このアクションは、指定された_optionName_に現在関連付けられているドロップ可能な要素の値を取得します。これは引数として文字列値を取ります。アクション-option（optionName）このアクションは、指定された_optionName_に現在関連付けられているドロップ可能な要素の値を取得します。これは引数として文字列値を取ります。構文 `var isDisabled = $( ".selector" ).droppable( "option", "disabled" );`
6	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたドロップ可能なオプションの値を設定します。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたドロップ可能なオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).droppable( "option", "disabled", true );`
7	option( options ) このアクションは、ドロップ可能の1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）このアクションは、ドロップ可能の1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).droppable( "option", { disabled: true } );`
8	widget このアクションは、ドロップ可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。このアクションは、ドロップ可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `var widget = $( ".selector" ).droppable( "widget" );`

Sr.No.	Event Method & Description
1	activate(event, ui) このイベントは、受け入れられたドラッグ可能な要素がドラッグを開始するとトリガーされます。これは、ドロップ可能にドロップ可能な「ライトアップ」を作成する場合に役立ちます。イベント-activate（event、ui）このイベントは、受け入れられたドラッグ可能な要素がドラッグを開始するとトリガーされます。これは、ドロップ可能にドロップ可能な「ライトアップ」を作成する場合に役立ちます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- draggable -ドラッグ可能な要素を表すjQueryオブジェクト。 helper -ドラッグされているヘルパーを表すjQueryオブジェクト。 position -\ {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のCSS位置。 offset -\ {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のオフセット位置。構文 `$( ".selector" ).droppable({ activate: function( event, ui ) {} });`
2	create(event, ui) このイベントは、ドロップ可能な要素が作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-create（event、ui）このイベントは、ドロップ可能な要素が作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).droppable({ create: function( event, ui ) {} });`
3	deactivate(event, ui) このイベントは、受け入れられたドラッグ可能がドラッグを停止したときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-deactivate（event、ui）このイベントは、受け入れられたドラッグ可能がドラッグを停止したときにトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型であり、可能な型は- draggable -ドラッグ可能な要素を表すjQueryオブジェクト。 helper -ドラッグされているヘルパーを表すjQueryオブジェクト。 position -\ {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のCSS位置。 offset -\ {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のオフセット位置。構文 `$(".selector").droppable( deactivate: function(event, ui) {} );`
4	drop(event, ui) このアクションは、要素がドロップ可能にドロップされるとトリガーされます。これは、_tolerance_オプションに基づいています。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-ドロップ（イベント、UI）このアクションは、要素がドロップ可能にドロップされるとトリガーされます。これは、_tolerance_オプションに基づいています。 _event_は_Event_型であり、_ui_は_Object_型であり、可能な型は- draggable -ドラッグ可能な要素を表すjQueryオブジェクト。 helper -ドラッグされているヘルパーを表すjQueryオブジェクト。 position -\ {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のCSS位置。 offset -\ {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のオフセット位置。構文 `$(".selector").droppable( drop: function(event, ui) {} );`
5	out(event, ui) このイベントは、受け入れられたドラッグ可能な要素がドロップ可能からドラッグされるとトリガーされます。これは、_tolerance_オプションに基づいています。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-out（event、ui）このイベントは、受け入れられたドラッグ可能な要素がドロップ可能からドラッグされるとトリガーされます。これは、_tolerance_オプションに基づいています。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$(".selector").droppable( out: function(event, ui) {} );`
6	over(event, ui) このイベントは、受け入れられたドラッグ可能な要素がドロップ可能上にドラッグされるとトリガーされます。これは、_tolerance_オプションに基づいています。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-over（event、ui）このイベントは、受け入れられたドラッグ可能な要素がドロップ可能上にドラッグされるとトリガーされます。これは、_tolerance_オプションに基づいています。 _event_は_Event_型であり、_ui_は_Object_型であり、可能な型は- draggable -ドラッグ可能な要素を表すjQueryオブジェクト。 helper -ドラッグされているヘルパーを表すjQueryオブジェクト。 position -\ {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のCSS位置。 offset -\ {top、left}オブジェクトとしてのドラッグ可能なヘルパーの現在のオフセット位置。構文 `$(".selector").droppable( over: function(event, ui) {} );`

Sr.No.	Option & Description
1	alsoResize このオプションのタイプは、Selector _、 jQuery_、または任意のDOM _Element_です。元のオブジェクトのサイズを変更するときにサイズ変更する要素も表します。デフォルトでは、その値は false です。オプション-alsoResize * このオプションは、Selector _、 jQuery_、または任意のDOM _Element_タイプにすることができます。元のオブジェクトのサイズを変更するときにサイズ変更する要素も表します。デフォルトでは、その値は false です。これはタイプにすることができます- Selector -このタイプは、サイズ変更のためにDOMドキュメントから選択されるDOM要素を示します。 jQuery -ページ上のサイズ変更可能な要素ごとにコールバック関数が呼び出されます。要素のサイズが変更された場合、この関数は_true_を返す必要があります。要素-ドキュメントオブジェクトモデル（DOM）の要素。構文 `$( ".selector" ).resizable({ alsoResize: "#identifier" });`
2	animate このオプションを true に設定すると、マウスボタンを放したときにサイズ変更中に視覚効果が有効になります。デフォルト値は false （効果なし）です。オプション-アニメーションこのオプションを true に設定すると、マウスボタンを放したときにサイズ変更中に視覚効果が有効になります。デフォルト値は false （効果なし）です。構文 `$( ".selector" ).resizable({ animate: true });`
3	animateDuration このオプションは、サイズ変更効果の持続時間（ミリ秒単位）を設定するために使用されます。このオプションは、 animate オプションが_true_の場合にのみ使用されます。デフォルトでは、値は "slow" です。オプション-animateDuration * このオプションは、サイズ変更効果の持続時間（ミリ秒単位）を設定するために使用されます。このオプションは、 animate オプションが_true_の場合にのみ使用されます。デフォルトでは、値は "slow" です。これはタイプにすることができます- Number -これはミリ秒単位で期間を指定します文字列-これは、「遅い」や「速い」などの名前付き期間を指定します。構文 `$( ".selector" ).resizable({ animateDuration: "fast" });`
4	animateEasing このオプションは、 animate オプションを使用するときに適用する_easing_を指定するために使用されます。デフォルトでは、その値は "swing" です。オプション-animateEasing * このオプションは、 animate オプションを使用するときに適用する_easing_を指定するために使用されます。デフォルトでは、その値は "swing" です。イージング関数は、アニメーション内のさまざまなポイントでアニメーションが進行する速度を指定します。構文 `$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });`
5	aspectRatio このオプションは、アイテムの縦横比（高さと幅）を維持するかどうかを示すために使用されます。デフォルトでは、その値は false です。オプション-aspectRatio * このオプションは、アイテムの縦横比（高さと幅）を維持するかどうかを示すために使用されます。デフォルトでは、その値は false です。これはタイプにすることができます- ブール-この値が_true_に設定されている場合、要素は元のアスペクト比を維持します。 Number -サイズ変更中に特定のアスペクト比を維持する要素を指定します。構文 `$( ".selector" ).resizable({ aspectRatio: true });`
6	autoHide このオプションは、マウスがアイテム上にある場合を除き、拡大アイコンまたはハンドルを非表示にするために使用されます。デフォルトでは、その値は false です。オプション-autoHide * このオプションは、マウスがアイテム上にある場合を除き、拡大アイコンまたはハンドルを非表示にするために使用されます。デフォルトでは、その値は false です。構文 `$( ".selector" ).resizable({ autoHide: true });`
7	cancel このオプションは、指定された要素のサイズ変更を防ぐために使用されます。デフォルトでは、その値は input、textarea、button、select、option です。オプション-キャンセルこのオプションは、指定された要素のサイズ変更を防ぐために使用されます。デフォルトでは、その値は input、textarea、button、select、option です。構文 `$( ".selector" ).resizable({ cancel: ".cancel" });`
8	containment このオプションは、指定された要素または領域内の要素のサイズ変更を制限するために使用されます。デフォルトでは、その値は false です。オプション-封じ込めこのオプションは、指定された要素または領域内の要素のサイズ変更を制限するために使用されます。デフォルトでは、その値は false です。これはタイプにすることができます- Selector -このタイプは、サイズ変更可能な要素が、セレクターによって検出されたリストの最初の項目のみに含まれることを示します。要素-このタイプは、DOM要素を示します。サイズ変更可能な要素は、この要素の境界ボックスに含まれます。 String -このタイプの可能な値は-_parent_および_document_です。構文 `$( ".selector" ).resizable({ containment: "parent" });`
9	delay このオプションは、許容値または遅延をミリ秒単位で設定するために使用されます。その後、サイズ変更または移動が開始されます。デフォルトでは、その値は 0 です。オプション-遅延このオプションは、許容値または遅延をミリ秒単位で設定するために使用されます。その後、サイズ変更または移動が開始されます。デフォルトでは、その値は 0 です。構文 `$( ".selector" ).resizable({ delay: 150 });`
10	disabled このオプションは、_true_に設定されている場合、サイズ変更メカニズムを無効にします。マウスは、サイズ変更可能（「有効化」）を使用してメカニズムが有効になるまで、要素のサイズを変更しません。デフォルトでは、その値は false です。オプション-無効このオプションは、_true_に設定されている場合、サイズ変更メカニズムを無効にします。マウスは、サイズ変更可能（「有効化」）を使用してメカニズムが有効になるまで、要素のサイズを変更しません。デフォルトでは、その値は false です。構文 `$( ".selector" ).resizable({ disabled: true });`
11	distance このオプションを使用すると、マウスが距離（ピクセル）を移動したときにのみサイズ変更が開始されます。デフォルトでは、その値は* 1ピクセルです。これにより、要素をクリックしたときに意図しないサイズ変更を防ぐことができます。オプション-距離* このオプションを使用すると、マウスが距離（ピクセル）を移動したときにのみサイズ変更が開始されます。デフォルトでは、その値は* 1ピクセル*です。これにより、要素をクリックしたときに意図しないサイズ変更を防ぐことができます。構文 `$( ".selector" ).resizable({ distance: 30 });`
12	ghost このオプションを_true_に設定すると、サイズ変更のために半透明のヘルパー要素が表示されます。このゴーストアイテムは、マウスを離すと削除されます。デフォルトでは、その値は false です。オプション-ゴーストこのオプションを_true_に設定すると、サイズ変更のために半透明のヘルパー要素が表示されます。このゴーストアイテムは、マウスを離すと削除されます。デフォルトでは、その値は false です。構文 `$( ".selector" ).resizable({ ghost: true });`
13	grid このオプションのタイプは配列[x、y]で、マウスの移動中に要素が水平および垂直に拡大するピクセル数を示します。デフォルトでは、その値は false です。オプション-グリッドこのオプションのタイプは配列[x、y]で、マウスの移動中に要素が水平および垂直に拡大するピクセル数を示します。デフォルトでは、その値は false です。構文 `$( ".selector" ).resizable({ grid: [ 20, 10 ] });`
14	handles このオプションは、要素のどの側面または角度をサイズ変更できるかを示す文字列です。デフォルトでは、その値は e、s、se です。オプション-ハンドルこのオプションは、要素のどの側面または角度をサイズ変更できるかを示す文字列です。可能な値は次のとおりです。4つの辺は_n、e、s、、 w_、4つの角は_ne、se、nw、、 sw_です。文字_n、e、s、_、および_w_は、4つの基本ポイント（北、南、東、および西）を表します。デフォルトでは、その値は e、s、se です。構文 `$( ".selector" ).resizable({ handles: "n, e, s, w" });`
15	helper このオプションは、サイズ変更する要素のスタイルを設定するCSSクラスを追加するために使用されます。要素のサイズが変更されると、新しい<div>要素が作成されます。これは、スケーリングされる要素（ui-resizable-helperクラス）です。サイズ変更が完了すると、元の要素のサイズが変更され、<div>要素が消えます。デフォルトでは、その値は false です。オプション-ヘルパーこのオプションは、サイズ変更する要素のスタイルを設定するCSSクラスを追加するために使用されます。要素のサイズが変更されると、新しい<div>要素が作成されます。これは、スケーリングされる要素（ui-resizable-helperクラス）です。サイズ変更が完了すると、元の要素のサイズが変更され、<div>要素が消えます。デフォルトでは、その値は false です。構文 `$( ".selector" ).resizable({ helper: "resizable-helper" });`
16	maxHeight このオプションは、サイズ変更可能なサイズの最大高さを設定するために使用されます。デフォルトでは、その値は null です。オプション-maxHeight * このオプションは、サイズ変更可能なサイズの最大高さを設定するために使用されます。デフォルトでは、その値は null です。構文 `$( ".selector" ).resizable({ maxHeight: 300 });`
17	maxWidth このオプションは、サイズ変更可能なサイズ変更可能な最大幅を設定するために使用されます。デフォルトでは、その値は null です。オプション-maxWidth * このオプションは、サイズ変更可能なサイズ変更可能な最大幅を設定するために使用されます。デフォルトでは、その値は null です。構文 `$( ".selector" ).resizable({ maxWidth: 300 });`
18	minHeight このオプションは、サイズ変更可能なサイズ変更の最小高さを設定するために使用されます。デフォルトでは、その値は 10 です。オプション-minHeight * このオプションは、サイズ変更可能なサイズ変更の最小高さを設定するために使用されます。デフォルトでは、その値は 10 です。構文 `$( ".selector" ).resizable({ minHeight: 150 });`
19	minWidth このオプションを使用して、サイズ変更可能なサイズの最小幅を設定します。デフォルトでは、その値は 10 です。オプション-minWidth * このオプションを使用して、サイズ変更可能なサイズの最小幅を設定します。デフォルトでは、その値は 10 です。これはタイプにすることができます- 構文 `$( ".selector" ).resizable({ minWidth: 150 });`

Sr.No.	Action & Description
1	destroy このアクションは、要素のサイズ変更可能な機能を完全に破壊します。これにより、要素は初期化前の状態に戻ります。アクション-破壊このアクションは、要素のサイズ変更可能な機能を完全に破壊します。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$( ".selector" ).resizable("destroy");`
2	disable このアクションは、要素のサイズ変更機能を無効にします。このメソッドは引数を取りません。アクション-無効このアクションは、要素のサイズ変更機能を無効にします。このメソッドは引数を取りません。構文 `$( ".selector" ).resizable("disable");`
3	enable このアクションにより、要素のサイズ変更機能が有効になります。このメソッドは引数を取りません。アクション-有効このアクションにより、要素のサイズ変更機能が有効になります。このメソッドは引数を取りません。構文 `$( ".selector" ).resizable("enable");`
4	option( optionName ) このアクションは、指定された_optionName_の値を取得します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。アクション-option（optionName）このアクションは、指定された_optionName_の値を取得します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。構文 `var isDisabled = $( ".selector" ).resizable( "option", "disabled" );`
5	option() 現在のサイズ変更可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。これは引数を受け入れません。アクション-option（）現在のサイズ変更可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。これは引数を受け入れません。構文 `var options = $( ".selector" ).resizable( "option" );`
6	option(optionName, value ) このアクションは、指定された_optionName_を使用して、サイズ変更可能なオプションの値を設定します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。アクション-option（optionName、value）このアクションは、指定された_optionName_を使用して、サイズ変更可能なオプションの値を設定します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。構文 `$( ".selector" ).resizable( "option", "disabled", true );`
7	option( options ) このアクションは、サイズ変更可能なオプションを1つ以上設定します。アクション-オプション（オプション）このアクションは、サイズ変更可能なオプションを1つ以上設定します。構文 `$( ".selector" ).resizable( "option", { disabled: true } );`
8	widget() このアクションは、サイズ変更可能な要素を含む_jQuery_オブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェット（）このアクションは、サイズ変更可能な要素を含む_jQuery_オブジェクトを返します。このメソッドは引数を取りません。構文 `var widget = $( ".selector" ).resizable( "widget" );`

Sr.No.	Option & Description
1	appendTo このオプションは、選択ヘルパー（なげなわ）を追加する要素を示します。デフォルトでは、その値は body です。オプション-appendTo * このオプションは、選択ヘルパー（なげなわ）を追加する要素を示します。デフォルトでは、その値は body です。構文 `$( ".selector" ).selectable({ appendTo: "#identifier" });`
2	autoRefresh このオプションを_true_に設定すると、選択可能な各アイテムの位置とサイズは、選択操作の開始時に計算されます。デフォルトでは、その値は true です。オプション-autoRefresh * このオプションを_true_に設定すると、選択可能な各アイテムの位置とサイズは、選択操作の開始時に計算されます。デフォルトでは、その値は true です。多数のアイテムがある場合、これを_false_に設定し、_refresh（）_メソッドを手動で呼び出すことができます。構文 `$( ".selector" ).selectable({ autoRefresh: false });`
3	cancel このオプションは、要素の選択を開始する場合、選択を禁止します。デフォルトでは、その値は input、textarea、button、select、option です。オプション-キャンセルこのオプションは、要素の選択を開始する場合、選択を禁止します。デフォルトでは、その値は input、textarea、button、select、option です。構文 `$( ".selector" ).selectable({ cancel: "a,.cancel" });`
4	delay このオプションは、ミリ秒単位で時間を設定し、選択を開始するタイミングを定義するために使用されます。これは、不要な選択を防ぐために使用できます。デフォルトでは、その値は 0 です。オプション-遅延このオプションは、ミリ秒単位で時間を設定し、選択を開始するタイミングを定義するために使用されます。これは、不要な選択を防ぐために使用できます。デフォルトでは、その値は 0 です。構文 `$( ".selector" ).selectable({ delay: 150 });`
5	disabled このオプションをtrueに設定すると、選択メカニズムが無効になります。ユーザーは、選択可能（「有効」）命令を使用してメカニズムが復元されるまで要素を選択できません。デフォルトでは、その値は false です。オプション-無効このオプションをtrueに設定すると、選択メカニズムが無効になります。ユーザーは、選択可能（「有効」）命令を使用してメカニズムが復元されるまで要素を選択できません。デフォルトでは、その値は false です。構文 `$( ".selector" ).selectable({ disabled: true });`
6	distance このオプションは、進行中の選択を考慮するためにマウスが移動する必要がある距離（ピクセル単位）です。これは、たとえば、単純なクリックがグループ選択として解釈されるのを防ぐのに役立ちます。デフォルトでは、その値は 0 です。オプション-距離このオプションは、進行中の選択を考慮するためにマウスが移動する必要がある距離（ピクセル単位）です。これは、たとえば、単純なクリックがグループ選択として解釈されるのを防ぐのに役立ちます。デフォルトでは、その値は 0 です。構文 `$( ".selector" ).selectable({ distance: 30 });`
7	filter このオプションは、選択の一部にできる要素を示すセレクターです。デフォルトでは、その値は*です。オプション-フィルターこのオプションは、選択の一部にできる要素を示すセレクターです。デフォルトでは、その値は*です。構文 `$( ".selector" ).selectable({ filter: "li" });`
8	tolerance このオプションは、選択ヘルパー（なげなわ）がアイテムを選択するかどうかをテストするために使用するモードを指定します。デフォルトでは、その値は touch です。オプション-公差このオプションは、選択ヘルパー（なげなわ）がアイテムを選択するかどうかをテストするために使用するモードを指定します。デフォルトでは、その値は touch です。これはタイプにすることができます- フィット-このタイプは、ドラッグ選択が選択されるために要素を完全に包含しなければならないことを示します。 touch -このタイプは、ドラッグ長方形が選択可能なアイテムのどの部分とも交差する必要があることを示します。構文 `$( ".selector" ).selectable({ tolerance: "fit" });`

Sr.No.	Action & Description
1	destroy このアクションにより、要素の選択可能な機能が完全に削除されます。要素は初期化前の状態に戻ります。アクション-破壊このアクションにより、要素の選択可能な機能が完全に削除されます。要素は初期化前の状態に戻ります。構文 `$( ".selector" ).selectable("destroy");`
2	disable このアクションは、要素の選択可能な機能を無効にします。このメソッドは引数を取りません。アクション-無効このアクションにより、要素の選択可能な機能が完全に削除されます。要素は初期化前の状態に戻ります。構文 `$( ".selector" ).selectable("disable");`
3	enable このアクションにより、要素の選択可能な機能が有効になります。このメソッドは引数を取りません。アクション-有効このアクションにより、要素の選択可能な機能が有効になります。このメソッドは引数を取りません。構文 `$( ".selector" ).selectable("enable");`
4	option( optionName ) このアクションは、指定された_optionName_に現在関連付けられている値を取得します。アクション-option（optionName）このアクションは、指定された_optionName_に現在関連付けられている値を取得します。構文 `var isDisabled = $( ".selector" ).selectable( "option", "disabled" );`
5	option() このアクションは、現在の選択可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。アクション-option（）このアクションは、現在の選択可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。構文 `var options = $( ".selector" ).selectable( "option" );`
6	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられた選択可能なオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられた選択可能なオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).selectable( "option", "disabled", true );`
7	option( options ) このアクションは、選択可能の1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）このアクションは、選択可能の1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).selectable( "option", { disabled: true } );`
8	refresh このアクションにより、選択可能な要素のサイズと位置が更新されます。主に_autoRefresh_オプションが無効になっている（_false_に設定されている）ときに使用されます。このメソッドは引数を取りません。アクション-更新このアクションにより、選択可能な要素のサイズと位置が更新されます。ほとんどの場合、_autoRefresh_オプションが無効になっています。このメソッドは引数を取りません。構文 `$( ".selector" ).selectable("refresh");`
9	widget このアクションは、選択可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェットこのアクションは、選択可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `var widget = $( ".selector" ).selectable( "widget" );`

Sr.No.	Event Method & Description
1	create(event, ui) このイベントは、選択可能な要素が作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-create（event、ui）このイベントは、選択可能な要素が作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).selectable({ create: function( event, ui ) {} });`
2	selected(event, ui) このイベントは、選択される要素ごとにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-選択（イベント、UI）このイベントは、選択される要素ごとにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- selected -これは、選択された選択可能な項目を指定します。構文 `$( ".selector" ).selectable({ selected: function( event, ui ) {} });`
3	selecting(event, ui) このイベントは、選択されようとしている選択可能な要素ごとにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-選択（イベント、UI）このイベントは、選択されようとしている選択可能な要素ごとにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- selecting -これは、選択されようとしている要素への参照を指定します。構文 `$( ".selector" ).selectable({ selecting: function( event, ui ) {} });`
4	start(event, ui) このイベントは、選択操作の開始時にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-start（event、ui）このイベントは、選択操作の開始時にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).selectable({ start: function( event, ui ) {} });`
5	stop(event, ui) このイベントは、選択操作の終了時にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-停止（イベント、UI）このイベントは、選択操作の終了時にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).selectable({ stop: function( event, ui ) {} });`
6	unselected(event, ui) このイベントは、選択されなくなった各要素の選択操作の終了時にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-未選択（イベント、UI）このイベントは、選択されなくなった各要素の選択操作の終了時にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- unselected -選択解除された要素への参照を含む要素。構文 `$( ".selector" ).selectable({ unselected: function( event, ui ) {} });`
7	unselecting(event, ui) このイベントは、選択解除されようとしている選択された各要素の選択操作中にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-選択解除（イベント、UI）このイベントは、選択解除されようとしている選択された各要素の選択操作中にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- unselecting -選択解除されようとしている要素への参照を含む要素。構文 `$( ".selector" ).selectable({ unselecting: function( event, ui ) {} });`

Sr.No.	Option & Description
1	appendTo このオプションは、_options.helper_で作成された新しい要素が移動/ドラッグ時に挿入される要素を指定します。デフォルトでは、その値は parent です。オプション-appendTo * このオプションは、_options.helper_で作成された新しい要素が移動/ドラッグ時に挿入される要素を指定します。デフォルトでは、その値は parent です。これはタイプにすることができます- Selector -これは、ヘルパーを追加する要素を指定するセレクターを示します。 jQuery -これは、ヘルパーを追加する要素を含むjQueryオブジェクトを示します。要素-ヘルパーを追加するドキュメントオブジェクトモデル（DOM）の要素。文字列-文字列「親」は、ヘルパーをソート可能なアイテムの兄弟にします。構文 `$(".selector").sortable( { appendTo: document.body } );`
2	axis このオプションは、移動軸を示します（「x」は水平、「y」は垂直）。デフォルトでは、その値は false です。オプション-軸このオプションは、移動軸を示します（「x」は水平、「y」は垂直）。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { axis: "x" } );`
3	cancel このオプションは、セレクター要素のいずれかをクリックして要素のソートを防ぐために使用されます。デフォルトでは、その値は "input、textarea、button、select、option" です。オプション-キャンセルこのオプションは、セレクター要素のいずれかをクリックして要素のソートを防ぐために使用されます。デフォルトでは、その値は "input、textarea、button、select、option" です。構文 `$(".selector").sortable( { cancel: "a,button" } );`
4	connectWith このオプションは、このソート可能からアイテムを受け入れることができる別のソート可能要素を識別するセレクタです。これにより、1つのリストのアイテムを他のリストに移動でき、頻繁で便利なユーザー操作が可能になります。省略すると、他の要素は接続されません。これは一方向の関係です。デフォルトでは、その値は false です。オプション-connectWith * このオプションは、このソート可能からアイテムを受け入れることができる別のソート可能要素を識別するセレクタです。これにより、1つのリストのアイテムを他のリストに移動でき、頻繁で便利なユーザー操作が可能になります。省略すると、他の要素は接続されません。これは一方向の関係です。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { connectWith: "#identifier" } );`
5	containment このオプションは、変位が発生する要素を示します。要素は、セレクター（リストの最初の項目のみが考慮されます）、DOM要素、または文字列 "parent"（親要素）または "window"（HTMLページ）で表されます。オプション-封じ込めこのオプションは、変位が発生する要素を示します。これはタイプにすることができます- セレクタ-これはセレクタを示します。要素はセレクターで表されます（リストの最初の項目のみが考慮されます）要素-コンテナとして使用するDOM要素。 String -コンテナとして使用する要素を識別する文字列。可能な値は、parent（親要素）、_ document_、または_window_（HTMLページ）です。構文 `$(".selector").sortable( { containment: "parent" } );`
6	cursor 要素が移動するときのカーソルCSSプロパティを指定します。マウスポインターの形状を表します。デフォルトでは、その値は「auto」です。オプション-カーソル要素が移動するときのカーソルCSSプロパティを指定します。マウスポインターの形状を表します。デフォルトでは、その値は「auto」です。可能な値は- 「crosshair」（クロス）「デフォルト」（矢印）「ポインター」（手）「移動」（2つの矢印が交差する）「e-resize」（右に展開）「ne-resize」（右に拡大）「nw-resize」（左上に拡大）「n-resize」（拡大）「se-resize」（右下に展開）「sw-resize」（左下に拡大）「s-resize」（展開）「auto」（デフォルト）「w-resize」（左に展開） "text"（テキストを書き込むためのポインター）「待機」（砂時計） "help"（ヘルプポインター）構文 `$(".selector").sortable( { cursor: "move" } );`
7	cursorAt マウスカーソルを基準としたドラッグヘルパーのオフセットを設定します。座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして与えることができます：\ {top、left、right、bottom}。デフォルトでは、その値は「false」です。オプション-cursorAt * マウスカーソルを基準としたドラッグヘルパーのオフセットを設定します。座標は、1つまたは2つのキーの組み合わせを使用してハッシュとして与えることができます：\ {top、left、right、bottom}。デフォルトでは、その値は「false」です。構文 `$(".selector").sortable( { cursorAt: { left: 5 } } );`
8	delay マウスの最初の動きが考慮されるまでの遅延（ミリ秒）。その時間の後に変位が始まる場合があります。デフォルトでは、その値は「0」です。オプション-遅延マウスの最初の動きが考慮されるまでの遅延（ミリ秒）。その時間の後に変位が始まる場合があります。デフォルトでは、その値は「0」です。構文 `$(".selector").sortable( { delay: 150 } );`
9	disabled このオプションを_true_に設定すると、ソート可能な機能が無効になります。デフォルトでは、その値は false です。オプション-無効このオプションを_true_に設定すると、ソート可能な機能が無効になります。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { disabled: true } );`
10	distance ソートを開始する前にマウスを移動する必要があるピクセル数。指定した場合、マウスが距離を超えてドラッグされるまでソートは開始されません。デフォルトでは、その値は「1」です。オプション-距離ソートを開始する前にマウスを移動する必要があるピクセル数。指定した場合、マウスが距離を超えてドラッグされるまでソートは開始されません。デフォルトでは、その値は「1」です。構文 `$(".selector").sortable( { distance: 5 } );`
11	dropOnEmpty このオプションを_false_に設定すると、このソート可能からのアイテムは、空の接続ソート可能にドロップできません。デフォルトでは、その値は true です。オプション-dropOnEmpty * このオプションを_false_に設定すると、このソート可能からのアイテムは、空の接続ソート可能にドロップできません。デフォルトでは、その値は true です。構文 `$(".selector").sortable( { dropOnEmpty: false } );`
12	forceHelperSize このオプションが_true_に設定されている場合、ヘルパーにサイズを強制します。デフォルトでは、その値は false です。オプション-forceHelperSize * このオプションが_true_に設定されている場合、ヘルパーにサイズを強制します。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { forceHelperSize: true } );`
13	forcePlaceholderSize このオプションは、_true_に設定されている場合、アイテムが移動されるときのプレースホルダーのサイズを考慮します。このオプションは、_options.placeholder_が初期化されている場合にのみ役立ちます。デフォルトでは、その値は false です。オプション-forcePlaceholderSize * このオプションは、_true_に設定されている場合、アイテムが移動されるときのプレースホルダーのサイズを考慮します。このオプションは、_options.placeholder_が初期化されている場合にのみ役立ちます。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { forcePlaceholderSize: true } );`
14	grid このオプションは配列[x、y]で、マウスの移動中にソート要素が水平および垂直に移動するピクセル数を示します。デフォルトでは、その値は false です。オプション-グリッドこのオプションは配列[x、y]で、マウスの移動中にソート要素が水平および垂直に移動するピクセル数を示します。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { grid: [ 20, 10 ] } );`
15	handle 指定した場合、指定した要素でマウスダウンが発生しない限り、ソートの開始を制限します。デフォルトでは、その値は false です。オプション-ハンドル指定した場合、指定した要素でマウスダウンが発生しない限り、ソートの開始を制限します。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { handle: ".handle" } );`
16	helper ディスプレイのドラッグにヘルパー要素を使用できるようにします。デフォルトでは、その値は original です。オプション-ヘルパーディスプレイのドラッグにヘルパー要素を使用できるようにします。デフォルトでは、その値は original です。可能な値は- String -「clone」に設定すると、要素が複製され、複製がドラッグされます。関数-ドラッグ中に使用するDOMElementを返す関数。構文 `$(".selector").sortable( { helper: "clone" } );`
17	items このオプションは、DOM要素内のどのアイテムをソートするかを指定します。デフォルトでは、その値は> です。オプション-アイテム* このオプションは、DOM要素内のどのアイテムをソートするかを指定します。デフォルトでは、その値は> *です構文 `$(".selector").sortable( { items: "> li" } );`
18	opacity このオプションは、ソート中のヘルパーの不透明度を定義するために使用されます。デフォルトでは、その値は false です。オプション-不透明度このオプションは、ソート中のヘルパーの不透明度を定義するために使用されます。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { opacity: 0.5 } );`
19	placeholder このオプションは、それ以外の場合は空白に適用されるクラス名に使用されます。デフォルトでは、値は false です。オプション-プレースホルダー構文 `$(".selector").sortable( { addClasses: false } );`
20	revert このオプションは、スムーズなアニメーションを使用して、ソート可能なアイテムを新しい位置に戻すかどうかを決定します。デフォルトでは、その値は false です。オプション-元に戻すこのオプションは、スムーズなアニメーションを使用して、ソート可能なアイテムを新しい位置に戻すかどうかを決定します。デフォルトでは、その値は false です。構文 `$(".selector").sortable( { revert: true } );`
21	scroll このオプションは、スクロールを有効にするために使用されます。 _true_に設定すると、ページは端に来たときにスクロールします。デフォルトでは、その値は true です。オプション-スクロールこのオプションは、スクロールを有効にするために使用されます。 _true_に設定すると、ページは端に来たときにスクロールします。デフォルトでは、その値は true です。構文 `$(".selector").sortable( { scroll: false } );`
22	scrollSensitivity このオプションは、スクロールを発生させるためにマウスが可視領域を出る必要があるピクセル数を示します。デフォルトでは、その値は 20 です。このオプションは、options.scrollがtrueに設定されている場合にのみ使用されます。オプション-scrollSensitivity * このオプションは、スクロールを発生させるためにマウスが可視領域を出る必要があるピクセル数を示します。デフォルトでは、その値は 20 です。このオプションは、options.scrollがtrueに設定されている場合にのみ使用されます。構文 `$(".selector").sortable( { scrollSensitivity: 10 } );`
23	scrollSpeed このオプションは、スクロールが開始された後のディスプレイのスクロール速度を示します。デフォルトでは、その値は 20 です。オプション-scrollSpeed * このオプションは、スクロールが開始された後のディスプレイのスクロール速度を示します。デフォルトでは、その値は 20 です。構文 `$(".selector").sortable( { scrollSpeed: 40 } );`
24	tolerance このオプションは、移動するアイテムが別のアイテムの上にあるかどうかをテストするために使用するモードを指定する_String_です。デフォルトでは、その値は "intersect" です。オプション-公差このオプションは、移動するアイテムが別のアイテムの上にあるかどうかをテストするために使用するモードを指定する_String_です。デフォルトでは、その値は "intersect" です。可能な値は- inters -アイテムは他のアイテムと少なくとも50％オーバーラップします。 pointer -マウスポインターが他のアイテムと重なっています。構文 `$(".selector").sortable( { tolerance: "pointer" } );`
25	zIndex このオプションは、ソート中の要素/ヘルパーのz-indexを表します。デフォルトでは、その値は 1000 です。オプション-zIndex * このオプションは、ソート中の要素/ヘルパーのZ-indexを表します。デフォルトでは、その値は 1000 です。構文 `$(".selector").sortable( { zIndex: 9999 } );`

Sr.No.	Action & Description
1	cancel() このアクションは、現在のソート操作をキャンセルします。これは、ソート受信イベントおよびソート停止イベントのハンドラー内で最も役立ちます。このメソッドは引数を取りません。アクション-cancel（）現在のソート操作をキャンセルします。これは、ソート受信イベントおよびソート停止イベントのハンドラー内で最も役立ちます。このメソッドは引数を取りません。構文 `$(".selector").sortable("cancel");`
2	destroy() このアクションにより、ソート機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-destroy（）このアクションにより、ソート機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$(".selector").sortable("destroy");`
3	disable() このアクションは、ラップされたセット内のソート可能な要素のソート機能を無効にします。要素のソート可能性は削除されず、このメソッドの有効なバリアントを呼び出すことで復元できます。このメソッドは引数を取りません。アクション-disable（）このアクションは、ラップされたセット内のソート可能な要素のソート機能を無効にします。要素のソート可能性は削除されず、このメソッドの有効なバリアントを呼び出すことで復元できます。このメソッドは引数を取りません。構文 `$(".selector").sortable("disable");`
4	enable() ソート可能性が無効になっているラップされたセット内のソート可能要素のソート可能性を再度有効にします。この方法では、ソート不可能な要素にソート機能が追加されないことに注意してください。このメソッドは引数を取りません。アクション-enable（）ソート可能性が無効になっているラップされたセット内のソート可能要素のソート可能性を再度有効にします。この方法では、ソート不可能な要素にソート機能が追加されないことに注意してください。このメソッドは引数を取りません。構文 `$(".selector").sortable("enable");`
5	option( optionName ) このアクションは、指定された_optionName_に現在関連付けられている値を取得します。ここで、_optionName_は取得するオプションの名前です。アクション-option（optionName）このアクションは、指定された_optionName_に現在関連付けられている値を取得します。ここで、_optionName_は取得するオプションの名前です。構文 `var isDisabled = $( ".selector" ).sortable( "option", "disabled" );`
6	option() 現在のソート可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。このメソッドは引数を取りません。アクション-option（）現在のソート可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。このメソッドは引数を取りません。構文 `$(".selector").sortable("option");`
7	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたソート可能なオプションの値を設定します。ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたソート可能なオプションの値を設定します。ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$(".selector").sortable("option", "disabled", true);`
8	option( options ) ソート可能の1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）ソート可能の1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).sortable( "option", { disabled: true } );`
9	refresh() このアクションは、必要に応じてアイテムのリストを更新します。このメソッドは引数を取りません。このメソッドを呼び出すと、ソート可能に追加された新しいアイテムが認識されます。アクション-refresh（）このアクションは、必要に応じてアイテムのリストを更新します。このメソッドは引数を取りません。このメソッドを呼び出すと、ソート可能に追加された新しいアイテムが認識されます。構文 `$(".selector").sortable("refresh");`
10	toArray( options ) このメソッドは、ソート可能な要素の_id_値の配列をソート順に返します。このメソッドは、_Options_をパラメーターとして使用して、シリアル化または並べ替え順序をカスタマイズします。アクション-toArray（options）このメソッドは、ソート可能な要素の_id_値の配列をソート順に返します。このメソッドは、_Options_をパラメーターとして使用して、シリアル化または並べ替え順序をカスタマイズします。構文 `var sortedIDs = $( ".selector" ).sortable( "toArray" );`
11	serialize( options ) このメソッドは、ソート可能から形成されたシリアル化されたクエリ文字列（Ajaxを介して送信可能）を返します。アクション-serialize（options）このメソッドは、ソート可能から形成されたシリアル化されたクエリ文字列（Ajaxを介して送信可能）を返します。デフォルトでは、「setname_number」の形式で各アイテムのIDを調べることで機能し、「setname [] = number＆setname [] = number」のようなハッシュを吐き出します。構文 `var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );`
12	refreshPositions() このメソッドは、ソート可能なオブジェクトのキャッシュされた情報を更新するために、主に内部的に使用されます。このメソッドは引数を取りません。アクション-refreshPositions（）このメソッドは、ソート可能なオブジェクトのキャッシュされた情報を更新するために、主に内部的に使用されます。このメソッドは引数を取りません。構文 `$(".selector").sortable("refreshPositions");`
13	widget() このメソッドは、ソート可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェット（）このメソッドは、ソート可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `$(".selector").sortable("widget");`

Sr.No.	Event Method & Description
1	activate(event, ui) このイベントは、接続されたソート可能に対してソート操作が開始されると、ソート可能に対してトリガーされます。イベント-activate（event、ui）このイベントは、接続されたソート可能に対してソート操作が開始されると、ソート可能に対してトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ activate: function( event, ui ) {} });`
2	beforeStop(event, ui) このイベントは、ソート操作が終了しようとしているときにトリガーされ、ヘルパーおよびプレースホルダー要素の参照は引き続き有効です。イベント-beforeStop（event、ui）このイベントは、ソート操作が終了しようとしているときにトリガーされ、ヘルパーおよびプレースホルダー要素の参照は引き続き有効です。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ beforeStop: function( event, ui ) {} });`
3	change(event, ui) このイベントは、ソートされた要素がDOM内で位置を変更したときにトリガーされます。イベント-change（event、ui）このイベントは、ソートされた要素がDOM内で位置を変更したときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ change: function( event, ui ) {} });`
4	create(event, ui) このイベントは、ソート可能が作成されるとトリガーされます。イベント-create（event、ui）このイベントは、ソート可能が作成されるとトリガーされます。ここで、event_は_Event_型であり、_ui_は_Object_型です。 _UIオブジェクトは空ですが、他のイベントとの一貫性のために含まれています。構文 `$( ".selector" ).sortable({ create: function( event, ui ) {} });`
5	deactivate(event, ui) このイベントは、接続されたソートが停止したときにトリガーされ、接続されたソート可能に伝播されます。イベント-deactivate（event、ui）このイベントは、接続されたソートが停止したときにトリガーされ、接続されたソート可能に伝播されます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ deactivate: function( event, ui ) {} });`
6	out(event, ui) このイベントは、並べ替えアイテムが接続リストから離れたときにトリガーされます。イベント-out（event、ui）このイベントは、並べ替えアイテムが接続リストから離れたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ out: function( event, ui ) {} });`
7	over(event, ui) このイベントは、ソート項目が接続リストに移動したときにトリガーされます。イベント-over（event、ui）このイベントは、ソート項目が接続リストに移動したときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ over: function( event, ui ) {} });`
8	receive(event, ui) このイベントは、接続リストが別のリストからソート項目を受信したときにトリガーされます。イベント-receive（event、ui）このイベントは、接続リストが別のリストからソート項目を受信したときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ receive: function( event, ui ) {} });`
9	remove(event, ui) このイベントは、ソート項目が接続リストから削除され、別のリストにドラッグされるとトリガーされます。イベント-remove（event、ui）このイベントは、ソート項目が接続リストから削除され、別のリストにドラッグされるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ remove: function( event, ui ) {} });`
10	sort(event, ui) このイベントは、ソート操作中にmousemoveイベントに対して繰り返しトリガーされます。イベント-sort（event、ui）このイベントは、ソート操作中にmousemoveイベントに対して繰り返しトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ sort: function( event, ui ) {} });`
11	start(event, ui) このイベントは、ソート操作が開始されるとトリガーされます。イベント-start（event、ui）このイベントは、ソート操作が開始されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ start: function( event, ui ) {} });`
12	stop(event, ui) このイベントは、ソート操作が完了するとトリガーされます。イベント-停止（イベント、UI）このイベントは、ソート操作が完了するとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ stop: function( event, ui ) {} });`
13	update(event, ui) このイベントは、ソート操作が停止し、アイテムの位置が変更されたときにトリガーされます。イベント-更新（イベント、UI）このイベントは、ソート操作が停止し、アイテムの位置が変更されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- helper -ソートされるヘルパーを表すjQueryオブジェクト。 item -現在のドラッグされた要素を表すjQueryオブジェクト。 offset -\ {top、left}として表されるヘルパーの現在の絶対位置。 position -\ {top、left}オブジェクトとしてのヘルパーの現在のCSS位置。 originalPosition -\ {top、left}として表される要素の元の位置。送信者-あるソート可能から別のソート可能に移動する場合、アイテムが由来するソート可能。 placeholder -プレースホルダーとして使用されている要素を表すjQueryオブジェクト。構文 `$( ".selector" ).sortable({ update: function( event, ui ) {} });`

Sr.No.	Option & Description
1	active ページに最初にアクセスしたときに開いているメニューのインデックスを示します。デフォルトでは、その値は 0 、つまり最初のメニューです。オプション-アクティブページに最初にアクセスしたときに開いているメニューのインデックスを示します。デフォルトでは、その値は 0 、つまり最初のメニューです。これはタイプにすることができます- ブール-_false_に設定すると、すべてのパネルが折りたたまれます。これには、折りたたみオプションが_true_である必要があります。整数-アクティブな（開いている）パネルのゼロから始まるインデックス。負の値は、最後のパネルから逆方向に進むパネルを選択します。構文 `$( ".selector" ).accordion( { active: 2 } );`
2	animate このオプションは、変化するパネルをアニメーション化する方法を設定するために使用されます。デフォルトでは、その値は \ {} です。オプション-アニメーションこのオプションは、変化するパネルをアニメーション化する方法を設定するために使用されます。デフォルトでは、その値は \ {} です。これはタイプにすることができます- ブール-_false_の値はアニメーションを無効にします。 Number -これはミリ秒単位の期間です String -デフォルト期間で使用するイージングの名前。オブジェクト-イージングと期間のプロパティを持つアニメーション設定。構文 `$( ".selector" ).accordion( { animate: "bounceslide" } );`
3	collapsible このオプションを_true_に設定すると、ユーザーはメニューをクリックしてメニューを閉じることができます。デフォルトでは、開いているパネルのヘッダーをクリックしても効果はありません。デフォルトでは、その値は false です。オプション-折りたたみ可能このオプションを_true_に設定すると、ユーザーはメニューをクリックしてメニューを閉じることができます。デフォルトでは、開いているパネルのヘッダーをクリックしても効果はありません。デフォルトでは、その値は false です。構文 `$( ".selector" ).accordion( { collapsible: true } );`
4	disabled このオプションを_true_に設定すると、アコーディオンが無効になります。デフォルトでは、その値は false です。オプション-無効このオプションを_true_に設定すると、アコーディオンが無効になります。デフォルトでは、その値は false です。構文 `$( ".selector" ).accordion( { disabled: true } );`
5	event このオプションは、アコーディオンヘッダーの選択に使用されるイベントを指定します。デフォルトでは、その値はクリックです。オプション-イベントこのオプションは、アコーディオンヘッダーの選択に使用されるイベントを指定します。デフォルトでは、その値はクリックです。構文 `$( ".selector" ).accordion( { event: "mouseover" } );`
6	header このオプションは、ヘッダー要素を識別するためのデフォルトのパターンをオーバーライドするセレクターまたは要素を指定します。デフォルトでは、その値は> li>：first-child、>：not（li）：even です。オプション-ヘッダーこのオプションは、ヘッダー要素を識別するためのデフォルトのパターンをオーバーライドするセレクターまたは要素を指定します。デフォルトでは、その値は> li>：first-child、>：not（li）：even です。構文 `$( ".selector" ).accordion( { header: "h3" } );`
7	heightStyle このオプションは、アコーディオンとパネルの高さを制御するために使用されます。デフォルトでは、その値は auto です。オプション-heightStyle * このオプションは、アコーディオンとパネルの高さを制御するために使用されます。デフォルトでは、その値は auto です。可能な値は- auto -すべてのパネルは最も高いパネルの高さに設定されます。 fill -アコーディオンの親の高さに基づいて利用可能な高さに拡張します。 content -各パネルの高さはコンテンツの高さのみです。構文 `$( ".selector" ).accordion( { heightStyle: "fill" } );`
8	icons このオプションは、開いたパネルと閉じたパネルのヘッダーテキストの左側に使用するアイコンを定義するオブジェクトです。閉じたパネルに使用するアイコンは_header_という名前のプロパティとして指定され、開いているパネルに使用するアイコンは_headerSelected_という名前のプロパティとして指定されます。デフォルトでは、その値は \ {"header"： "ui-icon-triangle-1-e"、 "activeHeader"： "ui-icon-triangle-1-s"} です。オプション-アイコンこのオプションは、開いたパネルと閉じたパネルのヘッダーテキストの左側に使用するアイコンを定義するオブジェクトです。閉じたパネルに使用するアイコンは_header_という名前のプロパティとして指定され、開いているパネルに使用するアイコンは_headerSelected_という名前のプロパティとして指定されます。デフォルトでは、その値は \ {"header"： "ui-icon-triangle-1-e"、 "activeHeader"： "ui-icon-triangle-1-s"} です。構文 `$( ".selector" ).accordion( { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } } );`

Sr.No.	Option & Description
1	altField このオプションは、任意の日付選択で更新されるフィールドのjQueryセレクターを指定します。 _altFormat_オプションを使用して、この値の形式を設定できます。これは、サーバーに送信される非表示の入力要素に日付値を設定し、ユーザーによりわかりやすい形式で表示する場合に非常に便利です。デフォルトでは、その値は "" です。オプション-altField * このオプションは、任意の日付選択で更新されるフィールドのjQueryセレクターを指定します。 _altFormat_オプションを使用して、この値の形式を設定できます。これは、サーバーに送信される非表示の入力要素に日付値を設定し、ユーザーによりわかりやすい形式で表示する場合に非常に便利です。デフォルトでは、その値は "" です。構文 `$(".selector").datepicker( { altField: "#actualDate" } );`
2	altFormat このオプションは、_altField_オプションが指定されている場合に使用されます。代替要素に書き込まれる値の形式を提供します。デフォルトでは、その値は "" です。オプション-altFormat * このオプションは、_altField_オプションが指定されている場合に使用されます。代替要素に書き込まれる値の形式を提供します。デフォルトでは、その値は "" です。構文 `$(".selector").datepicker( { altFormat: "yy-mm-dd" } );`
3	appendText このオプションは、<input>要素の後に配置されるString値で、ユーザーに指示を表示することを目的としています。デフォルトでは、その値は "" です。オプション-appendText * このオプションは、<input>要素の後に配置されるString値で、ユーザーに指示を表示することを目的としています。デフォルトでは、その値は "" です。構文 `$(".selector").datepicker( { appendText: "(yyyy-mm-dd)" } );`
4	autoSize このオプションを_true_に設定すると、<input>要素のサイズが変更され、dateFormatオプションで設定されたdatepickerの日付形式に対応します。デフォルトでは、その値は false です。オプション-autoSize * このオプションを_true_に設定すると、<input>要素のサイズが変更され、dateFormatオプションで設定されたdatepickerの日付形式に対応します。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { autoSize: true } );`
5	beforeShow このオプションは、<input>要素とdatepickerインスタンスがパラメーターとして渡され、datepickerが表示される直前に呼び出されるコールバック関数です。この関数は、datepickerの変更に使用されるオプションハッシュを返すことができます。デフォルトでは、その値は "" です。オプション-beforeShow * このオプションは、<input>要素とdatepickerインスタンスがパラメーターとして渡され、datepickerが表示される直前に呼び出されるコールバック関数です。この関数は、datepickerの変更に使用されるオプションハッシュを返すことができます。デフォルトでは、その値は "" です。
6	beforeShowDay このオプションは、日付をパラメーターとして受け取るコールバック関数であり、日付ピッカーで表示される直前に日付ごとに呼び出され、日付が唯一のパラメーターとして渡されます。これは、日の要素のデフォルトの動作の一部をオーバーライドするために使用できます。この関数は3要素の配列を返す必要があります。デフォルトでは、値は null です。オプション-beforeShowDay * このオプションは、日付をパラメーターとして受け取るコールバック関数であり、日付ピッカーで表示される直前に日付ごとに呼び出され、日付が唯一のパラメーターとして渡されます。これは、日の要素のデフォルトの動作の一部をオーバーライドするために使用できます。この関数は、次のように、3要素の配列を返す必要があります- [0] —日付を選択可能にする場合は_true_、それ以外の場合は_false_。 [1]-適用するCSSクラス名のスペース区切り文字列または適用しない空文字列 [2]-日の要素にツールチップを適用するオプションの文字列デフォルトでは、その値は null です。
7	buttonImage このオプションは、_showOn_オプションをボタンの一方または両方に設定することにより、有効なボタンに表示される画像へのパスを指定します。 _buttonText_も指定されている場合、ボタンテキストはボタンの_alt_属性になります。デフォルトでは、その値は "" です。オプション-buttonImage * このオプションは、_showOn_オプションをボタンの一方または両方に設定することにより、有効なボタンに表示される画像へのパスを指定します。 _buttonText_も指定されている場合、ボタンテキストはボタンの_alt_属性になります。デフォルトでは、その値は "" です。構文 `$(".selector").datepicker( { buttonImage: "/images/datepicker.gif" } );`
8	buttonImageOnly このオプションは、_true_に設定されている場合、buttonImageで指定されたイメージが（ボタン上ではなく）スタンドアロンとして表示されることを指定します。画像を表示するには、showOnオプションをボタンの一方または両方に設定する必要があります。デフォルトでは、その値は false です。オプション-buttonImageOnly * このオプションは、_true_に設定されている場合、buttonImageで指定されたイメージが（ボタン上ではなく）スタンドアロンとして表示されることを指定します。画像を表示するには、showOnオプションをボタンの一方または両方に設定する必要があります。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { buttonImageOnly: true } );`
9	buttonText このオプションは、_showOn_オプションを_button_または_both_のいずれかに設定することにより、ボタンのキャプションを指定します。デフォルトでは、値は "…" です。オプション-buttonText * このオプションは、_showOn_オプションを_button_または_both_のいずれかに設定することにより、ボタンのキャプションを指定します。デフォルトでは、値は "…" です。構文 `$(".selector").datepicker( { buttonText: "Choose" } );`
10	calculateWeek このオプションは、loneパラメーターとして渡された日付の週番号を計算して返すカスタム関数です。デフォルトの実装は、_ $。datepicker.iso8601Week（）_ユーティリティ関数によって提供される実装です。オプション-CalculateWeek * このオプションは、loneパラメーターとして渡された日付の週番号を計算して返すカスタム関数です。デフォルトの実装は、_ $。datepicker.iso8601Week（）_ユーティリティ関数によって提供される実装です。構文 `$(".selector").datepicker( { calculateWeek: myWeekCalc } );`
11	changeMonth このオプションを_true_に設定すると、月のドロップダウンが表示され、ユーザーは矢印ボタンを使用せずに月を直接変更できます。デフォルトでは、その値は false です。オプション-changeMonth * このオプションを_true_に設定すると、月のドロップダウンが表示され、ユーザーは矢印ボタンを使用せずに月を直接変更できます。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { changeMonth: true } );`
12	changeYear このオプションを_true_に設定すると、年のドロップダウンが表示され、ユーザーは矢印ボタンを使用せずに年を直接変更できます。オプション_yearRange_を使用して、選択可能な年を制御できます。デフォルトでは、その値は false です。オプション-changeYear * このオプションを_true_に設定すると、年のドロップダウンが表示され、ユーザーは矢印ボタンを使用せずに年を直接変更できます。オプション_yearRange_を使用して、選択可能な年を制御できます。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { changeYear: true } );`
13	closeText このオプションは、閉じるボタンのデフォルトのキャプション「完了」を置き換えるテキストを指定します。 _showButtonPanel_オプションを介してボタンパネルが表示されるときに使用されます。デフォルトでは、その値は "Done" です。オプション-closeText * このオプションは、閉じるボタンのデフォルトのキャプション「完了」を置き換えるテキストを指定します。 _showButtonPanel_オプションを介してボタンパネルが表示されるときに使用されます。デフォルトでは、その値は "Done" です。構文 `$(".selector").datepicker( { closeText: "Close" } );`
14	constrainInput このオプションを_true_（デフォルト）に設定すると、<input>要素へのテキスト入力は、現在の_dateformat_オプションで許可されている文字に制限されます。デフォルトでは、その値は true です。オプション-constrainInput * このオプションを_true_（デフォルト）に設定すると、<input>要素へのテキスト入力は、現在の_dateformat_オプションで許可されている文字に制限されます。デフォルトでは、その値は true です。構文 `$(".selector").datepicker( { constrainInput: false } );`
15	currentText このオプションは、現在のボタンの今日のデフォルトキャプションを置き換えるテキストを指定します。これは、_showButtonPanel_オプションを介してボタンパネルが表示される場合に使用されます。デフォルトでは、その値は Today です。オプション-currentText * このオプションは、現在のボタンの今日のデフォルトキャプションを置き換えるテキストを指定します。これは、_showButtonPanel_オプションを介してボタンパネルが表示される場合に使用されます。デフォルトでは、その値は Today です。構文 `$(".selector").datepicker( { currentText: "Now" } );`
16	dateFormat このオプションは、使用する日付形式を指定します。デフォルトでは、その値は mm/dd/yy です。オプション-dateFormat * このオプションは、使用する日付形式を指定します。デフォルトでは、その値は mm/dd/yy です。構文 `$(".selector").datepicker( { dateFormat: "yy-mm-dd" } );`
17	dayNames このオプションは、日曜日を表す0番目の要素を持つ終日名を提供する7要素の配列です。コントロールをローカライズするために使用できます。デフォルトでは、その値は ["日曜日"、 "月曜日"、 "火曜日"、 "水曜日"、 "木曜日"、 "金曜日"、 "土曜日"] です。オプション-dayNames * このオプションは、日曜日を表す0番目の要素を持つ終日名を提供する7要素の配列です。コントロールをローカライズするために使用できます。デフォルトでは、その値は ["日曜日"、 "月曜日"、 "火曜日"、 "水曜日"、 "木曜日"、 "金曜日"、 "土曜日"] です。構文 `$(".selector").datepicker( { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] } );`
18	dayNamesMin このオプションは、列ヘッダーとして使用される日曜日を表す0番目の要素を持つ最小の曜日名を提供する7要素の配列です。コントロールをローカライズするために使用できます。デフォルトでは、その値は ["Su"、 "Mo"、 "Tu"、 "We"、 "Th"、 "Fr"、 "Sa"] です。オプション-dayNamesMin * このオプションは、列ヘッダーとして使用される日曜日を表す0番目の要素を持つ最小の曜日名を提供する7要素の配列です。コントロールをローカライズするために使用できます。デフォルトでは、その値は ["Su"、 "Mo"、 "Tu"、 "We"、 "Th"、 "Fr"、 "Sa"] です。構文 `$(".selector").datepicker( { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] } );`
19	dayNamesShort このオプションは、日曜日を表す0番目の要素を持つ短い曜日名を提供する7要素配列を指定します。コントロールをローカライズするために使用できます。デフォルトでは、その値は ["Sun"、 "Mon"、 "Tue"、 "Wed"、 "Thu"、 "Fri"、 "Sat"] です。オプション-dayNamesShort * このオプションは、日曜日を表す0番目の要素を持つ短い曜日名を提供する7要素配列を指定します。コントロールをローカライズするために使用できます。デフォルトでは、その値は ["Sun"、 "Mon"、 "Tue"、 "Wed"、 "Thu"、 "Fri"、 "Sat"] です。構文 `$(".selector").datepicker( { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] } );`
20	defaultDate このオプションは、<input>要素に値がない場合、コントロールの初期日付を設定し、今日のデフォルト値を上書きします。これは、_Date_インスタンス、今日からの_number_日、または絶対日付または相対日付を指定する_string_にすることができます。デフォルトでは、その値は null です。オプション-defaultDate * このオプションは、<input>要素に値がない場合、コントロールの初期日付を設定し、今日のデフォルト値を上書きします。これは、_Date_インスタンス、今日からの_number_日、または絶対日付または相対日付を指定する_string_にすることができます。デフォルトでは、その値は null です。構文 `$(".selector").datepicker( { defaultDate: +7 } );`
21	duration このオプションは、日付ピッカーを表示するアニメーションの速度を指定します。 slow、normal、またはfast、またはアニメーションがスパンするミリ秒数のいずれかです。デフォルトでは、その値は通常です。オプション-期間このオプションは、日付ピッカーを表示するアニメーションの速度を指定します。 slow、normal、またはfast、またはアニメーションがスパンするミリ秒数のいずれかです。デフォルトでは、その値は通常です。構文 `$(".selector").datepicker( { duration: "slow" } );`
22	firstDay このオプションは、週の最初の日と見なされる日を指定し、左端の列として表示されます。デフォルトでは、その値は 0 です。オプション-firstDay * このオプションは、週の最初の日と見なされる日を指定し、左端の列として表示されます。デフォルトでは、その値は 0 です。構文 `$(".selector").datepicker( { firstDay: 1 } );`
23	gotoCurrent このオプションを_true_に設定すると、現在の日のリンクが選択した日付に設定され、デフォルトの今日が上書きされます。デフォルトでは、その値は false です。オプション-gotoCurrent * このオプションを_true_に設定すると、現在の日のリンクが選択した日付に設定され、デフォルトの今日が上書きされます。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { gotoCurrent: true } );`
24	hideIfNoPrevNext このオプションは、_true_に設定されている場合、_minDate_および_maxDate_オプションの設定で決定されるように、該当しない場合、次のリンクと前のリンクを（単に無効にするのではなく）非表示にします。デフォルトでは、その値は false です。オプション-hideIfNoPrevNext * このオプションは、_true_に設定されている場合、_minDate_および_maxDate_オプションの設定で決定されるように、該当しない場合、次のリンクと前のリンクを（単に無効にするのではなく）非表示にします。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { hideIfNoPrevNext: true } );`
25	isRTL このオプションは、_true_に設定されている場合、ローカライズを右から左に記述する言語として指定します。デフォルトでは、その値は false です。オプション-isRTL * このオプションは、_true_に設定されている場合、ローカライズを右から左に記述する言語として指定します。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { isRTL: true } );`
26	maxDate このオプションは、コントロールの選択可能な最大日付を設定します。これは、Dateインスタンス、今日からの日数、または絶対日付または相対日付を指定する文字列です。デフォルトでは、その値は null です。オプション-maxDate * このオプションは、コントロールの選択可能な最大日付を設定します。これは、Dateインスタンス、今日からの日数、または絶対日付または相対日付を指定する文字列です。デフォルトでは、その値は null です。構文 `$(".selector").datepicker( { maxDate: "+1m +1w" } );`
27	minDate このオプションは、コントロールの選択可能な最小日付を設定します。これは、_Date_インスタンス、今日からの_number_日、または絶対日付または相対日付を指定する_string_にすることができます。デフォルトでは、その値は null です。オプション-minDate * このオプションは、コントロールの選択可能な最小日付を設定します。これは、_Date_インスタンス、今日からの_number_日、または絶対日付または相対日付を指定する_string_にすることができます。デフォルトでは、その値は null です。構文 `$(".selector").datepicker( { minDate: new Date(2007, 1 - 1, 1) } );`
28	monthNames このオプションは、1月を表す0番目の要素を持つ完全な月名を提供する12要素の配列です。コントロールをローカライズするために使用できます。デフォルトでは、その値は [「1月」、「2月」、「3月」、「4月」、「5月」、「6月」、「7月」、「8月」、「9月」、「10月」、「11月」、「12月」] 。オプション-monthNames * このオプションは、1月を表す0番目の要素を持つ完全な月名を提供する12要素の配列です。コントロールをローカライズするために使用できます。デフォルトでは、その値は [「1月」、「2月」、「3月」、「4月」、「5月」、「6月」、「7月」、「8月」、「9月」、「10月」、「11月」、「12月」] 。構文 `$(".selector").datepicker( { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ] } );`
29	monthNamesShort このオプションは、1月を表す0番目の要素を持つ短い月名を提供する12要素の配列を指定します。コントロールをローカライズするために使用できます。デフォルトでは、その値は ["Jan"、 "Feb"、 "Mar"、 "Apr"、 "May"、 "Jun"、 "Jul"、 "Aug"、 "Sep"、 "Oct"、 "Nov" 、「12月」] 。オプション-monthNamesShort * このオプションは、1月を表す0番目の要素を持つ短い月名を提供する12要素の配列を指定します。コントロールをローカライズするために使用できます。デフォルトでは、その値は ["Jan"、 "Feb"、 "Mar"、 "Apr"、 "May"、 "Jun"、 "Jul"、 "Aug"、 "Sep"、 "Oct"、 "Nov" 、「12月」] 。構文 `$(".selector").datepicker( { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] } );`
30	navigationAsDateFormat このオプションを_true_に設定すると、nextText、prevText、、および_currentText_のナビゲーションリンクは、表示前に_ $。datepicker.formatDate（）_関数を介して渡されます。これにより、関連する値に置き換えられるオプションに日付形式を提供できます。デフォルトでは、その値は false です。オプション-navigationAsDateFormat * このオプションを_true_に設定すると、nextText、prevText、、および_currentText_のナビゲーションリンクは、表示前に_ $。datepicker.formatDate（）_関数を介して渡されます。これにより、関連する値に置き換えられるオプションに日付形式を提供できます。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { navigationAsDateFormat: true } );`
31	nextText このオプションは、来月のナビゲーションリンクの[次へ]のデフォルトキャプションを置き換えるテキストを指定します。 ThemeRollerは、このテキストをアイコンに置き換えます。デフォルトでは、その値は Next です。オプション-nextText * このオプションは、来月のナビゲーションリンクの[次へ]のデフォルトキャプションを置き換えるテキストを指定します。 ThemeRollerは、このテキストをアイコンに置き換えます。デフォルトでは、その値は Next です。構文 `$(".selector").datepicker( { nextText: "Later" } );`
32	numberOfMonths このオプションは、日付ピッカーに表示する月数を指定します。デフォルトでは、その値は 1 です。オプション-numberOfMonths * このオプションは、日付ピッカーに表示する月数を指定します。デフォルトでは、その値は 1 です。サポートされている複数のタイプ- Number -1行に表示する月数。 Array -表示する行と列の数を定義する配列。構文 `$(".selector").datepicker( { numberOfMonths: [ 2, 3 ] } );`
33	onChangeMonthYear このオプションは、日付ピッカーが新しい月または年に移動したときに呼び出されるコールバックです。選択された年、月（1から始まる）、日付ピッカーインスタンスがパラメーターとして渡され、関数コンテキストが入力フィールド要素に設定されます。デフォルトでは、その値は null です。オプション-onChangeMonthYear * このオプションは、日付ピッカーが新しい月または年に移動したときに呼び出されるコールバックです。選択された年、月（1から始まる）、日付ピッカーインスタンスがパラメーターとして渡され、関数コンテキストが入力フィールド要素に設定されます。デフォルトでは、その値は null です。
34	onClose このオプションは、日付ピッカーが閉じられ、選択された日付がテキスト（選択されていない場合は空の文字列）、日付ピッカーインスタンス、および関数コンテキストが入力フィールド要素に設定されるときに必ず呼び出されるコールバックです。デフォルトでは、その値は null です。オプション-onClose * このオプションは、日付ピッカーが閉じられ、選択された日付がテキスト（選択されていない場合は空の文字列）、日付ピッカーインスタンス、および関数コンテキストが入力フィールド要素に設定されるときに必ず呼び出されるコールバックです。デフォルトでは、その値は null です。
35	onSelect このオプションは、日付が選択されるたびに呼び出されるコールバックであり、選択された日付をテキスト（選択がない場合は空の文字列）、datepickerインスタンス、および関数コンテキストが入力フィールド要素に設定されます。デフォルトでは、その値は null です。オプション-onSelect * このオプションは、日付が選択されるたびに呼び出されるコールバックであり、選択された日付をテキスト（選択がない場合は空の文字列）、datepickerインスタンス、および関数コンテキストが入力フィールド要素に設定されます。デフォルトでは、その値は null です。
36	prevText このオプションは、前月のナビゲーションリンクの_Prev_のデフォルトキャプションを置き換えるテキストを指定します。（ThemeRollerはこのテキストをアイコンに置き換えます）。デフォルトでは、その値は PrevdefaultDatedayNamesMin です。オプション-prevText * このオプションは、前月のナビゲーションリンクの_Prev_のデフォルトキャプションを置き換えるテキストを指定します。（ThemeRollerはこのテキストをアイコンに置き換えます）。デフォルトでは、その値は Prev です。構文 `$(".selector").datepicker( { prevText: "Earlier" } );`
37	selectOtherMonths このオプションは_true_に設定されている場合、表示される月の前または後に表示される日が選択可能です。 _showOtherMonths_オプションがtrueでない限り、そのような日は表示されません。デフォルトでは、その値は false です。オプション-selectOtherMonths * このオプションは_true_に設定されている場合、表示される月の前または後に表示される日が選択可能です。 _showOtherMonths_オプションがtrueでない限り、そのような日は表示されません。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { selectOtherMonths: true } );`
38	shortYearCutoff このオプションは、数値の場合、2桁の年の値が前の世紀に属すると見なされる前の0〜99年の値を指定します。このオプションが文字列の場合、値は数値変換され、現在の年に追加されます。デフォルトは + 10 で、現在の年から10年を表します。オプション-shortYearCutoff * このオプションは、数値の場合、2桁の年の値が前の世紀に属すると見なされる前の0〜99年の値を指定します。このオプションが文字列の場合、値は数値変換され、現在の年に追加されます。デフォルトは + 10 で、現在の年から10年を表します。構文 `$(".selector").datepicker( { shortYearCutoff: 50 } );`
39	showAnim このオプションは、日付ピッカーの表示と非表示に使用されるアニメーションの名前を設定します。指定する場合、show（デフォルト）、fadeIn、slideDown、、またはjQuery UIのアニメーションの表示/非表示のいずれかでなければなりません。デフォルトでは、その値は show です。オプション-showAnim * このオプションは、日付ピッカーの表示と非表示に使用されるアニメーションの名前を設定します。指定する場合、show（デフォルト）、fadeIn、slideDown、、またはjQuery UIのアニメーションの表示/非表示のいずれかでなければなりません。デフォルトでは、その値は show です。構文 `$(".selector").datepicker( { showAnim: "fold" } );`
40	showButtonPanel このオプションを_true_に設定すると、日付ピッカーの下部に現在および閉じるボタンを含むボタンパネルが表示されます。これらのボタンのキャプションは、_currentText_および_closeText_オプションを介して提供できます。デフォルトでは、その値は false です。オプション-showButtonPanel * このオプションを_true_に設定すると、日付ピッカーの下部に現在および閉じるボタンを含むボタンパネルが表示されます。これらのボタンのキャプションは、_currentText_および_closeText_オプションを介して提供できます。デフォルトでは、その値は false です。構文 `$(".selector").datepicker( { showButtonPanel: true } );`

Sr.No.	Action & Description
1	destroy() このアクションにより、datepicker機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-destroy（）このアクションにより、datepicker機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$(".selector").datepicker("destroy");`
2	dialog( date [, onSelect [, settings ] [, pos ] )] このアクションは、jQuery UIダイアログボックスに日付ピッカーを表示します。アクション-dialog（date [、onSelect] [、settings] [、pos]）このアクションは、jQuery UIダイアログボックスにdatepickerを表示します。どこ- _date_は初期日付です。 _onSelect_は、日付が選択されたときのコールバック関数です。この関数は、日付テキストと日付ピッカーインスタンスをパラメーターとして受け取ります。 _settings_は、日付ピッカーの新しい設定です。 _pos_は、[x、y]としてのダイアログの上部/左側の位置、または座標を含むMouseEventです。指定しない場合、ダイアログは画面の中央に配置されます。構文 `$(".selector").datepicker( "dialog", "10/12/2012" );`
3	getDate() このアクションは、選択した日付に対応する日付を返します。このメソッドは引数を取りません。アクション-getDate（）このアクションは、選択した日付に対応する日付を返します。このメソッドは引数を取りません。構文 `$(".selector").datepicker("getDate");`
4	hide() このアクションは、以前に開いた日付ピッカーを閉じます。このメソッドは引数を取りません。アクション-hide（）このアクションは、以前に開いた日付ピッカーを閉じます。このメソッドは引数を取りません。構文 `$(".selector").datepicker("hide");`
5	isDisabled() このアクションは、日付選択機能が無効になっているかどうかを確認します。このメソッドは引数を取りません。アクション-isDisabled（）このアクションは、日付選択機能が無効になっているかどうかを確認します。このメソッドは引数を取りません。構文 `$(".selector").datepicker("isDisabled");`
6	option( optionName ) このアクションは、指定された_optionName_に現在関連付けられている値を取得します。アクション-option（optionName）このアクションは、指定された_optionName_に現在関連付けられている値を取得します。構文 `$(".selector").datepicker( "option", "disabled");`
7	option() このアクションは、現在の日付ピッカーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。アクション-option（）このアクションは、現在の日付ピッカーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。構文 `var options = $( ".selector" ).datepicker( "option" );`
8	option( optionName, value ) このアクションは、指定されたoptionNameに関連付けられたdatepickerオプションの値を設定します。アクション-option（optionName、value）このアクションは、指定されたoptionNameに関連付けられたdatepickerオプションの値を設定します。構文 `$(".selector").datepicker( "option", "disabled", true );`
9	option( options ) このアクションは、datepickerの1つ以上のオプションを設定します。アクション-オプション（オプション）このアクションは、datepickerの1つ以上のオプションを設定します。構文 `$(".selector").datepicker("option", { disabled: true });`
10	refresh() このアクションは、外部変更を行った後、日付ピッカーを再描画します。このメソッドは引数を取りません。アクション-refresh（）このアクションは、外部変更を行った後、日付ピッカーを再描画します。このメソッドは引数を取りません。構文 `$(".selector").datepicker("refresh");`
11	setDate( date ) このアクションは、指定された日付を日付ピッカーの現在の日付として設定します。アクション-setDate（）このアクションは、指定された日付を日付ピッカーの現在の日付として設定します。構文 `$(".selector").datepicker("setDate", "10/12/2012");`
12	show() このアクションにより、日付ピッカーが開きます。日付ピッカーが入力に接続されている場合、日付ピッカーを表示するには入力が表示されている必要があります。このメソッドは引数を取りません。アクション-show（）このアクションにより、日付ピッカーが開きます。日付ピッカーが入力に接続されている場合、日付ピッカーを表示するには入力が表示されている必要があります。このメソッドは引数を取りません。構文 `$(".selector").datepicker("show");`
13	widget() このアクションは、datepickerを含むjQueryオブジェクトを返します。アクション-ウィジェット（）このアクションは、datepickerを含むjQueryオブジェクトを返します。構文 `$(".selector").datepicker("widget");`

Sr.No.	Action & Description
1	blur( [event )] このアクションは、メニューからフォーカスを削除します。アクティブな要素スタイルをリセットすることにより、メニューの_blur_イベントをトリガーします。 _event_のタイプは Event で、メニューのぼかしをトリガーしたものを表します。アクション-blur（[event]）このアクションは、メニューからフォーカスを削除します。アクティブな要素スタイルをリセットすることにより、メニューの_blur_イベントをトリガーします。 _event_のタイプは Event で、メニューのぼかしをトリガーしたものを表します。構文 `$(".selector").menu( "blur" );`
2	collapse( [event )] このアクションは、現在アクティブなサブメニューを閉じます。 _event_のタイプは Event であり、メニューの折りたたみをトリガーしたものを表します。アクション-collapse（[event]）このアクションは、現在アクティブなサブメニューを閉じます。 _event_のタイプは Event であり、メニューの折りたたみをトリガーしたものを表します。構文 `$(".selector").menu( "collapse" );`
3	collapseAll( [event [, all ] )] このアクションは、開いているすべてのサブメニューを閉じます。アクション-collapseAll（[event] [、all]）このアクションは、開いているすべてのサブメニューを閉じます。どこ- _event_は Event タイプで、メニューの折りたたみをトリガーしたものを表します _all_のタイプは Boolean すべてのサブメニューを閉じるか、トリガーイベントのターゲットであるか、ターゲットを含むメニューを含む下のサブメニューのみを閉じるかを示します。構文 `$(".selector").menu( "collapseAll", null, true );`
4	destroy() このアクションにより、メニュー機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-destroy（）このアクションにより、メニュー機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$(".selector").menu( "destroy" );`
5	disable() このアクションはメニューを無効にします。このメソッドは引数を取りません。アクション-disable（）このアクションはメニューを無効にします。このメソッドは引数を取りません。構文 `$(".selector").menu( "disable" );`
6	enable() このアクションにより、メニューが有効になります。このメソッドは引数を取りません。アクション-enable（）このアクションにより、メニューが有効になります。このメソッドは引数を取りません。構文 `$(".selector").menu( "enable" );`
7	expand( [event )] このアクションは、現在アクティブなアイテムが存在する場合、その下にサブメニューを開きます。 _event_のタイプは Event で、メニューの展開をトリガーしたものを表します。アクション-expand（[event]）このアクションは、現在アクティブなアイテムが存在する場合、その下にサブメニューを開きます。 _event_のタイプは Event で、メニューの展開をトリガーしたものを表します。構文 `$(".selector").menu( "expand" );`
8	focus( [event, item )] このアクションは、特定のメニュー項目をアクティブにし、サブメニューがあればそれを開き、メニューのフォーカスイベントをトリガーします。 _event_のタイプは Event であり、フォーカスを獲得するためにメニューをトリガーしたものを表します。 _item_は、フォーカス/アクティブ化するメニュー項目を表すjQueryオブジェクトです。アクション-focus（[event]、item）このアクションは、特定のメニュー項目をアクティブにし、サブメニューがあればそれを開き、メニューのフォーカスイベントをトリガーします。 _event_のタイプは Event であり、フォーカスを獲得するためにメニューをトリガーしたものを表します。 _item_は、フォーカス/アクティブ化するメニュー項目を表すjQueryオブジェクトです。構文 `$(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );`
9	isFirstItem() このアクションは、現在のアクティブなメニュー項目が最初のメニュー項目であるかどうかを示す_boolean_値を返します。このメソッドは引数を取りません。アクション-isFirstItem（）このアクションは、現在のアクティブなメニュー項目が最初のメニュー項目であるかどうかを示す_boolean_値を返します。このメソッドは引数を取りません。構文 `$(".selector").menu( "isFirstItem" );`
10	isLastItem() このアクションは、現在のアクティブなメニュー項目が最後のメニュー項目であるかどうかを示す_boolean_値を返します。このメソッドは引数を取りません。アクション-isLastItem（）このアクションは、現在のアクティブなメニュー項目が最後のメニュー項目であるかどうかを示す_boolean_値を返します。このメソッドは引数を取りません。構文 `$(".selector").menu( "isLastItem" );`
11	next( [event )] このアクションは、アクティブ状態を次のメニュー項目に委任します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。アクション-next（[event]）このアクションは、アクティブ状態を次のメニュー項目に委任します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。構文 `$(".selector").menu( "next" );`
12	nextPage( [event )] このアクションは、アクティブな状態をスクロール可能なメニューの一番下の最初のメニュー項目に移動するか、スクロールできない場合は最後の項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。アクション-nextPage（[event]）このアクションは、アクティブな状態をスクロール可能なメニューの一番下の最初のメニュー項目に移動するか、スクロールできない場合は最後の項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。構文 `$(".selector").menu( "nextPage" );`
13	option( optionName ) このアクションは、指定された_optionName_に現在関連付けられている値を取得します。 _optionName_は String タイプで、取得するオプションの名前を表します。アクション-option（optionName）このアクションは、指定された_optionName_に現在関連付けられている値を取得します。 _optionName_は String タイプで、取得するオプションの名前を表します。構文 `var isDisabled = $( ".selector" ).menu( "option", "disabled" );`
14	option() このアクションは、現在のメニューオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-option（）このアクションは、現在のメニューオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `var options = $( ".selector" ).menu( "option" );`
15	option( optionName, value ) このアクションは、指定されたoptionNameに関連付けられたメニューオプションの値を設定します。ここで、_optionName_は String タイプであり、設定するオプションの名前を表し、_value_は_Object_タイプであり、オプションに設定する値を表します。アクション-option（optionName、value）このアクションは、指定されたoptionNameに関連付けられたメニューオプションの値を設定します。ここで、_optionName_は String タイプであり、設定するオプションの名前を表し、_value_は_Object_タイプであり、オプションに設定する値を表します。構文 `$(".selector").menu( "option", "disabled", true );`
16	option( options ) このアクションは、メニューの1つ以上のオプションを設定します。 _options_は Object タイプで、設定するオプションと値のペアのマップを表します。アクション-オプション（オプション）このアクションは、メニューの1つ以上のオプションを設定します。 _options_は Object タイプで、設定するオプションと値のペアのマップを表します。構文 `$(".selector").menu( "option", { disabled: true } );`
17	previous( [event )] このアクションは、アクティブ状態を前のメニュー項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。アクション-previous（[event]）このアクションは、アクティブ状態を前のメニュー項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。構文 `$(".selector").menu( "previous" );`
18	previousPage( [event )] このアクションは、アクティブ状態を、スクロール可能なメニューの上部の最初のメニュー項目またはスクロールできない場合は最初の項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。アクション-previousPage（[event]）このアクションは、アクティブ状態を、スクロール可能なメニューの上部の最初のメニュー項目またはスクロールできない場合は最初の項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。構文 `$(".selector").menu( "previousPage" );`
19	refresh() このアクションは、まだ初期化されていないサブメニューとメニュー項目を初期化します。このメソッドは引数を取りません。アクション-refresh（）このアクションは、まだ初期化されていないサブメニューとメニュー項目を初期化します。このメソッドは引数を取りません。構文 `$(".selector").menu( "refresh" );`
20	select( [event )] このアクションは、現在アクティブなメニュー項目を選択し、すべてのサブメニューを折りたたみ、メニューの選択イベントをトリガーします。 _event_のタイプは Event で、選択をトリガーしたものを表します。アクション-select（[event]）このアクションは、現在アクティブなメニュー項目を選択し、すべてのサブメニューを折りたたみ、メニューの選択イベントをトリガーします。 _event_のタイプは Event で、選択をトリガーしたものを表します。構文 `$(".selector").menu( "select" );`
21	widget() このアクションは、メニューを含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェット（）このアクションは、メニューを含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `$(".selector").menu( "widget" );`

Sr.No.	Action & Description
1	destroy このアクションは、要素のアコーディオン機能を完全に破壊します。要素は初期化前の状態に戻ります。アクション-破壊このアクションは、要素のアコーディオン機能を完全に破壊します。要素は初期化前の状態に戻ります。構文 `$(".selector").accordion("destroy");`
2	disable このアクションにより、すべてのメニューが無効になります。クリックは考慮されません。このメソッドは引数を取りません。アクション-無効このアクションにより、すべてのメニューが無効になります。クリックは考慮されません。このメソッドは引数を取りません。構文 `$(".selector").accordion("disable");`
3	enable このアクションにより、すべてのメニューが再びアクティブになります。クリックが再び考慮されます。このメソッドは引数を取りません。アクション-有効このアクションにより、すべてのメニューが再びアクティブになります。クリックが再び考慮されます。このメソッドは引数を取りません。構文 `$(".selector").accordion("enable");`
4	option( optionName ) このアクションは、指定された_optionName_に現在関連付けられているアコーディオン要素の値を取得します。これは引数として文字列値を取ります。アクション-option（optionName）このアクションは、指定された_optionName_に現在関連付けられているアコーディオン要素の値を取得します。これは引数として文字列値を取ります。構文 `var isDisabled = $( ".selector" ).accordion( "option", "disabled" );`
5	option このアクションは、現在のアコーディオンオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-オプションこのアクションは、現在のアコーディオンオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `var options = $( ".selector" ).accordion( "option" );`
6	option( optionName, value ) このアクションは、指定されたoptionNameに関連付けられたアコーディオンオプションの値を設定します。アクション-option（optionName、value）このアクションは、指定されたoptionNameに関連付けられたアコーディオンオプションの値を設定します。構文 `$( ".selector" ).accordion( "option", "disabled", true );`
7	option( options ) このアクションは、アコーディオンの1つ以上のオプションを設定します。アクション-オプション（オプション）このアクションは、アコーディオンの1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).accordion( "option", { disabled: true } );`
8	refresh このアクションは、DOMで直接追加または削除されたヘッダーとパネルを処理します。次に、アコーディオンパネルの高さを再計算します。結果は、コンテンツとheightStyleオプションによって異なります。このメソッドは引数を取りません。アクション-更新このアクションは、DOMで直接追加または削除されたヘッダーとパネルを処理します。次に、アコーディオンパネルの高さを再計算します。結果は、コンテンツとheightStyleオプションによって異なります。このメソッドは引数を取りません。構文 `$(".selector").accordion("refresh");`
9	widget このアクションは、アコーディオンウィジェット要素を返します。 _ui-accordion_クラス名で注釈が付けられたもの。アクション-ウィジェットこのアクションは、アコーディオンウィジェット要素を返します。 _ui-accordion_クラス名で注釈が付けられたもの。構文 `var widget = $( ".selector" ).accordion( "widget" );`

Sr.No.	Option & Description
1	appendTo このオプションは、メニューに要素を追加するために使用されます。デフォルトでは、その値は null です。オプション-appendTo * このオプションは、メニューに要素を追加するために使用されます。デフォルトでは、その値は null です。値がnullの場合、入力フィールドの親は_ui-front_のクラスをチェックします。 _ui-front_クラスを持つ要素が見つかった場合、メニューはその要素に追加されます。構文 `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	autoFocus このオプションを_true_に設定すると、メニューが表示されるときにメニューの最初の項目が自動的にフォーカスされます。デフォルトでは、その値は false です。オプション-autoFocus * このオプションを_true_に設定すると、メニューが表示されるときにメニューの最初の項目が自動的にフォーカスされます。デフォルトでは、その値は false です。構文 `$( ".selector" ).autocomplete({ autoFocus: true });`
3	delay このオプションは、一致する値（_source_オプションで指定）を取得する前に待機するミリ秒数を表す整数です。これにより、検索を開始する前にユーザーにさらに文字を入力する時間を与えることで、非ローカルデータを取得する際のスラッシングを減らすことができます。デフォルトでは、その値は 300 です。オプション-遅延このオプションは、一致する値（_source_オプションで指定）を取得する前に待機するミリ秒数を表す整数です。これにより、検索を開始する前にユーザーにさらに文字を入力する時間を与えることで、非ローカルデータを取得する際のスラッシングを減らすことができます。デフォルトでは、その値は 300 です。構文 `$( ".selector" ).autocomplete({ delay: 500 });`
4	disabled このオプションが指定され、_true_の場合、自動補完ウィジェットは最初は無効になっています。デフォルトでは、その値は false です。オプション-無効このオプションが指定され、_true_の場合、自動補完ウィジェットは最初は無効になっています。デフォルトでは、その値は false です。構文 `$( ".selector" ).autocomplete({ disabled: true });`
5	minLength 一致する値を取得する前に入力する必要がある文字数（ソースオプションで指定）。これにより、数個の文字ではセットを適切なレベルまで削るには不十分な場合に、大きすぎる値セットが表示されるのを防ぐことができます。デフォルトでは、その値は 1 です。オプション-minLength * 一致する値を取得する前に入力する必要がある文字数（ソースオプションで指定）。これにより、数個の文字ではセットを適切なレベルまで削るには不十分な場合に、大きすぎる値セットが表示されるのを防ぐことができます。デフォルトでは、その値は 1 です。構文 `$( ".selector" ).autocomplete({ minLength: 0 });`
6	position このオプションは、関連する入力要素に対する提案メニューの位置を識別します。 _of_オプションはデフォルトで入力要素に設定されますが、配置する別の要素を指定できます。デフォルトでは、その値は \ {my： "left top"、at： "left bottom"、collision： "none"} です。オプション-位置このオプションは、関連する入力要素に対する提案メニューの位置を識別します。 _of_オプションはデフォルトで入力要素に設定されますが、配置する別の要素を指定できます。デフォルトでは、その値は \ {my： "left top"、at： "left bottom"、collision： "none"} です。構文 `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
7	source このオプションは、入力データと一致するデータを取得する方法を指定します。値を指定する必要があります。そうしないと、オートコンプリートウィジェットが作成されません。デフォルトでは、その値は* noneです。指定する必要があります。オプション-ソース* このオプションは、入力データと一致するデータを取得する方法を指定します。値を指定する必要があります。そうしないと、オートコンプリートウィジェットが作成されません。この値は次のいずれかです。一致するデータを返すサーバーリソースのURLを表す String 、値が照合されるローカルデータの配列、または一致する値を提供することからの一般的なコールバックとして機能する関数。構文 `$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });`

Sr.No.	Action & Description
1	close このアクションにより、オートコンプリートメニューの候補リストが非表示になります。このメソッドは引数を取りません。アクション-閉じるこのアクションにより、オートコンプリートメニューの候補リストが非表示になります。このメソッドは引数を取りません。構文 `$( ".selector" ).autocomplete("close");`
2	destroy このアクションにより、オートコンプリート機能が削除されます。候補のリストが削除されます。このメソッドは引数を取りません。アクション-破壊このアクションにより、オートコンプリート機能が削除されます。候補のリストが削除されます。このメソッドは引数を取りません。構文 `$( ".selector" ).autocomplete("destroy");`
3	disable このアクションは、オートコンプリートメカニズムを無効にします。候補のリストは表示されなくなりました。このメソッドは引数を取りません。アクション-無効このアクションは、オートコンプリートメカニズムを無効にします。候補のリストは表示されなくなりました。このメソッドは引数を取りません。構文 `$( ".selector" ).autocomplete("disable");`
4	enable このアクションは、オートコンプリートメカニズムを再アクティブ化します。提案のリストが再び表示されます。このメソッドは引数を取りません。アクション-有効このアクションは、オートコンプリートメカニズムを再アクティブ化します。提案のリストが再び表示されます。このメソッドは引数を取りません。構文 `$( ".selector" ).autocomplete("enable");`
5	option( optionName ) このアクションは、指定されたparam _optionName_の値を取得します。このオプションは、オートコンプリートで使用されるオプション（オプション）の1つに対応します。アクション-option（optionName）このアクションは、指定されたparam _optionName_の値を取得します。このオプションは、オートコンプリートで使用されるオプション（オプション）の1つに対応します。構文 `var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );`
6	option このアクションは、現在のオートコンプリートオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-オプションこのアクションは、現在のオートコンプリートオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `var options = $( ".selector" ).autocomplete( "option" );`
7	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたオートコンプリートオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたオートコンプリートオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).autocomplete( "option", "disabled", true );`
8	option( options ) このアクションは、オートコンプリートの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）このアクションは、オートコンプリートの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).autocomplete( "option", { disabled: true } );`
9	search( [value )] このアクションは、文字列値とデータソース（_options.source_で指定）の間の対応を検索します。値の最小文字数（_options.minLength_で示される）に達する必要があります。そうでない場合、検索は実行されません。アクション-検索（[値]）このアクションは、文字列値とデータソース（_options.source_で指定）の間の対応を検索します。値の最小文字数（_options.minLength_で示される）に達する必要があります。そうでない場合、検索は実行されません。構文 `$( ".selector" ).autocomplete( "search", "" );`
10	widget 提案のリストに対応する<ul> DOM要素を取得します。これは、jQueryセレクターを使用せずにリストに簡単にアクセスできるjQueryクラスのオブジェクトです。アクション-ウィジェット提案のリストに対応する<ul> DOM要素を取得します。これは、jQueryセレクターを使用せずにリストに簡単にアクセスできるjQueryクラスのオブジェクトです。構文 `$( ".selector" ).autocomplete("widget");`

Sr.No.	Event Method & Description
1	change(event, ui) このイベントは、選択に基づいて<input>要素の値が変更されるとトリガーされます。トリガーされると、このイベントは常に_close_イベントがトリガーされた後に発生します。イベント-change（event、ui）このイベントは、選択に基づいて<input>要素の値が変更されるとトリガーされます。トリガーされると、このイベントは常に_close_イベントがトリガーされた後に発生します。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- item -メニューから選択されたアイテム（ある場合）。それ以外の場合、プロパティはnullです。構文 `$( ".selector" ).autocomplete({ change: function( event, ui ) {} });`
2	close(event, ui) このイベントは、オートコンプリートメニューが閉じるたびにトリガーされます。イベント-close（event、ui）このイベントは、オートコンプリートメニューが閉じるたびにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).autocomplete({ close: function( event, ui ) {} });`
3	create(event, ui) このイベントは、オートコンプリートが作成されるとトリガーされます。イベント-create（event、ui）このイベントは、オートコンプリートが作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- item -メニューから選択されたアイテム（ある場合）。それ以外の場合、プロパティはnullです。構文 `$( ".selector" ).autocomplete({ create: function( event, ui ) {} });`
4	focus(event, ui) このイベントは、メニュー選択の1つがフォーカスを受け取るたびにトリガーされます。キャンセルしない限り（たとえば、falseを返すことによって）、フォーカスされた値は<input>要素に設定されます。イベント-focus（event、ui）このイベントは、メニュー選択の1つがフォーカスを受け取るたびにトリガーされます。キャンセルしない限り（たとえば、falseを返すことによって）、フォーカスされた値は<input>要素に設定されます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- item -フォーカスされたアイテム。構文 `$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });`
5	open(event, ui) このイベントは、データが準備され、メニューが開かれる直前にトリガーされます。イベント-open（event、ui）このイベントは、データが準備され、メニューが開かれる直前にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).autocomplete({ open: function( event, ui ) {} });`
6	response(event, ui) このイベントは、検索が完了した後、メニューが表示される前にトリガーされます。このイベントは、検索結果が存在しないか、オートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。イベント-応答（イベント、UI）このイベントは、検索が完了した後、メニューが表示される前にトリガーされます。このイベントは、検索結果が存在しないか、オートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- content -応答データが含まれており、表示される結果を変更するために変更できます。構文 `$( ".selector" ).autocomplete({ response: function( event, ui ) {} });`
7	search(event, ui) このイベントは、_delay_および_minLength_基準が満たされた後、sourceで指定されたメカニズムがアクティブになる直前にトリガーされます。キャンセルされた場合、検索操作は中止されます。イベント-検索（イベント、UI）このイベントは、_delay_および_minLength_基準が満たされた後、sourceで指定されたメカニズムがアクティブになる直前にトリガーされます。キャンセルされた場合、検索操作は中止されます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).autocomplete({ search: function( event, ui ) {} });`
8	select(event, ui) このイベントは、オートコンプリートメニューから値が選択されるとトリガーされます。このイベントをキャンセルすると、値が<input>要素に設定されなくなります（ただし、メニューが閉じるのを防ぎません）。イベント-select（event、ui）このイベントは、オートコンプリートメニューから値が選択されるとトリガーされます。このイベントをキャンセルすると、値が<input>要素に設定されなくなります（ただし、メニューが閉じるのを防ぎません）。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- item -選択したオプションのラベルと値のプロパティを持つオブジェクト。構文 `$( ".selector" ).autocomplete({ select: function( event, ui ) {} });`

Sr.No.	Action & Description
1	destroy このアクションにより、要素のボタン機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-破壊このアクションにより、要素のボタン機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$( ".selector" ).button("destroy");`
2	disable このアクションは、要素のボタン機能を無効にします。このメソッドは引数を取りません。アクション-無効このアクションは、要素のボタン機能を無効にします。このメソッドは引数を取りません。構文 `$( ".selector" ).button("disable");`
3	enable このアクションにより、要素のボタン機能が有効になります。このメソッドは引数を取りません。アクション-有効このアクションにより、要素のボタン機能が有効になります。このメソッドは引数を取りません。構文 `$( ".selector" ).button("enable");`
4	option( optionName ) このアクションは、_optionName_で指定されたオプションの値を取得します。ここで、_optionName_は文字列です。アクション-option（optionName）このアクションは、_optionName_で指定されたオプションの値を取得します。ここで、_optionName_は文字列です。構文 `var isDisabled = $( ".selector" ).button( "option", "disabled" );`
5	option このアクションは、現在のボタンオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-オプションこのアクションは、現在のボタンオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `$( ".selector" ).button("option");`
6	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたボタンオプションの値を設定します。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたボタンオプションの値を設定します。ここで、_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).button( "option", "disabled", true );`
7	option( options ) このアクションは、ボタンの1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）このアクションは、ボタンの1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).button( "option", { disabled: true } );`
8	refresh このアクションにより、ボタンの表示が更新されます。これは、ボタンがプログラムによって処理され、ディスプレイが必ずしも内部状態に対応していない場合に役立ちます。このメソッドは引数を取りません。アクション-更新このアクションにより、ボタンの表示が更新されます。これは、ボタンがプログラムによって処理され、ディスプレイが必ずしも内部状態に対応していない場合に役立ちます。このメソッドは引数を取りません。構文 `$( ".selector" ).button("refresh");`
9	widget このアクションは、ボタン要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェットこのアクションは、ボタン要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `$( ".selector" ).button("widget");`

Sr.No.	Option & Description
1	appendTo このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。デフォルトでは、その値は true です。オプション-appendTo * このオプションは、指定された要素にダイアログボックスを追加するために使用されます。デフォルトでは、その値は "body" です。構文 `$(".selector").dialog( { appendTo: "#identifier" } );`
2	autoOpen このオプションは、_false_に設定されていない限り、作成時にダイアログボックスが開きます。 _false_の場合、dialog（ 'open'）の呼び出し時にダイアログボックスが開きます。デフォルトでは、その値は true です。オプション-autoOpen * このオプションは、_false_に設定されていない限り、作成時にダイアログボックスが開きます。 _false_の場合、dialog（ 'open'）の呼び出し時にダイアログボックスが開きます。デフォルトでは、その値は true です。構文 `$(".selector").dialog( { autoOpen: false } );`
3	buttons このオプションは、ダイアログボックスにボタンを追加します。これらはオブジェクトとしてリストされ、各プロパティはボタン上のテキストです。値は、ユーザーがボタンをクリックしたときに呼び出されるコールバック関数です。デフォルトでは、その値は \ {} です。オプション-ボタンこのオプションは、ダイアログボックスにボタンを追加します。これらはオブジェクトとしてリストされ、各プロパティはボタン上のテキストです。値は、ユーザーがボタンをクリックしたときに呼び出されるコールバック関数です。デフォルトでは、その値は \ {} です。このハンドラーは、ダイアログボックス要素の関数コンテキストで呼び出され、ボタンをターゲットプロパティとして設定してイベントインスタンスを渡します。省略すると、ダイアログボックス用のボタンは作成されません。構文 `$(".selector").dialog( { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] } );`
4	closeOnEscape このオプションを_false_に設定しない限り、ダイアログボックスにフォーカスがあるときにユーザーがEscキーを押すと、ダイアログボックスが閉じられます。デフォルトでは、その値は true です。オプション-closeOnEscape * このオプションを_false_に設定しない限り、ダイアログボックスにフォーカスがあるときにユーザーがEscキーを押すと、ダイアログボックスが閉じられます。デフォルトでは、その値は true です。構文 `$(".selector").dialog( { closeOnEscape: false } );`
5	closeText このオプションには、閉じるボタンのデフォルトの閉じるを置き換えるテキストが含まれています。デフォルトでは、その値は "close" です。オプション-closeText * このオプションには、閉じるボタンのデフォルトの閉じるを置き換えるテキストが含まれています。デフォルトでは、その値は "close" です。構文 `$(".selector").dialog( { closeText: "hide" } );`
6	dialogClass このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。デフォルトでは、その値は "" です。オプション-dialogClass * このオプションを false に設定すると、 ui-draggable クラスが選択されたDOM要素のリストに追加されなくなります。デフォルトでは、その値は "" です。構文 `$(".selector").dialog( { dialogClass: "alert" } );`
7	draggable このオプションを false にしない限り、タイトルバーをクリックしてドラッグすることでダイアログボックスをドラッグできます。デフォルトでは、その値は true です。オプション-ドラッグ可能このオプションを false にしない限り、タイトルバーをクリックしてドラッグすることでダイアログボックスをドラッグできます。デフォルトでは、その値は true です。構文 `$(".selector").dialog( { draggable: false } );`
8	height このオプションは、ダイアログボックスの高さを設定します。デフォルトでは、その値は "auto" です。オプション-高さこのオプションがダイアログボックスの高さを設定する場合。デフォルトでは、その値は "auto" です。このオプションはタイプにすることができます- これはタイプにすることができます- Number -これはミリ秒単位で期間を指定します String -サポートされる唯一の文字列値は_auto_です。これにより、ダイアログの高さをその内容に基づいて調整できます。構文 `$(".selector").dialog( { height: 400 } );`
9	hide このオプションは、ダイアログボックスが閉じられたときに使用される効果を設定するために使用されます。デフォルトでは、その値は null です。オプション-非表示このオプションは、ダイアログボックスが閉じられたときに使用される効果を設定するために使用されます。デフォルトでは、その値は null です。これはタイプにすることができます- ブール-値は_true/false_になります。 _false_の場合、アニメーションは使用されず、ダイアログはすぐに非表示になります。 _true_の場合、ダイアログはデフォルトの持続時間とデフォルトのイージングでフェードアウトします。 Number -ダイアログは、指定された期間とデフォルトのイージングでフェードアウトします。 String -ダイアログは、slideUp _、 fold_などの指定された効果を使用して非表示になります。オブジェクト-値がオブジェクトの場合、ダイアログを非表示にするために、effect、delay、duration、、および_easing_プロパティが提供されます。 + 10 構文 `$(".selector").dialog( { hide: { effect: "explode", duration: 1000 } } );`
11	maxHeight このオプションは、ダイアログボックスのサイズを変更できる最大の高さをピクセル単位で設定します。デフォルトでは、その値は false です。オプション-maxHeight * このオプションは、ダイアログボックスのサイズを変更できる最大の高さをピクセル単位で設定します。デフォルトでは、その値は false です。構文 `$(".selector").dialog( { maxHeight: 600 } );`
12	maxWidth このオプションは、ダイアログのサイズを変更できる最大幅をピクセル単位で設定します。デフォルトでは、その値は false です。オプション-maxWidth * このオプションは、ダイアログのサイズを変更できる最大幅をピクセル単位で設定します。デフォルトでは、その値は false です。構文 `$(".selector").dialog( { maxWidth: 600 } );`
13	minHeight このオプションは、ダイアログボックスのサイズを変更できる最小の高さ（ピクセル単位）です。デフォルトでは、その値は 150 です。オプション-minHeight * このオプションは、ダイアログボックスのサイズを変更できる最小の高さ（ピクセル単位）です。デフォルトでは、その値は 150 です。構文 `$(".selector").dialog( { minHeight: 200 } );`
14	minWidth このオプションは、ダイアログボックスのサイズを変更できる最小幅（ピクセル単位）です。デフォルトでは、その値は 150 です。オプション-minWidth * このオプションは、ダイアログボックスのサイズを変更できる最小幅（ピクセル単位）です。デフォルトでは、その値は 150 です。構文 `$(".selector").dialog( { minWidth: 200 } );`
15	modal このオプションが true に設定されている場合、ダイアログはモーダル動作になります。ページ上の他のアイテムは無効になります。つまり、操作することはできません。モーダルダイアログは、ダイアログの下で、他のページ要素の上にオーバーレイを作成します。デフォルトでは、その値は false です。オプション-モーダルこのオプションが true に設定されている場合、ダイアログはモーダル動作になります。ページ上の他のアイテムは無効になります。つまり、操作することはできません。モーダルダイアログは、ダイアログの下で、他のページ要素の上にオーバーレイを作成します。デフォルトでは、その値は false です。構文 `$(".selector").dialog( { modal: true } );`
16	position このオプションは、ダイアログボックスの初期位置を指定します。 _center（デフォルト）、left、right、top、またはbottom_の事前定義された位置のいずれかです。また、左と上の値（ピクセル単位）が[left、top]のような2要素配列、または['right'、 'top']などのテキスト位置にすることもできます。デフォルトでは、その値は \ {my： "center"、at： "center"、of：window} です。オプション-位置このオプションは、ダイアログボックスの初期位置を指定します。 _center（デフォルト）、left、right、top、またはbottom_の事前定義された位置のいずれかです。また、左と上の値（ピクセル単位）が[left、top]のような2要素配列、または['right'、 'top']などのテキスト位置にすることもできます。デフォルトでは、その値は \ {my： "center"、at： "center"、of：window} です。構文 `$(".selector").dialog( { position: { my: "left top", at: "left bottom", of: button } } );`
17	resizable このオプションは、 false に設定されていない限り、ダイアログボックスはすべての方向にサイズ変更できます。デフォルトでは、その値は true です。オプション-サイズ変更可能このオプションは、 false に設定されていない限り、ダイアログボックスはすべての方向にサイズ変更できます。デフォルトでは、その値は true です。構文 `$(".selector").dialog( { resizable: false } );`
18	show このオプションは、ダイアログボックスを開くときに使用する効果です。デフォルトでは、その値は null です。オプション-表示このオプションは、ダイアログボックスを開くときに使用する効果です。デフォルトでは、その値は null です。これはタイプにすることができます- ブール-値は_true/false_になります。 _false_の場合、アニメーションは使用されず、ダイアログはすぐに表示されます。 _true_の場合、ダイアログはデフォルトの持続時間とデフォルトのイージングでフェードインします。 Number -ダイアログは、指定された期間とデフォルトのイージングでフェードインします。 String -ダイアログは、slideDown _、 fold_などの指定された効果を使用して表示されます。オブジェクト-値がオブジェクトの場合、ダイアログを表示するために、effect、delay、duration、、および_easing_プロパティが提供されます。 + 19 構文 `$(".selector").dialog( { show: { effect: "blind", duration: 800 } } );`
20	title このオプションは、ダイアログボックスのタイトルバーに表示するテキストを指定します。デフォルトでは、その値は null です。オプション-タイトルこのオプションは、ダイアログボックスのタイトルバーに表示するテキストを指定します。デフォルトでは、その値は null です。構文 `$(".selector").dialog( { title: "Dialog Title" } );`
21	width このオプションは、ダイアログボックスの幅をピクセル単位で指定します。デフォルトでは、その値は 300 です。オプション-幅このオプションは、ダイアログボックスの幅をピクセル単位で指定します。デフォルトでは、その値は 300 です。構文 `$(".selector").dialog( { width: 500 } );`

Sr.No.	Action & Description
1	close() このアクションにより、ダイアログボックスが閉じます。このメソッドは引数を取りません。アクション-close（）このアクションにより、ダイアログボックスが閉じます。このメソッドは引数を取りません。構文 `$(".selector").dialog("close");`
2	destroy() このアクションにより、ダイアログボックスが完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-destroy（）このアクションにより、ダイアログボックスが完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$(".selector").dialog("destroy");`
3	isOpen() このアクションは、ダイアログボックスが開いているかどうかを確認します。このメソッドは引数を取りません。アクション-isOpen（）このアクションは、ダイアログボックスが開いているかどうかを確認します。このメソッドは引数を取りません。構文 `$(".selector").dialog("isOpen");`
4	moveToTop() このアクションは、対応するダイアログボックスを前景（他のダイアログボックスの上）に配置します。このメソッドは引数を取りません。アクション-moveToTop（）このアクションは、対応するダイアログボックスを前景（他のダイアログボックスの上）に配置します。このメソッドは引数を取りません。構文 `$(".selector").dialog("moveToTop");`
5	open() このアクションにより、ダイアログボックスが開きます。このメソッドは引数を取りません。アクション-open（）このアクションにより、ダイアログボックスが開きます。このメソッドは引数を取りません。構文 `$(".selector").dialog("open");`
6	option( optionName ) このアクションは、指定されたoptionNameに現在関連付けられている値を取得します。ここで、_optionName_は取得するオプションの名前です。アクション-option（optionName）このアクションは、指定されたoptionNameに現在関連付けられている値を取得します。ここで、_optionName_は取得するオプションの名前です。構文 `var isDisabled = $( ".selector" ).dialog( "option", "disabled" );`
7	option() このアクションは、現在のダイアログオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。アクション-option（）このアクションは、現在のダイアログオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。構文 `var options = $( ".selector" ).dialog( "option" );`
8	option( optionName, value ) このアクションは、指定されたoptionNameに関連付けられたダイアログオプションの値を設定します。アクション-option（optionName、value）このアクションは、指定されたoptionNameに関連付けられたダイアログオプションの値を設定します。構文 `$(".selector").dialog( "option", "disabled", true );`
9	option( options ) このアクションは、ダイアログの1つ以上のオプションを設定します。アクション-オプション（オプション）このアクションは、ダイアログの1つ以上のオプションを設定します。構文 `$(".selector").dialog( "option", { disabled: true });`
10	widget() このアクションは、ダイアログボックスのウィジェット要素を返します。 ui-dialogクラス名で注釈が付けられた要素。このメソッドは引数を取りません。アクション-ウィジェット（）このアクションは、ダイアログボックスのウィジェット要素を返します。 ui-dialogクラス名で注釈が付けられた要素。このメソッドは引数を取りません。構文 `$(".selector").dialog("widget");`

Sr.No.	Event Method & Description
1	beforeClose(event, ui) このイベントは、ダイアログボックスが閉じようとするときにトリガーされます。 _false_を返すと、ダイアログボックスが閉じなくなります。検証に失敗したフォームを持つダイアログボックスに便利です。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-beforeClose（event、ui）このイベントは、ダイアログボックスが閉じようとするときにトリガーされます。 _false_を返すと、ダイアログボックスが閉じなくなります。検証に失敗したフォームを持つダイアログボックスに便利です。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$(".selector").dialog ( beforeClose: function(event, ui) {} );`
2	close(event, ui) このイベントは、ダイアログボックスが閉じられるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-close（event、ui）このイベントは、ダイアログボックスが閉じられるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$(".selector").dialog ( close: function(event, ui) {} );`
3	create(event, ui) このイベントは、ダイアログボックスが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-create（event、ui）このイベントは、ダイアログボックスが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$(".selector").dialog ( create: function(event, ui) {} );`
4	drag(event, ui) ドラッグ中にダイアログボックスが移動すると、このイベントが繰り返しトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-drag（event、ui）ドラッグ中にダイアログボックスが移動すると、このイベントが繰り返しトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。 offset -ダイアログの現在のオフセット位置を表すjQueryオブジェクト。構文 `$(".selector").dialog ( drag: function(event, ui) {} );`
5	dragStart(event, ui) このイベントは、タイトルバーをドラッグしてダイアログボックスの位置を変更すると開始されます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-dragStart（event、ui）このイベントは、タイトルバーをドラッグしてダイアログボックスの位置を変更すると開始されます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。 offset -ダイアログの現在のオフセット位置を表すjQueryオブジェクト。構文 `$(".selector").dialog ( dragStart: function(event, ui) {} );`
6	dragStop(event, ui) このイベントは、ドラッグ操作が終了するとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-dragStop（event、ui）このイベントは、ドラッグ操作が終了するとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。 offset -ダイアログの現在のオフセット位置を表すjQueryオブジェクト。構文 `$(".selector").dialog ( dragStop: function(event, ui) {} );`
7	focus(event, ui) このイベントは、ダイアログがフォーカスを取得したときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-focus（event、ui）このイベントは、ダイアログがフォーカスを取得したときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$(".selector").dialog ( focus: function(event, ui) {} );`
8	open(event, ui) このイベントは、ダイアログボックスが開いたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-open（event、ui）このイベントは、ダイアログボックスが開いたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$(".selector").dialog ( open: function(event, ui) {} );`
9	resize(event, ui) このイベントは、ダイアログボックスのサイズが変更されると繰り返しトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-resize（event、ui）このイベントは、ダイアログボックスのサイズが変更されると繰り返しトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型です。_ui_の可能な値は- originalPosition -サイズ変更される前のダイアログのCSS位置を表すjQueryオブジェクト。 position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。 originalSize -サイズ変更される前のダイアログのサイズを表すjQueryオブジェクト。 size -ダイアログの現在のサイズを表すjQueryオブジェクト。構文 `$(".selector").dialog ( resize: function(event, ui) {} );`
10	resizeStart(event, ui) このイベントは、ダイアログボックスのサイズ変更が開始されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-resizeStart（event、ui）このイベントは、ダイアログボックスのサイズ変更が開始されるとトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型です。_ui_の可能な値は- originalPosition -サイズ変更される前のダイアログのCSS位置を表すjQueryオブジェクト。 position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。 originalSize -サイズ変更される前のダイアログのサイズを表すjQueryオブジェクト。 size -ダイアログの現在のサイズを表すjQueryオブジェクト。構文 `$(".selector").dialog ( resizeStart: function(event, ui) {} );`
11	resizeStop(event, ui) このイベントは、ダイアログボックスのサイズ変更が終了するとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベント-resizeStop（event、ui）このイベントは、ダイアログボックスのサイズ変更が終了するとトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型です。_ui_の可能な値は- originalPosition -サイズ変更される前のダイアログのCSS位置を表すjQueryオブジェクト。 position -ダイアログの現在のCSS位置を表すjQueryオブジェクト。 originalSize -サイズ変更される前のダイアログのサイズを表すjQueryオブジェクト。 size -ダイアログの現在のサイズを表すjQueryオブジェクト。構文 `$(".selector").dialog ( resizeStop: function(event, ui) {} );`

Sr.No.	Option & Description
1	disabled このオプションを_true_に設定すると、メニューが無効になります。デフォルトでは、その値は false です。オプション-無効このオプションを_true_に設定すると、メニューが無効になります。デフォルトでは、その値は false です。構文 `$( ".selector" ).menu ( { disabled: true } );`
2	icons このオプションは、サブメニューのアイコンを設定します。デフォルトでは、その値は \ {サブメニュー： "ui-icon-carat-1-e"} です。オプション-アイコンこのオプションは、サブメニューのアイコンを設定します。デフォルトでは、その値は \ {サブメニュー： "ui-icon-carat-1-e"} です。構文 `$( ".selector" ).menu ( { icons: { submenu: "ui-icon-circle-triangle-e" } } );`
3	menus このオプションは、サブメニューを含むメニューコンテナーとして機能する要素のセレクターです。デフォルトでは、その値は ul です。オプション-メニューこのオプションは、サブメニューを含むメニューコンテナーとして機能する要素のセレクターです。デフォルトでは、その値は ul です。構文 `$( ".selector" ).menu ( { menus: "div" } );`
4	position このオプションは、関連する親メニュー項目に対するサブメニューの位置を設定します。デフォルトでは、その値は \ {my： "left top"、at： "right top"} です。オプション-位置このオプションは、関連する親メニュー項目に対するサブメニューの位置を設定します。デフォルトでは、その値は \ {my： "left top"、at： "right top"} です。構文 `$( ".selector" ).menu ( { position: { my: "left top", at: "right-5 top+5" } } );`
5	role このオプションは、メニューおよびメニュー項目に使用されるARIAロールをカスタマイズするために使用されます。デフォルトでは、その値は menu です。オプション-役割このオプションは、メニューおよびメニュー項目に使用されるARIAロールをカスタマイズするために使用されます。デフォルトでは、その値は menu です。 '_Web Accessibility Initiative（WAI）の一部であるAccessible Rich Internet Applications Suite（ARIA）は、WebコンテンツとWebアプリケーションをよりアクセスしやすくする方法を定義しています。 Ajax、HTML、JavaScript、および関連技術で開発された動的コンテンツと高度なユーザーインターフェイスコントロールのアクセシビリティを向上させるために使用されます。詳細については、http：//www.w3.org/WAI/GL/wiki/Using_ARIA_menus [ARIA]をご覧ください。_ 構文 `$( ".selector" ).menu ( { role: null } );`

Sr.No.	Option & Description
1	animate このオプションを_true_に設定すると、ユーザーが軸を直接クリックしたときにアニメーション効果が作成されます。デフォルトでは、その値は false です。オプション-アニメーションこのオプションを_true_に設定すると、ユーザーが軸を直接クリックしたときにアニメーション効果が作成されます。デフォルトでは、その値は false です。これはタイプにすることができます- ブール-_true_に設定すると、ハンドルはデフォルトの持続時間でアニメーション化します。文字列- + slow、normal、、_ fast_などの速度の名前番号- +アニメーションの継続時間（ミリ秒単位）。構文 `$( ".selector" ).slider( { animate: "fast" } );`
2	disabled このオプションを_true_に設定すると、スライダーが無効になります。デフォルトでは、その値は false です。オプション-無効このオプションを_true_に設定すると、スライダーが無効になります。デフォルトでは、その値は false です。構文 `$( ".selector" ).slider( { disabled: true } );`
3	max このオプションは、スライダーが到達できる範囲の上限値を指定します。ハンドルが右端（水平スライダーの場合）または上部（垂直スライダーの場合）に移動したときに表される値です。デフォルトでは、その値は 100 です。オプション-最大このオプションは、スライダーが到達できる範囲の上限値を指定します。ハンドルが右端（水平スライダーの場合）または上部（垂直スライダーの場合）に移動したときに表される値です。デフォルトでは、その値は 100 です。構文 `$( ".selector" ).slider( { max: 50 } );`
4	min このオプションは、スライダーが到達できる範囲の下限値を指定します。ハンドルが左端（水平スライダーの場合）または下部（垂直スライダーの場合）に移動したときに表される値です。デフォルトでは、その値は 0 です。オプション-最小このオプションは、スライダーが到達できる範囲の下限値を指定します。ハンドルが左端（水平スライダーの場合）または下部（垂直スライダーの場合）に移動したときに表される値です。デフォルトでは、その値は 0 です。構文 `$( ".selector" ).slider( { min: 10 } );`
5	orientation このオプションは、スライダーの水平方向または垂直方向を示します。デフォルトでは、その値は horizontal です。オプション-方向このオプションは、スライダーの水平方向または垂直方向を示します。デフォルトでは、その値は horizontal です。構文 `$( ".selector" ).slider( { "option", "orientation" } );`
6	range このオプションは、スライダーが範囲を表すかどうかを指定します。デフォルトでは、その値は false です。オプション-範囲このオプションは、スライダーが範囲を表すかどうかを指定します。デフォルトでは、その値は false です。これはタイプにすることができます- ブール-_true_として指定され、スライダーにちょうど2つのハンドルがある場合、スタイル設定できる要素がハンドル間に作成されます。文字列- + _min_または_max_にできます。指定すると、ハンドルからスライダーの開始または終了までの範囲要素がそれぞれ作成されます。構文 `$( ".selector" ).slider( { range: true } );`
7	step このオプションは、スライダーが表すことができる最小値と最大値の間の離散間隔を指定します。デフォルトでは、その値は 1 です。オプション-ステップこのオプションは、スライダーが表すことができる最小値と最大値の間の離散間隔を指定します。デフォルトでは、その値は 1 です。構文 `$( ".selector" ).slider( { step: 5 } );`
8	value このオプションは、シングルハンドルスライダーの初期値を指定します。複数のハンドルがある場合（値オプションを参照）、最初のハンドルの値を指定します。デフォルトでは、その値は 1 です。オプション-値 >このオプションは、シングルハンドルスライダーの初期値を指定します。複数のハンドルがある場合（値オプションを参照）、最初のハンドルの値を指定します。デフォルトでは、その値は 1 です。構文 `$( ".selector" ).slider( { value: 10 } );`
9	values このオプションは配列タイプであり、複数のハンドルを作成し、それらのハンドルの初期値を指定します。このオプションは、ハンドルごとに1つの可能な値の配列である必要があります。デフォルトでは、その値は null です。オプション-値このオプションは配列タイプであり、複数のハンドルを作成し、それらのハンドルの初期値を指定します。このオプションは、ハンドルごとに1つの可能な値の配列である必要があります。デフォルトでは、その値は null です。構文 `$( ".selector" ).slider( { values: [ 10, 25 ] } );`

Jqueryui-quick-guide

JqueryUI-概要

特徴

JqueryUIの利点

JqueryUI-環境設定

公式WebサイトからUIライブラリをダウンロードする

ダウンロードビルダーを使用したカスタムダウンロード

安定したダウンロード

レガシーダウンロード

CDNからUIライブラリをダウンロードする

例

JqueryUI-ドラッグ可能

構文

$（セレクター、コンテキスト）.draggable（オプション）メソッド

構文

デフォルトの機能

無効化、距離、および遅延の使用

動きを制限する

複製してコンテンツを移動する

現在のオプション値を取得

$（セレクター、コンテキスト）.draggable（ "action"、[params]）メソッド

構文

例

移動した要素のイベント管理

例

JqueryUI-ドロップ可能

構文

$（セレクター、コンテキスト）.droppable（オプション）メソッド

構文

デフォルトの機能

addClass、無効、および許容値の使用

ドロップする要素を選択してください

外観の管理

$（セレクター、コンテキスト）.droppable（ "action"、params）メソッド

構文

例

ドロップ可能な要素のイベント管理

例

JqueryUI-サイズ変更可能

構文

$（セレクター、コンテキスト）.resizable（オプション）メソッド

構文

デフォルトの機能

アニメートとゴーストの使用

包含、minHeight、およびminWidthの使用

遅延、距離、および自動非表示の使用

alsoResizeの使用

AspectRatio、Gridの使用

$（セレクター、コンテキスト）.resizable（ "action"、params）メソッド

構文

例

サイズ変更可能な要素のイベント管理

例

JqueryUI-選択可能

構文

$（セレクター、コンテキスト）.selectable（オプション）メソッド

構文

デフォルトの機能

遅延と距離の使用

フィルターの使用

$（セレクター、コンテキスト）.selectable（ "action"、params）メソッド

構文

例

選択可能な要素のイベント管理

例

JqueryUI-ソート可能

構文

$（セレクター、コンテキスト）.sortable（オプション）メソッド

構文

デフォルトの機能

オプションの使用遅延と距離

プレースホルダーの使用

オプションConnectwithおよびDroponemptyの使用

$（セレクター、コンテキスト）.sortable（ "action"、[params]）メソッド

構文

例

ソート可能な要素のイベント管理

例

JqueryUI-アコーディオン

構文

Sr.No.	Action & Description
1	destroy このアクションは、要素のスライダー機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-破壊このアクションは、要素のスライダー機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$( ".selector" ).slider("destroy");`
2	disable このアクションは、スライダー機能を無効にします。このメソッドは引数を取りません。アクション-無効このアクションは、スライダー機能を無効にします。このメソッドは引数を取りません。構文 `$( ".selector" ).slider("disable");`
3	enable このアクションにより、スライダー機能が有効になります。このメソッドは引数を取りません。アクション-有効このアクションにより、スライダー機能が有効になります。このメソッドは引数を取りません。構文 `$( ".selector" ).slider("enable");`
4	option( optionName ) このアクションは、指定されたparamオプションの値を取得します。このオプションは、_slider（オプション）_で使用されるオプションの1つに対応します。ここで、_optionName_は取得するオプションの名前です。アクション-option（optionName）このアクションは、指定されたparamオプションの値を取得します。このオプションは、_slider（オプション）_で使用されるオプションの1つに対応します。ここで、_optionName_は取得するオプションの名前です。構文 `var isDisabled = $( ".selector" ).slider( "option", "disabled" );`
5	option() このアクションは、現在のスライダーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-option（）このアクションは、現在のスライダーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `var options = $( ".selector" ).slider( "option" );`
6	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたスライダーオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたスライダーオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).slider( "option", "disabled", true );`
7	option( options ) このアクションは、スライダーの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）このアクションは、スライダーの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).slider( "option", { disabled: true } );`
8	value このアクションは、_options.value（スライダー）_の現在の値を取得します。スライダーが一意である場合にのみ使用します（一意でない場合は、_slider（ "値"））_を使用します。このシグネチャは引数を受け入れません。アクション-値このアクションは、_options.value（インジケーター）_の現在の値を取得します。インジケーターが一意の場合にのみ使用します（一意でない場合は、_slider（ "values"））_を使用します。このシグネチャは引数を受け入れません。構文 `$( ".selector" ).slider("value");`
9	value( value ) このアクションは、スライダーの値を設定します。アクション-値（値）このアクションは、スライダーの値を設定します。構文 `$( ".selector" ).slider( "value", 55 );`
10	values このアクションは、_options.values_の現在の値（配列内のスライダーの値）を取得します。このシグネチャは引数を受け入れません。アクション-値このアクションは、_options.values_の現在の値（配列内のスライダーの値）を取得します。このシグネチャは引数を受け入れません。構文 `var values = $( ".selector" ).slider( "values" );`
11	values( index ) このアクションは、指定されたハンドルの値を取得します。 _index_は整数型であり、ハンドルのゼロベースのインデックスです。アクション-値（インデックス）このアクションは、指定されたハンドルの値を取得します。 _index_は整数型であり、ハンドルのゼロベースのインデックスです。構文 `var value = $( ".selector" ).slider( "values", 0 );`
12	values( index, value ) このアクションは、指定されたハンドルの値を設定します。ここで、_index_はハンドルのゼロベースのインデックスであり、_value_は設定する値です。アクション-値（インデックス、値）このアクションは、指定されたハンドルの値を設定します。ここで、_index_はハンドルのゼロベースのインデックスであり、_value_は設定する値です。構文 `$( ".selector" ).slider( "values", 0, 55 );`
13	values( values ) このアクションは、すべてのハンドルの値を設定します。アクション-値（値）このアクションは、すべてのハンドルの値を設定します。構文 `$( ".selector" ).slider( "values", [ 55, 105 ] );`
14	widget このアクションは、スライダーを含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェットこのアクションは、スライダーを含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `var widget = $( ".selector" ).slider( "widget" );`

Sr.No.	Event Method & Description
1	change(event, ui) このイベントは、ユーザーアクションまたはプログラムによって、ハンドルの値の変更をトリガーします。イベント-change（event、ui）このイベントは、ユーザーアクションまたはプログラムによって、ハンドルの値の変更をトリガーします。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- handle -変更されたハンドルを表すjQueryオブジェクト。値-スライダーの現在の値。構文 `$( ".selector" ).slider({ change: function( event, ui ) {} });`
2	create(event, ui) このイベントは、スライダーが作成されたときにトリガーされます。イベント-create（event、ui）このイベントは、スライダーが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).slider({ create: function( event, ui ) {} });`
3	slide(event, ui) このイベントは、ハンドルがスライダーを介してドラッグされるたびに、マウス移動イベントに対してトリガーされます。 falseを返すと、スライドがキャンセルされます。イベント-スライド（イベント、UI）このイベントは、ハンドルがスライダーを介してドラッグされるたびに、マウス移動イベントに対してトリガーされます。 falseを返すと、スライドがキャンセルされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- handle -移動されるハンドルを表すjQueryオブジェクト。値-イベントがキャンセルされない場合にハンドルが移動する値。値-マルチハンドルスライダーの現在の値の配列。構文 `$( ".selector" ).slider({ slide: function( event, ui ) {} });`
4	start(event, ui) このイベントは、ユーザーがスライドを開始したときにトリガーされます。イベント-start（event、ui）このイベントは、ユーザーがスライドを開始したときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- handle -移動されるハンドルを表すjQueryオブジェクト。値-スライダーの現在の値。構文 `$( ".selector" ).slider({ start: function( event, ui ) {} });`
5	stop(event, ui) このイベントは、スライドが停止するとトリガーされます。イベント-停止（イベント、UI）このイベントは、スライドが停止するとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- handle -移動されたハンドルを表すjQueryオブジェクト。値-スライダーの現在の値。構文 `$( ".selector" ).slider({ stop: function( event, ui ) {} });`

Sr.No.	Option & Description
1	culture このオプションは、値の解析とフォーマットに使用するカルチャを設定します。デフォルトでは、その値は null です。これは、Globalizeで現在設定されているカルチャが使用されることを意味します。オプション-カルチャこのオプションは、値の解析とフォーマットに使用するカルチャを設定します。デフォルトでは、その値は null です。これは、Globalizeで現在設定されているカルチャが使用されることを意味します。 _numberFormat_オプションが設定されている場合にのみ関連します。 Globalizeを含める必要があります。構文 `$( ".selector" ).spinner( { culture: "fr" } );`
2	disabled このオプションは、_true_に設定されている場合、スピナーを無効にします。デフォルトでは、その値は false です。オプション-無効このオプションは、_true_に設定されている場合、スピナーを無効にします。デフォルトでは、その値は false です。構文 `$( ".selector" ).spinner( { disabled: true } );`
3	icons このオプションは、ボタンに使用するアイコンを設定し、https://api.jqueryui.com/theming/icons/[jQuery UI CSS Framework]によって提供されるアイコンと一致します。デフォルトでは、その値は \ {down： "ui-icon-triangle-1-s"、up： "ui-icon-triangle-1-n"} です。オプション-アイコンこのオプションは、ボタンに使用するアイコンを設定し、https://api.jqueryui.com/theming/icons/[jQuery UI CSS Framework]によって提供されるアイコンと一致します。デフォルトでは、その値は \ {down： "ui-icon-triangle-1-s"、up： "ui-icon-triangle-1-n"} です。構文 `$( ".selector" ).spinner( { icons: { down: "custom-down-icon", up: "custom-up-icon" } } );`
4	incremental このオプションは、スピンボタンを押したときに実行されるステップの数を制御します。デフォルトでは、その値は true です。オプション-増分このオプションは、スピンボタンを押したときに実行されるステップの数を制御します。デフォルトでは、その値は true です。これはタイプにすることができます- ブール-_false_に設定すると、すべてのステップが等しくなります。 _true_に設定すると、絶え間なく回転するときにステッピングデルタが増加します。関数-これは、現在のスピンで発生するステップ数を返す必要があります。構文 `$( ".selector" ).spinner( { incremental: false } );`
5	max このオプションは、許可される最大値を示します。デフォルトでは、その値は null であり、強制される最大値はありません。オプション-最大このオプションは、許可される最大値を示します。デフォルトでは、その値は null であり、強制される最大値はありません。これはタイプにすることができます- Number -最大値。 String -Globalizeが含まれている場合、maxオプションは、_numberFormat_および_culture_オプションに基づいて解析される文字列として渡すことができます構文 `$( ".selector" ).spinner( { max: 50 } );`
6	min このオプションは、許可される最小値を示します。デフォルトでは、その値は null です。これは、強制される最小値がないことを意味します。オプション-最小このオプションは、許可される最小値を示します。デフォルトでは、その値は null です。これは、強制される最小値がないことを意味します。これはタイプにすることができます- Number -最小値。 String -Globalizeが含まれている場合、minオプションは、_numberFormat_および_culture_オプションに基づいて解析される文字列として渡すことができます . 構文 `$( ".selector" ).spinner( { min: 0 } );`
7	numberFormat このオプションは、可能であれば、_Globalize_に渡される数値の形式を示します。最も一般的なのは、10進数の「n」と通貨値の「C」です。デフォルトでは、その値は null です。オプション-numberFormat * このオプションは、可能であれば、_Globalize_に渡される数値の形式を示します。最も一般的なのは、10進数の「n」と通貨値の「C」です。デフォルトでは、その値は null です。構文 `$( ".selector" ).spinner( { numberFormat: "n" } );`
8	page このオプションは、pageUp/pageDownメソッドを介してページングするときに実行するステップの数を示します。デフォルトでは、その値は 10 です。オプション-ページこのオプションは、pageUp/pageDownメソッドを介してページングするときに実行するステップの数を示します。デフォルトでは、その値は 10 です。構文 `$( ".selector" ).spinner( { page: 5 } );`
9	step このオプションは、ボタンまたは_stepUp（）/stepDown（）_メソッドを使用してスピンするときに実行するステップのサイズを示します。要素の_step_属性が存在し、オプションが明示的に設定されていない場合に使用されます。オプション-ステップこのオプションは、ボタンまたは_stepUp（）/stepDown（）_メソッドを使用してスピンするときに実行するステップのサイズを示します。要素の_step_属性が存在し、オプションが明示的に設定されていない場合に使用されます。これはタイプにすることができます- Number -ステップのサイズ。 String -Globalizeが含まれている場合、stepオプションは、_numberFormat_および_culture_オプションに基づいて解析される文字列として渡すことができます。そうでない場合、ネイティブparseFloatにフォールバックします。 `$( ".selector" ).spinner( { step: 2 } );`

Sr.No.	Action & Description
1	destroy このアクションは、要素のスピナー機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-破壊このアクションは、要素のスピナー機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$(".selector").spinner("destroy");`
2	disable このアクションは、スピナー機能を無効にします。このメソッドは引数を取りません。アクション-無効このアクションは、スピナー機能を無効にします。このメソッドは引数を取りません。構文 `$(".selector").spinner("disable");`
3	enable このアクションにより、スピナー機能が有効になります。このメソッドは引数を取りません。アクション-有効このアクションにより、スピナー機能が有効になります。このメソッドは引数を取りません。構文 `$(".selector").spinner("enable");`
4	option( optionName ) このアクションは、指定された_optionName_に現在関連付けられている値を取得します。ここで、_optionName_は取得するオプションの名前です。アクション-option（optionName）このアクションは、指定された_optionName_に現在関連付けられている値を取得します。ここで、_optionName_は取得するオプションの名前です。構文 `var isDisabled = $( ".selector" ).spinner( "option", "disabled" );`
5	option このアクションは、現在のスピナーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。アクション-オプションこのアクションは、現在のスピナーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。構文 `var options = $( ".selector" ).spinner( "option" );`
6	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたスピナーオプションの値を設定します。アクション-optionName * このアクションは、指定された_optionName_に関連付けられたスピナーオプションの値を設定します。構文 `$( ".selector" ).spinner( "option", "disabled", true );`
7	option( options ) このアクションは、スピナーの1つ以上のオプションを設定します。アクション-オプション（オプション）このアクションは、スピナーの1つ以上のオプションを設定します。構文 `$(".selector").spinner("option", { disabled: true });`
8	pageDown( [pages )] このアクションは、ページオプションで定義されているように、指定されたページ数だけ値を減らします。アクション-pageDown（[pages]）このアクションは、ページオプションで定義されているように、指定されたページ数だけ値を減らします。 pageDown（）_を呼び出すと、_start、spin、、および_stop_イベントがトリガーされます。構文 `$(".selector").spinner("pageDown");`
9	pageUp( [pages )] このアクションは、ページオプションで定義されているように、指定されたページ数だけ値を増やします。アクション-pageUp（[pages]）このアクションは、ページオプションで定義されているように、指定されたページ数だけ値を増やします。 pageUp（）_を呼び出すと、_start、spin、、および_stop_イベントがトリガーされます。構文 `$(".selector").spinner("pageUp");`
10	stepDown( [steps )] このアクションは、指定されたステップ数だけ値を減らします。アクション-stepDown（[steps]）このアクションは、指定されたステップ数だけ値を減らします。 stepDown（）_を呼び出すと、_start、spin、、および_stop_イベントがトリガーされます。構文 `$(".selector").spinner("stepDown");`
11	stepUp( [steps )] このアクションは、指定されたステップ数だけ値を増やします。アクション-stepUp（[steps]）このアクションは、指定されたステップ数だけ値を増やします。 stepUp（）_を呼び出すと、_start、spin、、および_stop_イベントがトリガーされます。構文 `$(".selector").spinner("stepUp");`
12	value このアクションは、現在の値を数値として取得します。値はnumberFormatおよびカルチャオプションに基づいて解析されます。このメソッドは引数を取りません。アクション-値このアクションは、現在の値を数値として取得します。値はnumberFormatおよびカルチャオプションに基づいて解析されます。このメソッドは引数を取りません。構文 `var value = $( ".selector" ).spinner( "value" );`
13	value( value ) このアクションは値を設定します。値が渡された場合、値はnumberFormatおよびcultureオプションに基づいて解析されます。アクション-値（値）このアクションは値を設定します。値が渡された場合、値はnumberFormatおよびcultureオプションに基づいて解析されます。構文 `$( ".selector" ).spinner( "value", 50 );`
14	widget このアクションは、スピナーウィジェット要素を返します。 _ui-spinner_クラス名で注釈が付けられたもの。アクション-ウィジェットこのアクションは、スピナーウィジェット要素を返します。 _ui-spinner_クラス名で注釈が付けられたもの。構文 `$( ".selector" ).spinner( "widget");`

Sr.No.	Event Method & Description
1	change(event, ui) このイベントは、スピナーの値が変更され、入力がフォーカスされなくなったときにトリガーされます。イベント-change（event、ui）このイベントは、スピナーの値が変更され、入力がフォーカスされなくなったときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).spinner({ change: function( event, ui ) {} });`
2	create(event, ui) このイベントは、スピナーが作成されたときにトリガーされます。イベント-create（event、ui）このイベントは、スピナーが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).spinner({ create: function( event, ui ) {} });`
3	spin(event, ui) このイベントは、インクリメント/デクリメント中にトリガーされます。イベント-spin（event、ui）このイベントは、インクリメント/デクリメント中にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。イベントがキャンセルされない限り、設定される新しい値を表します。構文 `$( ".selector" ).spinner({ spin: function( event, ui ) {} });`
4	start(event, ui) このイベントはスピンの前にトリガーされます。キャンセルして、スピンの発生を防ぐことができます。イベント-start（event、ui）このイベントはスピンの前にトリガーされます。キャンセルして、スピンの発生を防ぐことができます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).spinner({ start: function( event, ui ) {} });`
5	stop(event, ui) このイベントはスピン後にトリガーされます。イベント-停止（イベント、UI）このイベントはスピン後にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).spinner({ stop: function( event, ui ) {} });`

Sr.No.	Option & Description
1	active このオプションは、現在アクティブなタブ/パネルを指定します。デフォルトでは、その値は 0 です。オプション-アクティブこのオプションは、現在アクティブなタブ/パネルを指定します。デフォルトでは、その値は 0 です。これはタイプにすることができます- ブール-_false_に設定すると、すべてのパネルが折りたたまれます。これには、_collapsible_オプションが_true_である必要があります。整数- +アクティブな（開いている）パネルのゼロから始まるインデックス。負の値は、最後のパネルから逆方向に進むパネルを選択します。構文 `$( ".selector" ).tabs ( { active: 1 } );`
2	collapsible このオプションを_true_に設定すると、タブの選択を解除できます。 false（デフォルト）に設定すると、選択したタブをクリックしても選択解除されません（選択されたままです）。デフォルトでは、その値は false です。オプション-折りたたみ可能このオプションを_true_に設定すると、タブの選択を解除できます。 false（デフォルト）に設定すると、選択したタブをクリックしても選択解除されません（選択されたままです）。デフォルトでは、その値は false です。構文 `$( ".selector" ).tabs ( { collapsible: true } );`
3	disabled このオプションは配列を使用して、無効になっている（したがって選択できない）インデックスタブを示します。たとえば、[0、1]を使用して最初の2つのタブを無効にします。デフォルトでは、その値は false です。オプション-無効このオプションは配列を使用して、無効になっている（したがって選択できない）インデックスタブを示します。たとえば、[0、1]を使用して最初の2つのタブを無効にします。デフォルトでは、その値は false です。これはタイプにすることができます- ブール-すべてのタブを有効または無効にします。 Array -無効にする必要があるタブのゼロベースのインデックスを含む配列。たとえば、[0、2]は、最初と3番目のタブを無効にします。構文 `$( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );`
4	event このオプションは、ユーザーが新しいタブを選択できるようにするイベントの名前です。たとえば、このオプションが「マウスオーバー」に設定されている場合、マウスをタブの上に置くと選択されます。デフォルトでは、その値は "click" です。オプション-イベントこのオプションは、ユーザーが新しいタブを選択できるようにするイベントの名前です。たとえば、このオプションが「マウスオーバー」に設定されている場合、マウスをタブの上に置くと選択されます。デフォルトでは、その値は "click" です。構文 `$( ".selector" ).tabs ( { event: "mouseover" } );`
5	heightStyle このオプションは、タブウィジェットと各パネルの高さを制御します。デフォルトでは、その値は "content" です。オプション-heightStyle * このオプションは、タブウィジェットと各パネルの高さを制御します。デフォルトでは、その値は "content" です。可能な値は- auto -すべてのパネルは最も高いパネルの高さに設定されます。 fill -タブの親の高さに基づいて利用可能な高さに展開します。 content -各パネルの高さはコンテンツの高さのみです。構文 `$( ".selector" ).tabs ( { heightStyle: "fill" } );`
6	hide このオプションは、パネルの非表示をアニメーション化する方法を指定します。デフォルトでは、その値は null です。オプション-非表示このオプションは、パネルの非表示をアニメーション化する方法を指定します。デフォルトでは、その値は null です。これはタイプにすることができます- ブール-_false_に設定すると、アニメーションは使用されず、パネルはすぐに非表示になります。 Number -パネルは、指定された期間とデフォルトのイージングでフェードアウトします。 String -パネルは、指定された効果を使用して非表示になります。値は_slideUp_または_fold_ですオブジェクト-このタイプでは、プロパティ_effect 、 delay 、 duration_、および_easing_が提供されます。構文 `$( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );`
7	show このオプションは、パネルの表示をアニメーション化する方法を指定します。デフォルトでは、その値は null です。オプション-表示このオプションは、パネルの表示をアニメーション化する方法を指定します。デフォルトでは、その値は null です。これはタイプにすることができます- ブール-_false_に設定すると、アニメーションは使用されず、パネルがすぐに表示されます。 Number -パネルは、指定された期間とデフォルトのイージングでフェードアウトします。 String -パネルは指定された効果を使用して表示されます。値は_slideUp_または_fold_です。オブジェクト-このタイプでは、プロパティ_effect 、 delay 、 duration_、および_easing_が提供されます。構文 `$( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );`

Sr.No.	Action & Description
1	destroy このアクションは、要素のタブ機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-破壊このアクションは、要素のタブ機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$( ".selector" ).tabs("destroy");`
2	disable このアクションにより、すべてのタブが無効になります。このメソッドは引数を取りません。アクション-無効このアクションにより、すべてのタブが無効になります。このメソッドは引数を取りません。構文 `$( ".selector" ).tabs("disable");`
3	disable( index ) このアクションは、指定されたタブを無効にします。ここで、_index_は無効にするタブです。アクション-disable（index）このアクションは、指定されたタブを無効にします。ここで、_index_は無効にするタブです。一度に複数のタブを無効にするには、無効オプションを設定します：$（ "#tabs"）.tabs（ "option"、 "disabled"、[1、2、3]）。構文 `$( ".selector" ).tabs( "disable", 1 );`
4	enable このアクションにより、すべてのタブがアクティブになります。このシグネチャは引数を受け入れません。アクション-有効このアクションにより、すべてのタブがアクティブになります。このシグネチャは引数を受け入れません。構文 `$( ".selector" ).tabs("enable");`
5	enable( index ) このアクションは、指定されたタブをアクティブにします。ここで、_index_は有効にするタブです。アクション-enable（index）このアクションは、指定されたタブをアクティブにします。ここで、_index_は有効にするタブです。一度に複数のタブを有効にするには、$（ "#example"）.tabs（ "option"、 "disabled"、[]）;のような無効なプロパティをリセットします。構文 `$( ".selector" ).tabs( "enable", 1 );`
6	load( index ) このアクションは、キャッシュを無視して、インデックス付きタブのリロードを強制します。ここで、_index_はロードするタブです。アクション-load（index）このアクションは、キャッシュを無視して、インデックス付きタブのリロードを強制します。ここで、_index_はロードするタブです。構文 `$( ".selector" ).tabs("load", 1);`
7	option( optionName ) このアクションは、指定された_optionName_に現在関連付けられている値を取得します。アクション-option（optionName）このアクションは、指定された_optionName_に現在関連付けられている値を取得します。構文 `var isDisabled = $( ".selector" ).tabs( "option", "disabled" );`
8	option このアクションは、現在のタブオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-オプションこのアクションは、現在のタブオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。構文 `$( ".selector" ).tabs("option");`
9	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたタブオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたタブオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).tabs( "option", "disabled", true );`
10	option( options ) このアクションは、タブに1つ以上のオプションを設定します。アクション-オプション（オプション）このアクションは、タブに1つ以上のオプションを設定します。構文 `$( ".selector" ).tabs( "option", { disabled: true } );`
11	refresh このアクションは、DOMで直接追加または削除されたタブがある場合、タブパネルの高さを再計算します。結果はコンテンツと_heightStyle_オプションに依存します。アクション-更新このアクションは、DOMで直接追加または削除されたタブがある場合、タブパネルの高さを再計算します。結果はコンテンツと_heightStyle_オプションに依存します。構文 `$( ".selector" ).tabs( "refresh" );`
12	widget このアクションは、_ui-tabs_クラス名で注釈が付けられたタブウィジェットとして機能する要素を返します。アクション-ウィジェットこのアクションは、_ui-tabs_クラス名で注釈が付けられたタブウィジェットとして機能する要素を返します。構文 `var widget = $( ".selector" ).tabs( "widget" );`

Sr.No.	Event Method & Description
1	activate(event, ui) このイベントは、タブがアクティブになった後（アニメーションの完了後）にトリガーされます。イベント-activate（event、ui）このイベントは、タブがアクティブになった後（アニメーションの完了後）にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- newTab -アクティブ化されたばかりのタブ。 oldTab -非アクティブ化されたばかりのタブ。 newPanel -アクティブ化されたばかりのパネル。 oldPanel -非アクティブ化されたばかりのパネル。構文 `$( ".selector" ).slider({ activate: function( event, ui ) {} });`
2	beforeActivate(event, ui) このイベントは、タブがアクティブになる前にトリガーされます。イベント-beforeActivate（event、ui）このイベントは、タブがアクティブになる前にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- newTab -アクティブ化されようとしているタブ。 oldTab -非アクティブ化されようとしているタブ。 newPanel -パネルがアクティブ化されようとしています。 oldPanel -パネルは非アクティブ化されようとしています。構文 `$( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });`
3	beforeLoad(event, ui) このイベントは、_beforeActivate_イベントの後、リモートタブがロードされる直前にトリガーされます。このイベントは、Ajaxリクエストが行われる直前にトリガーされます。イベント-beforeLoad（event、ui）このイベントは、_beforeActivate_イベントの後、リモートタブがロードされる直前にトリガーされます。このイベントは、Ajaxリクエストが行われる直前にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- tab -ロードされているタブ。 panel -Ajax応答によって入力されるパネル。 jqXHR -コンテンツを要求している_jqXHR_オブジェクト。 ajaxSettings -_jQuery.ajax_がコンテンツを要求するために使用する設定。構文 `$( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });`
4	create(event, ui) このイベントは、タブが作成されるとトリガーされます。イベント-create（event、ui）このイベントは、タブが作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- tab -アクティブなタブ。 panel -アクティブなパネル。構文 `$( ".selector" ).slider({ create: function( event, ui ) {} });`
5	load(event, ui) このイベントは、リモートタブが読み込まれた後にトリガーされます。イベント-load（event、ui）このイベントは、リモートタブが読み込まれた後にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- tab -読み込まれたばかりのタブ。 panel -Ajax応答によって作成されたパネル。構文 `$( ".selector" ).slider({ load: function( event, ui ) {} });`

Sr.No.	Option & Description
1	content このオプションは、ツールチップのコンテンツを表します。デフォルトでは、その値は* title属性を返す関数です。オプション-コンテンツ* このオプションは、ツールチップのコンテンツを表します。デフォルトでは、その値は* title属性を返す関数です。これはタイプにすることができます- 関数-コールバックは、コンテンツを直接返すか、最初の引数を呼び出してコンテンツを渡すことができます。 Ajaxコンテンツ用。 String* -ツールチップのコンテンツに使用するHTMLの文字列。構文 `$(".selector").tooltip( { content: "Some content!" } );`
2	disabled このオプションを_true_に設定すると、ツールチップが無効になります。デフォルトでは、その値は false です。オプション-無効このオプションを_true_に設定すると、ツールチップが無効になります。デフォルトでは、その値は false です。構文 `$(".selector").tooltip( { disabled: true } );`
3	hide このオプションは、ツールチップを非表示にするときのアニメーション効果を表します。デフォルトでは、その値は true です。オプション-非表示このオプションは、ツールチップを非表示にするときのアニメーション効果を表します。デフォルトでは、その値は true です。これはタイプにすることができます- ブール-これは_true_または_false_になります。 _true_に設定すると、ツールヒントはデフォルトの継続時間とデフォルトのイージングでフェードアウトします。 Number -ツールチップは、指定された期間とデフォルトのイージングでフェードアウトします。 String -ツールチップは、_ "slideUp"、 "fold" _などの指定された効果を使用して非表示になります。オブジェクト-可能な値は、effect、delay、duration、、および_easing_です。構文 `$(".selector").tooltip( { hide: { effect: "explode", duration: 1000 } } );`
4	items このオプションは、ツールチップを表示できるアイテムを示します。デフォルトでは、その値は [title] です。オプション-アイテムこのオプションは、ツールチップを表示できるアイテムを示します。デフォルトでは、その値は [title] です。構文 `$(".selector").tooltip( { items: "img[alt]" } );`
5	position このオプションは、関連するターゲット要素に対するツールチップの位置を決定します。デフォルトでは、その値は* title属性を返す関数です。可能な値は次のとおりです。my、at、of、collision、using、within.* オプション-位置このオプションは、関連するターゲット要素に対するツールチップの位置を決定します。デフォルトでは、その値は* title属性を返す関数です。可能な値は次のとおりです。my、at、of、collision、using、within.* 構文 `$(".selector").tooltip( { { my: "left top+15", at: "left bottom", collision: "flipfit" } } );`
6	show このオプションは、ツールチップの表示をアニメーション化する方法を表します。デフォルトでは、その値は true です。オプション-表示このオプションは、ツールチップの表示をアニメーション化する方法を表します。デフォルトでは、その値は true です。これはタイプにすることができます- ブール-これは_true_または_false_になります。 _true_に設定すると、ツールヒントはデフォルトの継続時間とデフォルトのイージングでフェードアウトします。 Number -ツールチップは、指定された期間とデフォルトのイージングでフェードアウトします。 String -ツールチップは、_ "slideUp"、 "fold" _などの指定された効果を使用して非表示になります。オブジェクト-可能な値は、effect、delay、duration、、および_easing_です。構文 `$(".selector").tooltip( { show: { effect: "blind", duration: 800 } } );`
7	tooltipClass このオプションは、警告やエラーなどのツールチップのツールチップウィジェットに追加できるクラスです。デフォルトでは、その値は null です。オプション-tooltipClass * このオプションは、警告やエラーなどのツールチップのツールチップウィジェットに追加できるクラスです。デフォルトでは、その値は null です。構文 `$(".selector").tooltip( { tooltipClass: "custom-tooltip-styling" } } );`
8	track このオプションを_true_に設定すると、ツールチップはマウスを追跡/追跡します。デフォルトでは、その値は false です。オプション-追跡このオプションを_true_に設定すると、ツールチップはマウスを追跡/追跡します。デフォルトでは、その値は false です。構文 `$(".selector").tooltip( { track: true } );`

Sr.No.	Action & Description
1	close() このアクションは、ツールチップを閉じます。このメソッドは引数を取りません。アクション-close（）このアクションは、ツールチップを閉じます。このメソッドは引数を取りません。構文 `$(".selector").tooltip("close");`
2	destroy() このアクションにより、ツールチップ機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-destroy（）このアクションにより、ツールチップ機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$(".selector").tooltip("destroy");`
3	disable() このアクションはツールチップを無効にします。このメソッドは引数を取りません。アクション-disable（）このアクションはツールチップを無効にします。このメソッドは引数を取りません。構文 `$(".selector").tooltip("disable");`
4	enable() このアクションにより、ツールチップがアクティブになります。このメソッドは引数を取りません。アクション-enable（）このアクションにより、ツールチップがアクティブになります。このメソッドは引数を取りません。構文 `$(".selector").tooltip("enable");`
5	open() このアクションは、プログラムでツールチップを開きます。このメソッドは引数を取りません。アクション-open（）このアクションは、プログラムでツールチップを開きます。このメソッドは引数を取りません。構文 `$(".selector").tooltip("open");`
6	option( optionName ) このアクションは、ツールチップの_optionName_に関連付けられた値を取得します。このメソッドは引数を取りません。アクション-option（optionName）このアクションは、ツールチップの_optionName_に関連付けられた値を取得します。このメソッドは引数を取りません。構文 `var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );`
7	option() このアクションは、現在のツールチップオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。アクション-option（）このアクションは、現在のツールチップオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。構文 `$(".selector").tooltip("option");`
8	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたツールヒントオプションの値を設定します。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたツールヒントオプションの値を設定します。構文 `$( ".selector" ).tooltip( "option", "disabled", true );`
9	option( options ) このアクションは、ツールチップの1つ以上のオプションを設定します。アクション-オプション（オプション）このアクションは、ツールチップの1つ以上のオプションを設定します。構文 `$( ".selector" ).tooltip( "option", { disabled: true } );`
10	widget() このアクションは、元の要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェット（）このアクションは、元の要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `$(".selector").tooltip("widget");`