最近はウェブ系アプリ中心、あとWindowsアプリちょっと
|
1 |
<div class="box" style="width:50px; height:50px; background:#ccc;">box</div> |
|
1 2 3 4 5 6 7 |
$('.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/
|
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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('.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'); } }); |
以下の例は、元オブジェクトは残したまま複製をドラッグする。
|
1 2 3 4 5 6 7 8 9 |
$('.box').draggable({ helper: 'clone', }); $('.target').droppable({ accept: '.box', drop: function(event, ui) { ui.draggable.clone().appendTo(this); //ドロップされたオブジェクトを複製して自分に追加 }, }); |
Droppable | jQuery UI
https://jqueryui.com/droppable/
|
1 |
<div id="box" style="width:100px; height:100px; background:green;"></div> |
|
1 |
$('#box').draggable(); |
オプションを追加してみる。
|
1 2 3 4 |
<div id="box" style="width:100px; height:100px; background:green;"> <div class="handle">Drag Here</div> <div class="cancel">Not Here</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
$('#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をダウンロードする。
jQuery UI
https://jqueryui.com/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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> |
HTTP(GET)通信でページを読み込む。
|
1 |
jQuery.get( url, data, callback ) |
|
1 2 3 4 5 |
<p> <input type="text" name="name" id="name"> <input type="button" value="Greet" id="greet"> </p> <div id="result"></div> |
|
1 2 3 4 5 6 7 |
$('#greet').click(function() { $.get('greet.php', { name: $('#name').val(), //データ }, function() { $('#result').html(data); //コールバック }) }); |
greet.php
|
1 |
echo htmlspecialchars("Hi! ". $_GET['name'], ENT_QUOTES, "utf-8"); |
JSON形式でやり取りする場合
|
1 2 3 4 5 6 |
$('#greet').click(function() { $.get('greet.php', { name: $('#name').val() //データ }, function(data) { $('#result').html(data.message + '(' + data.length + ')'); //コールバック }) |
greet.php
|
1 2 3 4 5 6 |
$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+/
HTMLを読み込み、DOMに挿入する。
|
1 |
load( url, data, callback ) |
|
1 2 |
<button>Read More</button> <div id="result"></div> |
|
1 2 3 |
$('button').click(function() { $('#result').load('more.html'); }); |
more.html
|
1 |
<div id="message">hello</div> |
動的に読み込んだmore.htmlの内容を操作するにはコールバック関数を使うこと。more.htmlは非同期に読み込まれるので注意。
誤り
|
1 2 3 4 |
$('button').click(function() { $('#result').load('more.html'); $('#message').css('color','red'); }); |
正解
|
1 2 3 4 5 |
$('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+/
ドキュメントが読み込まれた時点で存在する要素に対しては、セレクタで選択してイベント関係のメソッドを使ってイベントハンドラを設定できる。しかし、動的に作成された要素(ドキュメント読み込み時点では存在していない要素)に対しては、これは不可能。
動的に生成された要素を操作するには、ドキュメント読み込み時点で存在する親要素のonメソッドを使う。
|
1 |
$(親要素).on(イベント, 対象要素, コールバック関数); |
|
1 2 |
<p>Hello</p> <button>add</button> |
|
1 2 3 4 5 6 7 |
$('button').click(function() { var p = $('<p>').text('vanish!').addClass('vanish'); $(this).before(p); }); $('body').on('click','.vanish', function() { $(this).remove(); }); |
|
1 2 3 4 5 6 |
<input type="text" id="name"> <select id="members" name="members"> <option>Suzuki</option> <option>Yamada</option> <option>Sato</option> </select> |
フォーカスが当たったとき
|
1 2 3 |
$('#name').focus(function() { $(this).css('background','lightblue'); }); |
フォーカスが外れたとき
|
1 2 3 |
$('#name').blur(function() { $(this).css('background','white'); }); |
値が変わったとき
|
1 2 3 |
$('#members').change(function() { alert('changed'); }); |
|
1 |
<div id="box" style="width:100px; height:100px; background:yellow;"></div> |
クリック
|
1 2 3 |
$('#box').click(function() { alert('clicked'); }); |
マウスオーバー
|
1 2 3 |
$('#box').mouseover(function() { $(this).css('background','red'); }); |
マウスアウト
|
1 2 3 |
$('#box').mouseout(function() { $(this).css('background','yellow'); }); |
マウス移動
|
1 2 3 |
$('#box').mousemove(function(e) { $(this).text(e.pageX); }); |
メソッドチェインでも書ける
|
1 2 3 4 5 6 7 |
$('#box').mouseover(function() { $(this).css('background','red'); }).$('#box').mouseout(function() { $(this).css('background','yellow'); }).$('#box').mousemove(function(e) { $(this).text(e.pageX); }); |
|
1 |
<div id="box" style="width:100px; height:100px; background: blue;"></div> |
非表示
|
1 |
$('#box').hide(); |
表示
|
1 |
$('#box').show(); |
表示状態反転
|
1 |
$('#box').toggle(800); |
非表示(変化度合い指定)
|
1 |
$('#box').hide('slow'); |
非表示(変化時間指定)
|
1 |
$('#box').hide(800); //ミリ秒 |
フェードアウト
|
1 |
$('#box').fadeOut(800); |
フェードアウト(コールバック関数)
|
1 2 3 |
$('#box').fadeOut(800, function() { alert('gone'); //エフェクト終了時に呼ばれる }) |
フェードイン
|
1 |
$('#box').fadeIn(800); |