端くれプログラマの備忘録 – ページ 90 – 最近はウェブ系アプリ中心、あとWindowsアプリちょっと

[jQuery UI] 基本メモ: Selectable

2015年3月22日2015年8月21日 @84kure

サンプルコード

<style>
    .ui-selected {
    background: red;
}
</style>

<style>

.ui-selected {

background: red;

}

</style>

<ul id="selectable">
    <li id="item-1">item1</li>
    <li id="item-2">item2</li>
    <li id="item-3">item3</li>
</ul>

</ul>

$('#selectable').selectable();

1	$('#selectable').selectable();

イベントを使って選択状態の変化をトレースする。

var selected = new Array();
$('#selectable').selectable({
    selected: function(event, ui) {
        if (selected.indexOf(ui.selected.id) === -1) {
            selected.push(ui.selected.id);
        }
        console.log(selected);
    },
    unselected: function(event, ui) {
        var id = ui.unselected.id;
        selected.splice(selected.indexOf(id),1);
        console.log(selected);
    }
})

var selected = new Array();

$('#selectable').selectable({

selected: function(event, ui) {

if (selected.indexOf(ui.selected.id) === -1) {

selected.push(ui.selected.id);

}

console.log(selected);

unselected: function(event, ui) {

var id = ui.unselected.id;

selected.splice(selected.indexOf(id),1);

console.log(selected);

}

})

参考サイト

Selectable | jQuery UI
https://jqueryui.com/selectable/

[jQuery UI] 基本メモ: Resizable

2015年3月21日2015年8月21日 @84kure

サンプルコード

<div class="box" style="width:50px; height:50px; background:#ccc;">box</div>

1	<div class="box" style="width:50px; height:50px; background:#ccc;">box</div>

$('.box').resizable({
    handles: 'all',
    aspectRatio: true, //縦横比維持
    stop: function(event, ui) {
        console.log(ui.size.width, ui.size.height);
    }
});

$('.box').resizable({

handles: 'all',

aspectRatio: true, //縦横比維持

stop: function(event, ui) {

console.log(ui.size.width, ui.size.height);

}

});

参考サイト

Resizable | jQuery UI
https://jqueryui.com/resizable/

[jQuery UI] 基本メモ: Droppable

2015年3月20日2015年8月21日 @84kure

サンプルコード

<div class="box" style="width:50px; height:50px; background:#ccc;">box</div>
<div class="target" style="width:100px; height:100px; background:pink;">target</div>

1 2	<div class="box" style="width:50px; height:50px; background:#ccc;">box</div> <div class="target" style="width:100px; height:100px; background:pink;">target</div>

$('.box').draggable();
$('.target').droppable({
    accept: '.box',
    hoverClass: 'ui-state-active', //ドロップ可能時のスタイル
    tolerance: 'fit', //全体が収まらなければドロップ可能にならない
    drop: function(event, ui) { //ドロップされた
        console.log('dropped');
    },
    over: function(event, ui) { //ドロップ可能状態になった
        console.log('over');
    },
    out: function(event, ui) { //ドロップ不可能状態になった
        console.log('out');
    }
});

$('.box').draggable();

$('.target').droppable({

accept: '.box',

hoverClass: 'ui-state-active', //ドロップ可能時のスタイル

tolerance: 'fit', //全体が収まらなければドロップ可能にならない

drop: function(event, ui) { //ドロップされた

console.log('dropped');

over: function(event, ui) { //ドロップ可能状態になった

console.log('over');

out: function(event, ui) { //ドロップ不可能状態になった

console.log('out');

}

});

以下の例は、元オブジェクトは残したまま複製をドラッグする。

$('.box').draggable({
    helper: 'clone',
});
$('.target').droppable({
    accept: '.box',
    drop: function(event, ui) {
        ui.draggable.clone().appendTo(this);　//ドロップされたオブジェクトを複製して自分に追加
    },
});

$('.box').draggable({

helper: 'clone',

});

$('.target').droppable({

accept: '.box',

drop: function(event, ui) {

ui.draggable.clone().appendTo(this);　//ドロップされたオブジェクトを複製して自分に追加

});

参考サイト

Droppable | jQuery UI
https://jqueryui.com/droppable/

[jQuery UI] 基本メモ: Draggable

2015年3月19日2015年8月21日 @84kure

サンプルコード

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

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

$('#box').draggable();

1	$('#box').draggable();

オプションを追加してみる。

<div id="box" style="width:100px; height:100px; background:green;">
　　　　<div class="handle">Drag Here</div>
　　　　<div class="cancel">Not Here</div>
</div>

</div>

$('#box').draggable({
　　　　axis: 'x', //ドラッグ方向を限定
　　　　opacity: 0.5, //ドラック中は半透明
　　　　handle: '.handle', //ドラッグ可能な場所
　　　　cancel: '.cancel', //ドラッグ不可能な場所
　　　　drag: function(event, ui) { //イベント
　　　　　　　　console.log(ui.position);
　　　　}
});

$('#box').draggable({

　　　　axis: 'x', //ドラッグ方向を限定

　　　　opacity: 0.5, //ドラック中は半透明

　　　　handle: '.handle', //ドラッグ可能な場所

　　　　cancel: '.cancel', //ドラッグ不可能な場所

　　　　drag: function(event, ui) { //イベント

　　　　　　　　console.log(ui.position);

　　　　}

});

参考サイト

Draggable | jQuery UI
https://jqueryui.com/draggable/

[jQuery UI] 基本メモ: 準備

2015年3月18日2015年8月21日 @84kure

本家サイトからjQuery UIをダウンロードする。

jQuery UI
https://jqueryui.com/

Stable v1.11.4 jQuery 1.6+
jquery-ui-1.11.4.zip
Stable (Themes) v1.11.4 jQuery 1.6+
jquery-ui-themes-1.11.4.zip

ひな形

<!doctype html>
<html lang="us">
<head>
　　　　<meta charset="utf-8">
　　　　<title>jQuery UI Example Page</title>
　　　　<link href="css/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body>
　　　　...
　　　　<script src="js/jquery.js"></script>
　　　　<script src="js/jquery-ui.js"></script>
</body>
</html>

<!doctype html>

<head>

　　　　<title>jQuery UI Example Page</title>

</head>

<body>

　　　　...

</body>

</html>

[jQuery] 基本メモ: jQuery.getメソッド

2015年3月17日2015年8月21日 @84kure

HTTP(GET)通信でページを読み込む。

jQuery.get( url, data, callback )

1	jQuery.get( url, data, callback )

サンプルコード

<p>
    <input type="text" name="name" id="name">
    <input type="button" value="Greet" id="greet">
</p>
<div id="result"></div>

<p>

</p>

$('#greet').click(function() {
    $.get('greet.php', {
        name: $('#name').val(), //データ
    }, function() {
        $('#result').html(data); //コールバック
    })
});

$('#greet').click(function() {

$.get('greet.php', {

name: $('#name').val(), //データ

}, function() {

$('#result').html(data); //コールバック

})

});

greet.php

echo htmlspecialchars("Hi! ". $_GET['name'], ENT_QUOTES, "utf-8");

1	echo htmlspecialchars("Hi! ". $_GET['name'], ENT_QUOTES, "utf-8");

JSON形式でやり取りする場合

$('#greet').click(function() {
    $.get('greet.php', {
        name: $('#name').val() //データ
    }, function(data) {
        $('#result').html(data.message + '(' + data.length + ')'); //コールバック
 })

$('#greet').click(function() {

$.get('greet.php', {

name: $('#name').val() //データ

}, function(data) {

$('#result').html(data.message + '(' + data.length + ')'); //コールバック

})

greet.php

$rs = array(
    'message' => htmlspecialchars("Hi! ". $_GET['name'], ENT_QUOTES, "utf-8"),
    'length' => strlen($_GET['name']),
);
header('Content-type: application/json; charset=utl-8');
echo json_encode($rs);

$rs = array(

'message' => htmlspecialchars("Hi! ". $_GET['name'], ENT_QUOTES, "utf-8"),

'length' => strlen($_GET['name']),

);

header('Content-type: application/json; charset=utl-8');

echo json_encode($rs);

参考サイト

jQuery.get( url, data, callback ) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/ajax/jQuery.get/+url,+data,+callback+/

[jQuery] 基本メモ: loadメソッド

2015年3月16日2015年8月21日 @84kure

HTMLを読み込み、DOMに挿入する。

load( url, data, callback )

1	load( url, data, callback )

サンプルコード

<button>Read More</button>
<div id="result"></div>

1 2	<button>Read More</button> <div id="result"></div>

$('button').click(function() {
 $('#result').load('more.html');
});

$('button').click(function() {

$('#result').load('more.html');

});

more.html

<div id="message">hello</div>

1	<div id="message">hello</div>

補足事項

動的に読み込んだmore.htmlの内容を操作するにはコールバック関数を使うこと。more.htmlは非同期に読み込まれるので注意。

誤り

$('button').click(function() {
    $('#result').load('more.html');
    $('#message').css('color','red');
});

$('button').click(function() {

$('#result').load('more.html');

$('#message').css('color','red');

});

正解

$('button').click(function() {
    $('#result').load('more.html', function() {
        $('#message').css('color','red');
    });
});

$('button').click(function() {

$('#result').load('more.html', function() {

$('#message').css('color','red');

});

参考サイト

load( url, data, callback ) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/ajax/load/+url,+data,+callback+/

[jQuery] 基本メモ: 動的に作成された要素にイベントを割り当てる

2015年3月15日2015年8月21日 @84kure

ドキュメントが読み込まれた時点で存在する要素に対しては、セレクタで選択してイベント関係のメソッドを使ってイベントハンドラを設定できる。しかし、動的に作成された要素(ドキュメント読み込み時点では存在していない要素)に対しては、これは不可能。

動的に生成された要素を操作するには、ドキュメント読み込み時点で存在する親要素のonメソッドを使う。

$(親要素).on(イベント, 対象要素, コールバック関数);

1	$(親要素).on(イベント, 対象要素, コールバック関数);

サンプルコード

<p>Hello</p>
<button>add</button>

1 2	<p>Hello</p> <button>add</button>

$('button').click(function() {
    var p = $('<p>').text('vanish!').addClass('vanish');
    $(this).before(p);
});
$('body').on('click','.vanish', function() {
    $(this).remove();
});

$('button').click(function() {

var p = $('<p>').text('vanish!').addClass('vanish');

$(this).before(p);

});

$('body').on('click','.vanish', function() {

$(this).remove();

});

[jQuery] 基本メモ: フォームで役立つメソッド

2015年3月14日2015年8月19日 @84kure

<input type="text" id="name">
<select id="members" name="members">
    <option>Suzuki</option>
    <option>Yamada</option>
    <option>Sato</option>
</select>

<option>Suzuki</option>

<option>Yamada</option>

</select>

フォーカスが当たったとき

$('#name').focus(function() {
    $(this).css('background','lightblue');
});

$('#name').focus(function() {

$(this).css('background','lightblue');

});

フォーカスが外れたとき

$('#name').blur(function() {
    $(this).css('background','white');
});

$('#name').blur(function() {

$(this).css('background','white');

});

値が変わったとき

$('#members').change(function() {
    alert('changed');
});

$('#members').change(function() {

alert('changed');

});

[jQuery] 基本メモ: マウスイベント

2015年3月13日2015年8月19日 @84kure

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

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

クリック

$('#box').click(function() {
    alert('clicked');
});

$('#box').click(function() {

alert('clicked');

});

マウスオーバー

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

$('#box').mouseover(function() {

$(this).css('background','red');

});

マウスアウト

$('#box').mouseout(function() {
    $(this).css('background','yellow');
});

$('#box').mouseout(function() {

$(this).css('background','yellow');

});

マウス移動

$('#box').mousemove(function(e) {
    $(this).text(e.pageX);
});

$('#box').mousemove(function(e) {

$(this).text(e.pageX);

});

メソッドチェインでも書ける

$('#box').mouseover(function() {
    $(this).css('background','red');
}).$('#box').mouseout(function() {
    $(this).css('background','yellow');
}).$('#box').mousemove(function(e) {
   $(this).text(e.pageX);
});

$('#box').mouseover(function() {

$(this).css('background','red');

}).$('#box').mouseout(function() {

$(this).css('background','yellow');

}).$('#box').mousemove(function(e) {

$(this).text(e.pageX);

});