LotosLabo

プログラミング技術とか気になった情報を載せていきます

jQuery UIについて1

jQueryUIとは

jQueryを拡張したもので、主にUI(ユーザーインターフェース)に特化したものです。


開発環境

jQueryUIをやっていくに当たって以下の二つが必要になります。

jQueryプラグイン
・jQueryUIプラグイン
・jQueryUIテーマ

まずjQueryには前記事のURLを使います。
http://code.jquery.com/jquery-1.11.0.min.js



jQueryUIには
http://code.jquery.com/ui/ のページにある、javascirptプラグインcssを使っていきます。

プラグインjQuery UI 1.10.4のminifiedを使っていきます。
http://code.jquery.com/ui/1.10.4/jquery-ui.min.js


CSS(テーマ)は、Themesというところから選んでください。
テーマはThemeRollerというところでどのようなテーマがあるのか見れます。
http://jqueryui.com/themeroller/



今回は dot-luvというのを使用します。
http://code.jquery.com/ui/1.10.4/themes/dot-luv/jquery-ui.css



すべてを配置したのが以下になります。

例:

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>jQueryUI</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/dot-luv/jquery-ui.css">
</head>
<body>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
	<script>
	$(function(){
	
    });
	</script>
</body>
</html>



jQueryUIを始める

要素をドラッグ可能にする

Draggable

まず要素を作ります。緑色の四角形を作りました。

例:

<body>
 <div id="box" style="width:100px; height:100px; background:green;">
 </div>
</body>




これをドラッグできるようにします。


例:

<script>
 $(function() {
 $('#box').draggable();
 });
</script>



四角形をドラッグして動かせるようになります。


また、オプションとして色々なものがあります。

移動の方向を制限する

axis

例:

$function() {
      $('#box').draggable({
      axis: 'x'
     });
    });



移動方向をx方向だけにしました

ドラッグしている間の要素の透明度を指定

opacity

例:

$function() {
        $('#box').draggable({
        opacity:0.5
       });
   });



ドラッグしている間若干透明にさせます

特定の部分だけでドラッグできる

handle

例:

<body>
<div class="handle">drag here</div>
<script>
$function() {
        $('#box').draggable({
        handle: '.handle'
       });
   });
</script>
</body>



ボックスの中にテキストを配置し、そのテキストの上でのみドラッグできるようになった。

特定の部分だけドラッグできないようにする

cancel

例:

<body>
<div class="cancel">Not drag here</div>
<script>
$function() {
        $('#box').draggable({
        cancel: '.cancel'
       });
   });
</script>
</body>



この部分ではドラッグできない


ドラッグ中にイベントを発生

例:

$function() {
 $('#box').draggable({
     drag:function(){
     $(this).css('background','red');
   }
   });
 });