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(); だけです。
動作サンプルはこちら
2011/02/04 11:51 | Leave a Comment
Trackback URL