jQueryUIをはじめる方は必見、超簡単サンプル集~その1~

この記事は2013年7月22日に書かれたものです。内容が古い可能性がありますのでご注意ください。


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>

では、このドラッグ要素(A)を別の要素Bの上にドラッグした時に要素Bにドロップする「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です。

ページ:
1

2

3
  • このエントリーをはてなブックマークに追加

PAGE TOP