jQueryUIをはじめる方は必見、超簡単サンプル集～その２～

前回に引き続き、jQueryUIのサンプルスクリプトを作成していきます。
今回はウィジェット編(前半戦)です。

・jQuery及びjQueryUIのバージョンは次の通りです。
jQuery ：1.9.1
jQueryUI：1.10.3

・そして、今回作成するのは次の6個。
Accordion,Autocomplete,Button,Datepicker,Dialog,Menu

早速一つずつサンプルを見ていきましょう。
まずは、アコーディオンのサンプルです。

1.Accordionのサンプルスクリプト

メニューで定番の機能ですね。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <link   type="text/css" rel="stylesheet" src="./jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <script>$(function(){$( "#accordion" ).accordion();});</script>
  <style type="text/css">
    h3{font-family:"メイリオ"; text-align:left;}
    .section{font-size:12px; border-style:solid; border-width:1px; width:200px; margin:10px; padding:5px;}
    #accordion{text-align:center;}
  </style>
</head>
<body>
<div id="accordion">
    <h3>Section 1</h3>
    <div class="section">１つ目の情報が入った要素です。<br>１つ目の情報が入った要素です。<br>１つ目の情報が入った要素です。</div>
    <h3>Section 2</h3>
    <div class="section">２つ目の情報が入った要素です。<br>２つ目の情報が入った要素です。<br>２つ目の情報が入った要素です。<br></div>
    <h3>Section 3</h3>
    <div class="section">３つ目の情報が入った要素です。<br>３つ目の情報が入った要素です。<br>３つ目の情報が入った要素です。<br></div>
    <h3>Section 4</h3>
    <div class="section">４つ目の情報が入った要素です。<br>４つ目の情報が入った要素です。<br>４つ目の情報が入った要素です。<br></div>
</div>
</body>
</html>

→idを「accordion」にしたdivタグ内のh3タグが、個々のアコーディオン見出し、その後のdivタグが内容になります。
Section1～4をクリックすると、中の要素が表示されます。少しスタイルを整えています。

次はAutoCompleteを実装してみましょう。

2.AutoCompleteのサンプルスクリプト

検索ボックスについていると便利ですね。

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <link   rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <link   type="text/css" rel="stylesheet" src="./jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <script>
  $(function() {
    var availableTags = ["シュークリーム","ミルクレープ","チョコ＆クリーム","苺大福","chocolate","cookie"];
    $( "#tags" ).autocomplete({ source: availableTags });
  });
  </script>
</head>
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>
</body>
</html>