jQuery UIのウィジェット関連を試す

categories: javascript

今回はjQuery UIのウィジェット関連を試してみたいと思います。では早速

アコーディオン

各セクションをクリックするとびろーんと開いて本文を表示させる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.9.custom.css" />
		<script type="text/javascript" src="jquery-1.5.js"></script>
		<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
		<script type="text/javascript">
			$(function () {
				$('#accordion').accordion({ collapsible: true });
			});
		</script>
		<title>jQuery UI Accordion</title>
	</head>
	<body>
		<dl id="accordion">
			<dt><a href="#">Section 1</a></dt>
			<dd><p>text1 text1 text1</p></dd>
			<dt><a href="#">Section 2</a></dt>
			<dd><p>text2 text2 text2</p></dd>
			<dt><a href="#">Section 3</a></dt>
			<dd><p>text3 text3 text3</p></dd>
		</dl>
	</body>
</html>

$(‘セレクタ’).accordion(); とするだけ。引数に { collapsible: true } を渡すとすべて閉じられるようになる。上の例では定義リストで書いたけどブロック要素なら大丈夫なようだ。

例えばこれでも可

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div><p>text1 text1 text1</p></div>
	<h3><a href="#">Section 2</a></h3>
	<div><p>text2 text2 text2</p></div>
	<h3><a href="#">Section 3</a></h3>
	<div><p>text3 text3 text3</p></div>
</div>

動作サンプルはこちら

タブ

タブ切り替えで本文表示を変える。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.9.custom.css" />
		<script type="text/javascript" src="jquery-1.5.js"></script>
		<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
		<script type="text/javascript">
			$(function () {
				$('#tabs').tabs();
			});
		</script>
		<title>jQuery UI Tabs</title>
	</head>
	<body>
		<div id="tabs">
			<ul>
				<li><a href="#tab1">Tab 1</a></li>
				<li><a href="#tab2">Tab 2</a></li>
				<li><a href="#tab3">Tab 3</a></li>
			</ul>
			<div id="tab1"><p>text1 text1 text1</p></div>
			<div id="tab2"><p>text2 text2 text2</p></div>
			<div id="tab3"><p>text3 text3 text3</p></div>
		</div>
	</body>
</html>

リストでメニューを作って本文へはアンカーで飛ばすだけ。

動作サンプルはこちら

カレンダーから日付入力

テキストボックスにフォーカスが当たったらカレンダーを表示して日付入力を支援。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.9.custom.css" />
		<script type="text/javascript" src="jquery-1.5.js"></script>
		<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
		<script type="text/javascript">
			$(function () {
				$('#datepicker').datepicker();
			});
		</script>
		<title>jQuery UI Datepicker</title>
	</head>
	<body>
		<div>
			<p>Date: <input type="text" id="datepicker"></p>
		</div>
	</body>
</html>

テキストボックスに対して $(‘セレクタ’).datepicker(); するだけです。

日本語にしたい場合は次のコードを追記しておけばOK。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

動作サンプルはこちら(こちらは日本語カレンダーにしました)

jQueryだと簡単に出来ますねー。

tags: ,

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。コメントは承認制です。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Trackback URL