jquery ui サンプル集

jQuery UIは、インタラクティブなWebアプリケーションを開発するための豊富なUIコンポーネントを提供するライブラリです。デモサイトでは、さまざまなウィジェット、エフェクト、テーマを活用したサンプルを通じて、その使い方を学ぶことができます。

1. インタラクション

インタラクションは、マウス操作に基づいた基本的な動作を任意の要素に追加する機能です。わずか数行のコードで、並べ替え可能なリスト、サイズ変更可能な要素、ドラッグ＆ドロップなどの動作を実装できます。また、インタラクションはより複雑なウィジェットやアプリケーションの構築ブロックとしても活用できます。

1.1 Draggable（ドラッグ可能）

要素をドラッグして移動できるようにします。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; border: 1px solid black; }
  </style>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>ドラッグしてください</p>
</div>
 
</body>
</html>

1.2 Droppable（ドロップ可能）

ドラッグされた要素を受け入れることができるようにします。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "ドロップされました！" );
      }
    });
  } );
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>ドラッグ</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>ここにドロップ</p>
</div>
 
</body>
</html>

1.3 Resizable（サイズ変更可能）

要素のサイズを変更できるようにします。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Resizable デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $( function() {
    $( "#resizable" ).resizable();
  } );
  </script>
</head>
<body>
 
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">サイズ変更可能</h3>
</div>
 
</body>
</html>

1.4 Selectable（選択可能）

要素をマウスで選択できるようにします。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Selectable デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script>
  $( function() {
    $( "#selectable" ).selectable({
      stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
          var index = $( "#selectable li" ).index( this );
          result.append( " #" + ( index + 1 ) );
        });
      }
    });
  } );
  </script>
</head>
<body>
 
<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
</ol>
 
<p id="feedback">
  <span>選択された項目:</span> <span id="select-result"></span>
</p>
 
</body>
</html>

1.5 Sortable（並べ替え可能）

要素をドラッグ＆ドロップで並べ替えできるようにします。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 
</body>
</html>

2. ウィジェット

ウィジェットは、デスクトップアプリケーションの豊富な機能をWebにもたらす、フル機能のUIコントロールです。すべてのウィジェットは、動作をカスタマイズするための拡張ポイントと、完全なテーマサポートを備えた堅牢なコアを提供します。

2.1 Accordion（アコーディオン）

複数のコンテンツを折りたたんで表示するパネルです。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
</head>
<body>
 
<h2>セクション 1</h2>
<div id="accordion">
  <h3>セクション 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, velit. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
    </p>
  </div>
  <h3>セクション 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In vel mi sit amet augue congue elementum. Morbi in lacus ac sapien tincidunt tincidunt. Curabitur odio risus, pretium non, consequat nec, rutrum non, eros. Praesent leo. Sed fringilla mauris sit amet tortor. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
    </p>
  </div>
  <h3>セクション 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis massa felis id est. Donec mattis pretium massa. Aenean interdum nibh ac orci. Vestibulum eu odio.
    </p>
  </div>
</div>
 
 
</body>
</html>

2.2 Autocomplete（オートコンプリート）

入力中に候補を表示する入力欄です。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">プログラミング言語: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

2.3 Button（ボタン）

スタイリッシュなボタンを作成できます。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "button" ).button();
  } );
  </script>
</head>
<body>
 
<button>ボタン</button>
 
 
</body>
</html>

2.4 Checkboxradio（チェックボックス/ラジオボタン）

チェックボックスとラジオボタンをスタイリッシュにカスタマイズできます。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Checkboxradio デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#check" ).checkboxradio();
    $( "#radio" ).checkboxradio();
  } );
  </script>
</head>
<body>
 
<label for="check">チェックボックス:</label>
<input type="checkbox" id="check" name="check">
<label for="radio-1">ラジオボタン 1:</label>
<input type="radio" id="radio-1" name="radio">
<label for="radio-2">ラジオボタン 2:</label>
<input type="radio" id="radio-2" name="radio">
 
 
</body>
</html>

2.5 Controlgroup（コントロールグループ）

関連するコントロールをグループ化して表示できます。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Controlgroup デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( ".controlgroup" ).controlgroup();
  } );
  </script>
</head>
<body>
 
<div class="controlgroup">
  <label for="car-type">車種:</label>
  <select name="car-type" id="car-type">
    <option value="standard">標準</option>
    <option value="turbo">ターボ</option>
    <option value="diesel">ディーゼル</option>
  </select>
</div>
 
 
</body>
</html>

2.6 Datepicker（日付ピッカー）

カレンダーから日付を選択できるようにします。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>日付: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

2.7 Dialog（ダイアログ）

モーダルウィンドウを表示できます。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
 
<div id="dialog" title="基本的なダイアログ">
  <p>これはダイアログボックスです。ダイアログボックスを使用して、ユーザーに重要な情報を表示したり、ユーザーからの入力を要求したりすることができます。</p>
</div>
 
 
</body>
</html>

