翱厂颁京都2011
- 9. ? セレクタ
? $() DOM要素を選択
? イベント駆動
? hover()
? click()
? DOM操作
? show()
? css()
- 13. <script>
$(document).ready(function() {
$('.dq-container').dq();
});
</script>
? $(ほげほげ).プラグイン名(オプション);
- 21. hoimi = 30;
function(){
vehoimi = 100;
var vehoma = +Infinite;
console.log(hoimi); // OK
}
console.log(vehoimi); // OK
console.log(vehoma); // エラー
- 24. ? 1+2*3
? 7
? 掛算が先に評価
? (1+2)*3
? 9
? 加算が先に評価
- 28. ;
(function($){
$.fn.dq = function(options) {
// 初期値を設定
var defaults = {
containerClass : '.dq-container'
};
// オプションの初期値を設定
var setting = $.extend(defaults, options);
//ここにプラグインの処理を書く
return this;
};
})(jQuery);
- 29. ? $.fn.プラグイン名 = function(options) {};
? jQuery.fn オブジェクトに関数を追加
? jQuery.fn = jQuery.prototype
? 同じ名前があると上書きされちゃう
- 32. var defaults = {
containerClass : '.dq-container'
};
? 連想配列
? JSON形式
- 33. ? var setting = $.extend(defaults, options);
? optionsの内容が優先
? Java風に書くと……
? class options extends defaults
? 動的継承するインスタンス
? ディープコピー
- 35. ;
(function($){
$.fn.dq = function(options) {
// 初期値を設定
var defaults = {
containerClass : '.dq-container'
};
// オプションの初期値を設定
var setting = $.extend(defaults, options);
// ループを回すことにより指定されたすべての要素を処理する
this.each(function(){ });
return this;
};
})(jQuery);
- 36. ? $().dq()は一回しか呼ばれていない
? プラグインの実行は一度だけ
? セレクタの中身がいっぱいあったら？
- 40. $('li', this).hover(
// マウスが乗ったとき
).click(
// クリックしたとき
);
? $('li', this).hover();
? $('li', this).click();
? 毎回指定するより高速
? セレクタの処理を一回飛ばせる
- 43. .hover(
function(){ // リスト要素がマウスホバーした場合}
, function(){ // マウスが要素から外れた場合})
? 引数に匿名関数
? CSSの疑似クラスと同じ感覚
? プログラムだと動的に扱える
- 44. $('li', this).hover(
function(){ // リスト要素がマウスホバーした場合
// 三角形を表示する
$(this).css('background', 'url(img/allow.png) ……');
, function(){ // マウスが要素から外れた場合
// 三角形を隠す
$(this).css('background', 'none');
})
? $(‘li’, this)
? プラグインを呼び出したときの要素
? $(this)
? li要素
- 45. ? クリック時の動作
? 下位コンテナを表示
? コンテナがなければ閉じる
- 46. <ul class="dq-container">
<li>はなす
<div class="dq-container">
こんにちは、DQ風インターフェースシステムへようこそ
</div>
</li>
<li>じゅもん</li>
<li>どうぐ
<ul class="dq-container">
<li class="dq-caption">どうぐ</li>
<li>やくそう</li>
<li>やくそう</li>
</ul>
</li>
</ul>
- 50. var child = $(this).children(setting.containerClass);
// 子要素だけを操作
if (child.length){ // 子要素にコンテナがある場合
// コンテナを開く処理
} else { // 子要素にコンテナがない場合
// コンテナを閉じる処理
}
? lengthで判定する
- 51. ? $().addClass("dq-console-open").show();
? $().hide().removeClass("dq-console-open");
? コンテナを表示
? マーキングクラスを追加
? クラスを追加して開く
? 閉じてからクラスを取り除く
- 54. <ul class="dq-container">
……
<li>どうぐ
<ul class="dq-container">
<li class="dq-caption">どうぐ</li>
<li>やくそう</li>
<li>やくそう</li>
</ul>
</li>
</ul>
- 55. ? $().outerHeight()
? DOM要素の高さ
? $().outerWidth()
? DOM要素の幅
- 59. var sideup = function(element){
$(element).hide().removeClass("dq-console-open");
}
? 匿名関数を変数に代入する
- 61. if (timerId) {
clearTimeout(timerId);
}
? タイマをキャンセル
? 1秒以内に戻ってきた場合
- 62. // マウスが外れたときに実行する関数のタイマID
var timerId;
// コンテナとマウスの挙動
$(setting.containerClass, this).hover(
function(){ // コンテナ上にある場合は何もしない
if (timerId) { // タイマーがセットされていた場合はキャンセルする
clearTimeout(timerId);
}
},
function(){ // コンテナからマウスが外れた場合は隠す
var sideup = function(element){
$(element).hide().removeClass("dq-console-open");
}
// タイマーで実行を少し遅らせる
timerId = setTimeout(sideup, 1000, this);
});
- 63. ? プラグインのお約束
? 難易度:低
? jQuery本体を知る
? 難易度:中
? JavaScriptを知る
? 難易度:極限
- 65. ? 何がユーザにとって幸せか？
? おもてなしの心？
? 動的なデザイン
? 動かしながらじゃないとわからない？
? 誰も見たことのないUIがみたい
