プロになるためのJavaScript入門読書会レジュメ

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オプションに加えて、
メソッドの引数でも指定可能。

ドラッグ & ドロップ
jQueryUIコードの解説
5.4 インタラクション

まずはデモ

ドラッグ & ドロップする。

背景色の変更とメッセージ表示
Drop here → Hello Jiro!

$(function(){
$(".draggable").draggable();
$("#target").droppable({
drop: function(event, ui) {
$(this).addClass( "ui-state-highlight" )
.html($('#msg').render(
{msg: "Hello", text: ui.draggable.text()}
));
},
<body>
</body>
TaroとJiroに.draggable();

id=targetを.droppable
<body>
</body>
$(function(){
));
},

dropイベントにスタイル変更と
テキストの変更を追加。
<body>
</body>
$(function(){
));
},

仕様2 : 追い出すとGood byeメッセージに変わる

Outイベントに、
スタイルのremoveClassと
メッセージ変更を追加
$(function(){
out: function( event, ui ) {
$(this).removeClass( "ui-state-highlight" )
{msg: "Good bye", text: ui.draggable.text()}));
}

$(function(){
out: function( event, ui ) {
$(this).removeClass( "ui-state-highlight" )
{msg: "Good bye", text: ui.draggable.text()}));
}
引数uiを通して、ドラッグされた
オブジェクトのテキストを取得

『リサイズ』と『並べ替え』は
本著者のGithub参照

5.5 ウィジェット(widgets)

アコーディオン
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()するだけ.

自動補完

一定の文字数入力すると候補が出る。

<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>
<input id="fruit"/>
</body>
$(function(){
var fruits = [
minLength: 2,
var result = [];
}
}
res(result);
}});});
まずは、inputに
.autocompleteする。

<body>
<input id="fruit"/>
</body>
候補文字列を配列で用意する。
http://../fruitsのように、
jsonを返すAPIも指定可能$(function(){
var fruits = [
minLength: 2,
var result = [];
}
}
res(result);
}});});

<body>
<input id="fruit"/>
</body>
$(function(){
var fruits = [
minLength: 2,
var result = [];
}
}
res(result);
}});});
何文字入力したら補完候補を
表示するか指定。
デフォルトは1文字。

<body>
<input id="fruit"/>
</body>
文字補完のコールバック関数。
一致する候補を探すロジックは
自分で実装する。$(function(){
var fruits = [
minLength: 2,
var result = [];
}
}
res(result);
}});});

<body>
<input id="fruit"/>
</body>
第１引数のtermプロパティから
フォームの入力値が取得できる。
$(function(){
var fruits = [
minLength: 2,
var result = [];
}
}
res(result);
}});});

<body>
<input id="fruit"/>
</body>
候補リストfruitsから
入力値req.termと一致する
文字列を抽出し、resultに格納。$(function(){
var fruits = [
minLength: 2,
var result = [];
}
}
res(result);
}});});

<body>
<input id="fruit"/>
</body>
第２引数resに、
抽出した候補配列を渡すと、
補完候補として表示される。$(function(){
var fruits = [
minLength: 2,
var result = [];
}
}
res(result);
}});});

一番良く使われる
日付入力の実装

フォームをクリックするとカレンダー。

<p>Date: <input type="text" id="datepicker" /></p>
$(function() {
$( "#datepicker" ).datepicker();
});
Inputに対して、
.datepicker()を呼び出すだけ。

datepickerは便利なので、
オプションも紹介します。

デフォルトはmm/dd/yy
フォーマット
yy/mm/dd形式に
変更したい。

$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy/mm/dd',
firstDay:1
});
}); datepickerの引数オブジェクトに
firstDayプロパティを設定する。
0が日曜日で１が月曜日。
デフォルトは0(日曜日)。

デフォルトは日曜始まり月曜始まりに変更したい

$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy/mm/dd',
firstDay:1
});
}); dateFormatプロパティを設定する。
例ではyy/mm/ddを指定。

デフォルトは英語表記日本語に変更したい

$(function() {
// $.datepicker.setDefaults($.datepicker.regional[ "ja" ] );
});
setDefaultsの指定を忘れると、うまく日本語がでないので注意
漢数字で出てくる

animeteメソッド
時間をかけてCSS属性を変化させる。
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>
<button id="button"
$(function() {
width: 200,
height : 200
}, 2000 );
});
});
デフォルトのスタイルは
・背景色は赤
・縦横100pxずつ

</div>
<button id="button"
$(function() {
width: 200,
height : 200
}, 2000 );
});
});
ボタンのイベントハンドラに、
divのアニメーションメソッドを
コールバック指定。

</div>
<button id="button"
$(function() {
width: 200,
height : 200
}, 2000 );
});
});
・背景色は緑
・縦横は200px
・2000ミリ秒かけて変化させる

シンタックスエラーと
どう戦えば良いのか。
余談 : お世話になったツール

$(function() {
width: 200,
height : 200
}, 2000 );
})
});
問. シンタックスエラーはどこか

$(function() {
width: 200,
height : 200
}, 2000 );
});
});
答. clickメソッドの終了セミコロンがない

私、30分以上はまりました...

http://jshint.com

はやくJSHintを使えばよかったと
後悔しています

具体的なご指摘を頂けました。
Line9: セミコロンがありません。

Web直接入力以外にも、
Vim/Emacs/Subline Text2
Gitコミット前チェックツール
など、色々対応しています。

ユーティリティ
独自ウィジェットは次回紹介予定。

プロになるためのJavaScript入門読書会 レジュメ

More Related Content

What's hot

Similar to プロになるためのJavaScript入門読書会 レジュメ

More from Norito Agetsuma