2.8 Menu（メニュー）

ナビゲーションメニューを作成できます。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Menu デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#menu" ).menu();
  } );
  </script>
</head>
<body>
 
<ul id="menu">
  <li><a href="#">ファイル</a>
    <ul>
      <li><a href="#">新規作成</a></li>
      <li><a href="#">開く</a></li>
      <li><a href="#">保存</a></li>
    </ul>
  </li>
  <li><a href="#">編集</a>
    <ul>
      <li><a href="#">コピー</a></li>
      <li><a href="#">貼り付け</a></li>
    </ul>
  </li>
  <li><a href="#">表示</a>
    <ul>
      <li><a href="#">ズームイン</a></li>
      <li><a href="#">ズームアウト</a></li>
    </ul>
  </li>
</ul>
 
 
</body>
</html>

2.9 Progressbar（プログレスバー）

処理の進捗状況を表示するバーです。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Progressbar デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#progressbar" ).progressbar({
      value: 37
    });
  } );
  </script>
</head>
<body>
 
<div id="progressbar"></div>
 
 
</body>
</html>

2.10 Selectmenu（セレクトメニュー）

スタイリッシュなセレクトボックスを作成できます。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Selectmenu デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#speed" ).selectmenu();
    $( "#files" ).selectmenu();
    $( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );
    $( "#salutation" ).selectmenu();
  } );
  </script>
  <style>
  .overflow {
    height: 200px;
  }
  </style>
</head>
<body>
 
<label for="speed">速度:</label>
<select name="speed" id="speed">
  <option>遅い</option>
  <option>普通</option>
  <option selected="selected">速い</option>
</select>
 
<label for="files">ファイル:</label>
<select name="files" id="files">
  <optgroup label="画像">
    <option>jpg.gif</option>
    <option>png.gif</option>
    <option>svg.gif</option>
  </optgroup>
  <optgroup label="スクリプト">
    <option>js.gif</option>
    <option>php.gif</option>
    <option>ruby.gif</option>
  </optgroup>
  <optgroup label="その他">
    <option>misc.gif</option>
    <option>other.gif</option>
  </optgroup>
</select>
 
<label for="number">数字:</label>
<select name="number" id="number">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
</select>
 
<label for="salutation">敬称:</label>
<select name="salutation" id="salutation">
  <option>Mr.</option>
  <option>Mrs.</option>
  <option>Dr.</option>
  <option>Prof.</option>
  <option>Other</option>
</select>
 
 
</body>
</html>

2.11 Slider（スライダー）

値をドラッグして調整できるスライダーです。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider" ).slider({
      range: "max",
      min: 0,
      max: 100,
      value: 2,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider" ).slider( "value" ) );
  } );
  </script>
</head>
<body>
 
<label for="amount">音量:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider"></div>
 
 
</body>
</html>

2.12 Spinner（スピナー）

数値を上下ボタンで調整できる入力欄です。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Spinner デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#spinner" ).spinner();
  } );
  </script>
</head>
<body>
 
<label for="spinner">数値:</label>
<input id="spinner" name="value">
 
 
</body>
</html>

2.13 Tabs（タブ）

複数のコンテンツを切り替えて表示するタブパネルです。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">タブ 1</a></li>
    <li><a href="#tabs-2">タブ 2</a></li>
    <li><a href="#tabs-3">タブ 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>タブ 1 のコンテンツです。</p>
  </div>
  <div id="tabs-2">
    <p>タブ 2 のコンテンツです。</p>
  </div>
  <div id="tabs-3">
    <p>タブ 3 のコンテンツです。</p>
  </div>
</div>
 
 
</body>
</html>

2.14 Tooltip（ツールチップ）

要素にマウスオーバーしたときに説明を表示するツールチップです。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( document ).tooltip();
  } );
  </script>
</head>
<body>
 
<p>
  これは<a href="#" title="これはツールチップです。">リンク</a>です。マウスオーバーしてツールチップを確認してください。
</p>
 
 
</body>
</html>

3. エフェクト

エフェクトは、色やクラスのアニメーション、および追加のイージングのサポートを提供します。要素を表示/非表示にする場合や、視覚的な魅力を追加する場合に、さまざまなカスタムエフェクトを使用できます。

3.1 Effect（エフェクト）

基本的なエフェクトを提供します。

3.2 Visibility（表示/非表示）

要素の表示/非表示をアニメーションで制御します。

Show（表示）: 要素を表示するアニメーションです。

Hide（非表示）: 要素を非表示にするアニメーションです。

Toggle（切り替え）: 要素の表示/非表示を切り替えるアニメーションです。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Show デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
  .toggler { width: 500px; height: 200px; position: relative; }
  #button { padding: .5em 1em; text-decoration: none; }
  #effect { width: 250px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
  #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>
  <script>
  $( function() {
    var effect = "blind";
    var options = { direction: "right" };
    var duration = 500;

    $( "#button" ).on( "click", function() {
      $( "#effect" ).toggle( effect, options, duration );
    });
  } );
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">エフェクト</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, malesuada porttitor, tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra gravida nulla. Nulla facilisi. Donec lacinia, felis non sagittis feugiat, turpis velit euismod orci, eu rutrum lib
ero quam molestie at, velit.
    </p>
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">アニメーションの切り替え</button>
 
 
</body>
</html>

