3.jQueryUIのサンプルスクリプト
それではjQueryUIのサンプルをいくつか作成してみましょう。
全サンプルに共通する部分としてhead内で読みこむcssとjsファイルをまとめておきます。
<link href="/[PATH TO jQueryUI CSS]/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css"> <script src="/[PATH TO jQuery JS]/jquery-1.9.1.js" type="text/javascript"></script> <script src="/[PATH TO jQueryUI JS]/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
※jquery-1.9.1.jsをjquery-ui-1.10.3.custom.min.jsより先に記述しておく必要があるので、注意しましょう。
ではサンプルプログラムを実装していきます。
今回は、インタラクティブな操作を行う機能「Draggable」「Droppable」「Resizable」「Selectable」「Sortable」のサンプルを作成していきます。
まずは、表示要素をドラッグ操作できる「Draggable」。
sample1.html「Draggable」
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" src="./jquery-ui-1.10.3.custom/css/ui-lightness/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 type="text/javascript">$(function () { $("#draggable").draggable();});</script>
</head>
<body><div id="draggable" style = "width:100px; height:100px;background-color:red;" class="ui-widget-content"></div></body>
</html>
では、このドラッグ要素(Ａ)を別の要素Ｂの上にドラッグした時に要素Ｂにドロップする「droppable」機能を実装してみましょう。
sample2.html「Droppable」
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" src="./jquery-ui-1.10.3.custom/css/ui-lightness/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 type="text/javascript">
$(function () {
$("#draggable").draggable();
$('#droppable').droppable({
drop:function(event,ui){$(this).html('drop success!');}
});
});
</script>
</head>
<body>
<div id="draggable" style = "width:100px; height:100px;background-color:red;" class="ui-widget-content"></div>
<div id="droppable" style = "width:200px; height:200px;background-color:blue;" class="ui-widget-content"><p>drop here</p></div>
</body>
</html>
sample1の7行目を以下のように変更し、且つドロップを受けるボックスを用意しています。
<script type="text/javascript">
$(function () {
$("#draggable").draggable();
$('#droppable').droppable({
drop:function(event,ui){$(this).html('drop success!');}
});
});
</script>
赤いボックスを青いボックスにドラッグ＆ドロップしたタイミングで青いボックスのメッセージが変わればOKです。
次にボックスのリサイズを行う「Resizable」を機能を実装してみます。
sample3.html「Resizable」
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Default functionality</title>
<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() { $("#resizable").resizable; });</script>
</head>
<body>
<textarea id="resizable" rows="5" cols="20">resizable area</textarea>
</body>
</html>
リサイズ可能なテキストエリアを実装してみました。
エリアの右下をクリックしてエリアがリサイズできればOKです。
