プロになるための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入門読書会レジュメ

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

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

Ähnlich wie プロになるためのJavaScript入門読書会レジュメ (20)

Mehr von Norito Agetsuma

Mehr von Norito Agetsuma (16)