3.3 Class Animation（クラスアニメーション）

クラスの追加/削除によるアニメーションを制御します。

Add Class（クラスの追加）: クラスを追加するアニメーションです。

Remove Class（クラスの削除）: クラスを削除するアニメーションです。

Toggle Class（クラスの切り替え）: クラスの追加/削除を切り替えるアニメーションです。

Switch Class（クラスの切り替え）: 既存のクラスを別のクラスに切り替えるアニメーションです。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Add Class デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
  .toggler { width: 500px; height: 200px; position: relative; }
  #button { padding: .5em 1em; text-decoration: none; }
  #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
  #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  .newClass { background: #eee; }
  </style>
  <script>
  $( function() {
    var state = true;
    $( "#button" ).on( "click", function() {
      if ( state ) {
        $( "#effect" ).addClass( "newClass", 1000 );
      } else {
        $( "#effect" ).removeClass( "newClass", 1000 );
      }
      state = !state;
    });
  } );
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">クラスの切り替え</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, malesuada porttitor, tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra gravida nulla. Nulla facilisi. Donec lacinia, felis non sagittis feugiat, turpis velit euismod orci, eu rutrum lib
      ero quam molestie at, velit.
    </p>
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">アニメーションの切り替え</button>
 
 
</body>
</html>

3.4 Color Animation（カラーアニメーション）

色のアニメーションを制御します。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Animate デモ</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
  .toggler { width: 500px; height: 200px; position: relative; }
  #button { padding: .5em 1em; text-decoration: none; }
  #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
  #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>
  <script>
  $( function() {
    var state = true;
    $( "#button" ).on( "click", function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "red",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      state = !state;
    });
  } );
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">アニメーション</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, malesuada porttitor, tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra gravida nulla. Nulla facilisi. Donec lacinia, felis non sagittis feugiat, turpis velit euismod orci, eu rutrum lib
      ero quam molestie at, velit.
    </p>
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">アニメーションの切り替え</button>
 
 
</body>
</html>

4. ユーティリティ

ユーティリティは、jQuery UI がインタラクションやウィジェットを構築するために使用する関数群です。これらの関数は、開発者が jQuery UI を拡張したり、独自のカスタム UI コンポーネントを作成したりする際に役立ちます。

例：

$.ui.position() : 要素の位置を計算するための関数

$.ui.keyCode : キーボードイベントのキーコード定数

$.ui.plugin : ウィジェットを作成するための関数

jQuery UI は、Web アプリケーションにインタラクティブで洗練された UI を簡単に追加するための強力なツールです。インタラクション、ウィジェット、エフェクト、ユーティリティを組み合わせることで、ユーザーエクスペリエンスを向上させることができます。

基本的なウィジェットの紹介

ボタン、ダイアログ、日付ピッカーなど、jQuery UIの基本的なウィジェットを使ったデモを紹介します。

ウィジェット名	説明
ボタン	ユーザーインターフェースのボタンを作成します。
ダイアログ	モーダルまたは非モーダルなダイアログを表示します。
日付ピッカー	日付を選択するためのインターフェースを提供します。

ドラッグ＆ドロップ機能

要素のドラッグ＆ドロップ機能を実装したサンプルを通じて、使い方を学びましょう。

        <div id="draggable">ドラッグしてね</div>
        <div id="droppable">ここにドロップ</div>

        <script>
            $( "#draggable" ).draggable();
            $( "#droppable" ).droppable({
                drop: function( event, ui ) {
                    $( this ).addClass( "ui-state-highlight" )
                        .find( "p" )
                        .html( "ドロップされた！" );
                }
            });
        </script>

アニメーションとエフェクト

クールなアニメーション効果を追加する方法を学び、ユーザー体験を向上させるサンプルを紹介します。

        <div id="effect">エフェクトを適用する要素</div>

        <script>
            $( "#effect" ).hide().fadeIn( 2000 );
        </script>

カスタマイズ可能なテーマ

jQuery UIのテーマをカスタマイズする方法について説明し、独自のスタイルを作成するためのサンプルを提供します。

        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
        <link rel="stylesheet" href="custom-theme.css">

参考文献

よくある質問（FAQ）

1. jQuery UIはどのようにインストールしますか？

jQuery UIは、CDNから直接リンクするか、npmを使用してインストールできます。

2. jQuery UIのウィジェットはどこで確認できますか？

様々なウィジェットは、jQuery UIの公式サイトで確認できます。

3. jQuery UIで作成したカスタムテーマはどこで使用できますか？

作成したカスタムテーマは、プロジェクト内でCSSファイルとして読み込むことで使用できます。

その他の参考記事:jquery ui slide menu