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