プロになるためのjavascript入門読書会 レジュメ
TRANSCRIPT
第5章 jQuery UI
5.1 jQuery UI を構成するコンポーネント
UI Core
Core Widget(ファクトリ) Mouse Position
(位置調整)
Interactions(動きを表現)
Widgets Effects(アニメーション)
• Draggable• Droppable• Resizable• Selectable• Sortable
• Accordion• Autocomplete• Button• Dialog• Slider
• Fade• Shake• Drop
5.1 Interactionsの例
Resizable
$(function() { $( "#resizable" ).resizable();});
divを引っ張って、のばしたり、縮めたり
5.1 Interactionsの例
Draggable / Droppable
$(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } });});
5.1 Widgetsの例
Accordion
$(function() { $("#accordion").accordion();});
<div id="accordion"> <h3>Section 1</h3> <div> <p>...</p> </div> <h3>Section 2</h3></div>
5.1 Widgetsの例
Datepicker
<script>$(function() { $("#datepicker").datepicker();});</script>
<p>Date:<input type="text"id="datepicker"/></p>
5.1 Effects
http://jqueryui.com/demos/
(スライドよりも実物がわかりやすい)
PowerPointのアニメーションとだいたい同じ。
これまでの通り簡単に使えるのが何よりも特徴
(セレクタで要素を選択してメソッド呼び出し)
5.2 利用の準備
ダウンロード時に選んでサイズを小さくできる
5.2 インストール
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.10.2.custom.css" /><script src="js/jquery-1.9.1.js"></script><script src="js/jquery-ui.js"></script>
jQueryと同じように読み込むだけ
5.3 jQuery UI の基本動作
$(function() { $("#button").button();});
セレクタで指定してから、メソッド呼び出し。$関数の引数に渡すと、DOMロード終了時に
jQueryによりコールバックされます。
5.3.1 オプションの設定
$("#button").button({ disabled: true});
Buttonメソッドの引数にオブジェクト形式{name:value} で指定する。
5.3.1 オプションの取得
$("#button").button( “option”, ”disabled”);
第１引数に文字列optionを指定して、第2引数にオプションを指定する。
5.3.1 Widget生成後のオプション指定
$("#button").button( “option”, ”disabled”, false);
第３引数に値を設定することで、Widgetを生成した後にオプション値を設定可能
5.3.2 イベント
$("#draggable").draggable({ start: function(event, ui) {..}});
メソッドの引数に指定する方法
event : jQueryのイベントオブジェクト。 イベントが発生した座標、時刻などが取得可能。ui : 各部品により中身は異なる。 例えば、ドラッグ可能オブジェクトであれば、 ui.draggable.text()で、テキストを取得可能。
5.3.2 イベント
$("#draggable").on('dragstart', function(event, ui) {…});
onメソッドを利用する方法
イベント名はstart、イベントタイプはdragstart。onメソッド使用時にはイベントタイプを指定する。
5.3.3 部品の有効化・無効化
$("#draggable").draggable('enable');
$("#draggable").draggable('disable');
前述したdisabledオプションに加えて、メソッドの引数でも指定可能。
5.4 インタラクション
ドラッグ & ドロップjQueryUIコードの解説
5.4 インタラクション
まずはデモ
5.4 インタラクション
初期状態
ドラッグ & ドロップ する。
背景色の変更とメッセージ表示Drop here → Hello Jiro!
<body> <div id="taro" class="draggable">Taro</div> <div id="jiro" class="draggable">Jiro</div> <div id="target" class="droppable">Drop here</div></body>
$(function(){ $(".draggable").draggable(); $("#target").droppable({ drop: function(event, ui) { $(this).addClass( "ui-state-highlight" ) .html($('#msg').render( {msg: "Hello", text: ui.draggable.text()} )); },
<body> <div id="taro" class="draggable">Taro</div> <div id="jiro" class="draggable">Jiro</div> <div id="target" class="droppable">Drop here</div></body>
TaroとJiroに.draggable();
id=targetを.droppable
<body> <div id="taro" class="draggable">Taro</div> <div id="jiro" class="draggable">Jiro</div> <div id="target" class="droppable">Drop here</div></body>
$(function(){ $(".draggable").draggable(); $("#target").droppable({ drop: function(event, ui) { $(this).addClass( "ui-state-highlight" ) .html($('#msg').render( {msg: "Hello", text: ui.draggable.text()} )); },
dropイベントにスタイル変更とテキストの変更を追加。
<body> <div id="taro" class="draggable">Taro</div> <div id="jiro" class="draggable">Jiro</div> <div id="target" class="droppable">Drop here</div></body>
$(function(){ $(".draggable").draggable(); $("#target").droppable({ drop: function(event, ui) { $(this).addClass( "ui-state-highlight" ) .html($('#msg').render( {msg: "Hello", text: ui.draggable.text()} )); },
仕様2 : 追い出すとGood byeメッセージに変わる
Outイベントに、スタイルのremoveClassとメッセージ変更を追加
<div id="target" class="droppable">Drop here</div>
$(function(){ $(".draggable").draggable(); $("#target").droppable({ out: function( event, ui ) { $(this).removeClass( "ui-state-highlight" ) .html($('#msg').render( {msg: "Good bye", text: ui.draggable.text()})); }
<div id="target" class="droppable">Drop here</div>
$(function(){ $(".draggable").draggable(); $("#target").droppable({ out: function( event, ui ) { $(this).removeClass( "ui-state-highlight" ) .html($('#msg').render( {msg: "Good bye", text: ui.draggable.text()})); }
引数uiを通して、ドラッグされたオブジェクトのテキストを取得
『リサイズ』と『並べ替え』は本著者のGithub参照
5.4 インタラクション
5.5 ウィジェット(widgets)
アコーディオンjQueryUIコードの解説
5.5 ウィジェット
まずはデモ
5.5 ウィジェット
初期状態
クリックするとこうなる。
<body> <div id="accordion"> <h3><a href="#">First</a></h3> <div>This is first.</div> <h3><a href="#">Second</a></h3> <div>This is second.</div> <h3><a href="#">Third</a></h3> <div>This is third.</div> <h3><a href="#">Fourth</a></h3> <div>This is fourth.</div> </div></body>
$(function(){ $('#accordion').accordion();});
Divに対して.accordion()するだけ.
自動補完jQueryUIコードの解説
5.5 ウィジェット
まずはデモ
5.5 ウィジェット
一定の文字数入力すると候補が出る。
<body> <label for="fruit">Your favorite fruit: </label> <input id="fruit"/></body>
$(function(){ var fruits = [ 'Apple','Orange','Peach','Pear','Blueberry','Pineapple']; $('#fruit').autocomplete({ minLength: 2, source: function(req, res) { var result = []; for (var i = 0; i < fruits.length; i++) { if (fruits[i].indexOf(req.term) == 0) { result.push(fruits[i]); } } res(result); }});});
<body> <label for="fruit">Your favorite fruit: </label> <input id="fruit"/></body>
$(function(){ var fruits = [ 'Apple','Orange','Peach','Pear','Blueberry','Pineapple']; $('#fruit').autocomplete({ minLength: 2, source: function(req, res) { var result = []; for (var i = 0; i < fruits.length; i++) { if (fruits[i].indexOf(req.term) == 0) { result.push(fruits[i]); } } res(result); }});});
まずは、inputに.autocompleteする。
<body> <label for="fruit">Your favorite fruit: </label> <input id="fruit"/></body>
候補文字列を配列で用意する。http://../fruitsのように、jsonを返すAPIも指定可能$(function(){
var fruits = [ 'Apple','Orange','Peach','Pear','Blueberry','Pineapple']; $('#fruit').autocomplete({ minLength: 2, source: function(req, res) { var result = []; for (var i = 0; i < fruits.length; i++) { if (fruits[i].indexOf(req.term) == 0) { result.push(fruits[i]); } } res(result); }});});
<body> <label for="fruit">Your favorite fruit: </label> <input id="fruit"/></body>
$(function(){ var fruits = [ 'Apple','Orange','Peach','Pear','Blueberry','Pineapple']; $('#fruit').autocomplete({ minLength: 2, source: function(req, res) { var result = []; for (var i = 0; i < fruits.length; i++) { if (fruits[i].indexOf(req.term) == 0) { result.push(fruits[i]); } } res(result); }});});
何文字入力したら補完候補を表示するか指定。デフォルトは1文字。
<body> <label for="fruit">Your favorite fruit: </label> <input id="fruit"/></body>
文字補完のコールバック関数。一致する候補を探すロジックは自分で実装する。$(function(){
var fruits = [ 'Apple','Orange','Peach','Pear','Blueberry','Pineapple']; $('#fruit').autocomplete({ minLength: 2, source: function(req, res) { var result = []; for (var i = 0; i < fruits.length; i++) { if (fruits[i].indexOf(req.term) == 0) { result.push(fruits[i]); } } res(result); }});});
<body> <label for="fruit">Your favorite fruit: </label> <input id="fruit"/></body>
第１引数のtermプロパティからフォームの入力値が取得できる。
$(function(){ var fruits = [ 'Apple','Orange','Peach','Pear','Blueberry','Pineapple']; $('#fruit').autocomplete({ minLength: 2, source: function(req, res) { var result = []; for (var i = 0; i < fruits.length; i++) { if (fruits[i].indexOf(req.term) == 0) { result.push(fruits[i]); } } res(result); }});});
<body> <label for="fruit">Your favorite fruit: </label> <input id="fruit"/></body>
候補リストfruitsから入力値req.termと一致する文字列を抽出し、resultに格納。$(function(){
var fruits = [ 'Apple','Orange','Peach','Pear','Blueberry','Pineapple']; $('#fruit').autocomplete({ minLength: 2, source: function(req, res) { var result = []; for (var i = 0; i < fruits.length; i++) { if (fruits[i].indexOf(req.term) == 0) { result.push(fruits[i]); } } res(result); }});});
<body> <label for="fruit">Your favorite fruit: </label> <input id="fruit"/></body>
第２引数resに、抽出した候補配列を渡すと、補完候補として表示される。$(function(){
var fruits = [ 'Apple','Orange','Peach','Pear','Blueberry','Pineapple']; $('#fruit').autocomplete({ minLength: 2, source: function(req, res) { var result = []; for (var i = 0; i < fruits.length; i++) { if (fruits[i].indexOf(req.term) == 0) { result.push(fruits[i]); } } res(result); }});});
一番良く使われる日付入力の実装
5.5 ウィジェット
フォームをクリックするとカレンダー。
<p>Date: <input type="text" id="datepicker" /></p>
$(function() { $( "#datepicker" ).datepicker();});
Inputに対して、.datepicker()を呼び出すだけ。
datepickerは便利なので、オプションも紹介します。
デフォルトはmm/dd/yyフォーマット
yy/mm/dd形式に変更したい。
<p>Date: <input type="text" id="datepicker" /></p>
$(function() { $( "#datepicker" ).datepicker({ dateFormat: 'yy/mm/dd', firstDay:1 });}); datepickerの引数オブジェクトに
firstDayプロパティを設定する。0が日曜日で１が月曜日。デフォルトは0(日曜日)。
デフォルトは日曜始まり 月曜始まりに変更したい
<p>Date: <input type="text" id="datepicker" /></p>
$(function() { $( "#datepicker" ).datepicker({ dateFormat: 'yy/mm/dd', firstDay:1 });}); dateFormatプロパティを設定する。
例ではyy/mm/ddを指定。
デフォルトは英語表記 日本語に変更したい
<script src="jquery-1.9.1.js"></script><script src="ui/1.10.3/jquery-ui.js"></script><script src="ui/1.10.3/i18n/jquery-ui-i18n.min.js"></script>
$(function() { $.datepicker.setDefaults($.datepicker.regional[ "ja" ] ); $( "#datepicker" ).datepicker();});
ローカライズされたjquery-uiを追加でロードする。
SetDefaultsメソッドにより、対象の言語を事前に指定する。
$(function() { // $.datepicker.setDefaults($.datepicker.regional[ "ja" ] ); $( "#datepicker" ).datepicker();});
setDefaultsの指定を忘れると、うまく日本語がでないので注意
漢数字で出てくる
5.6 効果(Effects)
animeteメソッド時間をかけてCSS属性を変化させる。
5.6 効果
5.6 効果
まずはデモ
5.6 効果
divが徐々に大きくなり、変色する。
<div id="target" style="background-color: red; height: 100px; width: 100px"></div><button id="button" type="button">start</button>
$(function() { $("#button").click(function() { $("#target").animate({ backgroundColor: "#00ff00", width: 200, height : 200 }, 2000 ); });});
<div id="target" style="background-color: red; height: 100px; width: 100px"></div><button id="button" type="button">start</button>
$(function() { $("#button").click(function() { $("#target").animate({ backgroundColor: "#00ff00", width: 200, height : 200 }, 2000 ); });});
デフォルトのスタイルは・背景色は赤・縦横100pxずつ
<div id="target" style="background-color: red; height: 100px; width: 100px"></div><button id="button" type="button">start</button>
$(function() { $("#button").click(function() { $("#target").animate({ backgroundColor: "#00ff00", width: 200, height : 200 }, 2000 ); });});
ボタンのイベントハンドラに、divのアニメーションメソッドをコールバック指定。
<div id="target" style="background-color: red; height: 100px; width: 100px"></div><button id="button" type="button">start</button>
$(function() { $("#button").click(function() { $("#target").animate({ backgroundColor: "#00ff00", width: 200, height : 200 }, 2000 ); });});
・背景色は緑・縦横は200px・2000ミリ秒かけて変化させる
シンタックスエラーとどう戦えば良いのか。
余談 : お世話になったツール
余談 : お世話になったツール
$(function() { $("#button").click(function() { $("#target").animate({ backgroundColor: "#00ff00", width: 200, height : 200 }, 2000 ); })});
問. シンタックスエラーはどこか
余談 : お世話になったツール
$(function() { $("#button").click(function() { $("#target").animate({ backgroundColor: "#00ff00", width: 200, height : 200 }, 2000 ); });});
答. clickメソッドの終了セミコロンがない
私、30分以上はまりました...
余談 : お世話になったツール
http://jshint.com
はやくJSHintを使えばよかったと後悔しています
具体的なご指摘を頂けました。
Line9: セミコロンがありません。
Web直接入力以外にも、Vim/Emacs/Subline Text2Gitコミット前チェックツールなど、色々対応しています。
ユーティリティ独自ウィジェットは次回紹介予定。