jQuery UIのインタラクション機能を試す

categories: javascript

前回のドラッグ&ドロップに続いて、今回もインタラクション機能を試してみます。

リサイズ

id=”box”のサイズ変更を出来るようにする。

<!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="resize.css" />
		<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 () {
				$('#box').resizable();
			});
		</script>
		<title>jQuery UI Resizable</title>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
@charset "utf-8";

#box {
	width: 200px;
	height: 200px;
	border: 1px solid #000;
}

jQuery UIのCSSも読み込まないとダメみたいですね。(今回使ったのはjquery-ui-1.8.9.custom.css)
あとjQuery UIに含まれるイメージファイルも一緒に置いておかないとダメです。(imagesフォルダ)

$(‘セレクタ’).resizable(); だけで出来ちゃいます。

動作サンプルはこちら

セレクト

リストの選択したアイテムの背景色を灰色(#ccc)にする。

<!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="select.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 () {
				$('#list').selectable();
			});
		</script>
		<title>jQuery UI Selectable</title>
	</head>
	<body>
		<ul id="list">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</body>
</html>
@charset "utf-8";

#list {
	list-style-type: none;
}

.ui-selectee {
	width: 100px;
	padding: 5px;
	margin: 5px;
	border: 1px solid #000;
}

.ui-selected {
	background-color: #ccc;
}

リストに対して $(‘セレクタ’).selectable(); すると、liにclass=”ui-selectee”、選択されるとclass=”ui-selected”が付加されるので、それぞれスタイルを設定すればOK。

動作サンプルはこちら

ソート

リストをドラッグ&ドロップで並べ替えられるようにする。

<!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="sort.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 () {
				$('#list').sortable();
			});
		</script>
		<title>jQuery UI Sortable</title>
	</head>
	<body>
		<ul id="list">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</body>
</html>
@charset "utf-8";

#list {
	list-style-type: none;
}

li {
	width: 100px;
	padding: 5px;
	margin: 5px;
	border: 1px solid #000;
}

$(‘セレクタ’).sortable(); だけです。

動作サンプルはこちら

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