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>
→テキストボックスに入力した文字にマッチする候補が、自動候補表示されるはずです。
候補の選択肢はjavascriptの配列として準備しています。
３つめはbuttonです。
