Contenu connexe
Similaire à プロになるためのJavaScript入門読書会 レジュメ
Similaire à プロになるためのJavaScript入門読書会 レジュメ (20)
Plus de Norito Agetsuma (16)
プロになるためのJavaScript入門読書会 レジュメ
- 2. 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
- 4. 5.1 Interactionsの例
Draggable / Droppable
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" ); } });
});
- 11. 5.3 jQuery UI の基本動作
$(function() {
$("#button").button();
});
セレクタで指定してから、メソッド呼び出し。
$関数の引数に渡すと、DOMロード終了時に
jQueryによりコールバックされます。
- 26. 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()}
));
},
- 30. <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を通して、ドラッグされた
オブジェクトのテキストを取得
- 37. <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()するだけ.
- 41. <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);
}});});
- 42. <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する。
- 43. <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);
}});});
- 44. <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文字。
- 45. <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);
}});});
- 46. <body>
<label for="fruit">Your favorite fruit: </label>
<input id="fruit"/>
</body>
第1引数の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);
}});});
- 47. <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);
}});});
- 48. <body>
<label for="fruit">Your favorite fruit: </label>
<input id="fruit"/>
</body>
第2引数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);
}});});
- 51. <p>Date: <input type="text" id="datepicker" /></p>
$(function() {
$( "#datepicker" ).datepicker();
});
Inputに対して、
.datepicker()を呼び出すだけ。
- 54. <p>Date: <input type="text" id="datepicker" /></p>
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy/mm/dd',
firstDay:1
});
}); datepickerの引数オブジェクトに
firstDayプロパティを設定する。
0が日曜日で1が月曜日。
デフォルトは0(日曜日)。
- 56. <p>Date: <input type="text" id="datepicker" /></p>
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy/mm/dd',
firstDay:1
});
}); dateFormatプロパティを設定する。
例ではyy/mm/ddを指定。
- 64. <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 );
});
});
- 65. <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ずつ
- 66. <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のアニメーションメソッドを
コールバック指定。
- 67. <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ミリ秒かけて変化させる
- 69. 余談 : お世話になったツール
$(function() {
$("#button").click(function() {
$("#target").animate({
backgroundColor: "#00ff00",
width: 200,
height : 200
}, 2000 );
})
});
問. シンタックスエラーはどこか
- 70. 余談 : お世話になったツール
$(function() {
$("#button").click(function() {
$("#target").animate({
backgroundColor: "#00ff00",
width: 200,
height : 200
}, 2000 );
});
});
答. clickメソッドの終了セミコロンがない