Mais conteúdo relacionado
Semelhante a OSC京都2011 (20)
OSC京都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がみたい