Mais conteúdo relacionado Semelhante a Objective Front-End JavaScript (19) Mais de Muyuu Fujita (14) Objective Front-End JavaScript2. 自己紹介
me = {
name: "muyuu",
twitter: "@anticyborg",
belongs: "freelance",
job: "Web Front-End Engineer"
};
15. $(function() {
// 最初の要素以外は非表示
$(".body li").not(":first").hide();
$(".tab a").click(function(){
// 表示するコンテンツのIDを取得
var target = $(this).attr("href").replace("#", "");
// コンテンツ部分を全部隠す
$(".body li").hide();
// クリックしたタブのhretと同じIDを持つ箇所だけを表示する
$(".body").find('#' + target).show();
return false;
});
});
18. $(function() {
// アニメーションするパターン
$(".body2 li").not(":first").hide();
$(".tab2 a").click(function(){
var target = $(this).attr("href").replace("#", "");
$(".body2 li").hide('slow');
$(".body2").find('#' + target).show('slow');
return false;
});
// ページ表示時は2つ目が開いてるパターン
$(".body3 li").not(":first").hide();
$(".tab3 a").click(function(){
var target = $(this).attr("href").replace("#", "");
$(".body3 li").hide('slow');
$(".body3").find('#' + target).show('slow');
return false;
});
});
27. コンストラクタ関数
var obj = new Object(); // オブジェクトを変数objに生成
var num = new Number(123); // 数値オブジェクトを変数numに生成
var str = new String('aaa'); // 文字列オブジェクトを変数strに生成
38. new 演算子
var Human = function(name, age, gender){
//new演算子で呼び出した場合、実はこの処理が入っている
// var this = new Object();
this.name = name;
this.age = age;
...
//new演算子で呼び出し、returnを行っていない場合
//実はthisを返している
//return this;
};
44. コンストラクタ呼び出し時
var tab1 = new Tab({
root: ".tab", // タブのルート要素を指定
item: ".tabHead li", // タブ部分の他所を指定
body: ".tabBody li" // コンテンツ部分の他所を指定
});
コンストラクタ関数呼び出し時に、実際ページあるタブの要素
を新たに作るオブジェクトに設定するため、オプションとして
オブジェクトを渡す。
45. コンストラクタを作成
var Tab = function(param){
this.$root = $(param.root);
this.$item = this.$root.find(param.item);
this.$body = this.$root.find(param.body);
...
};
コンストラクタ実行時に渡された引数からjQueryオブジェクト
を保存
46. コンストラクタを作成
var Tab = function(param){
...
//カレントのタブとコンテンツに付与するclassを設定
this.adClass = 'current';
// カレントのコンテンツが何番目かを保存する変数を作成
this.currentIndex;
...
};
48. コンストラクタを作成
var Tab = function(param){
...
this.init(); //ページ表示時に実行した処理を実行
//タブをクリックした際の挙動を設定
var self = this; // alias
this.$item.on("click", "a", function(){
self.setCurrent(this); // カレントをセット
self.change(); // タブを切り替え
});
};
49. コンストラクタを作成
// constructor
var Tab = function(param){
this.param = param;
this.$root = $(param.root);
this.$item = this.$root.find(param.item);
this.$body = this.$root.find(param.body);
this.adClass = 'current'; // class
this.currentIndex = 0; // current tab index
this.init(); // 初期化
var self = this; // alias
this.$item.on("click", "a", function(){ // evnet
self.setCurrent(this);
self.change();
});
};
60. 呼び出し時にオプションを追加
var tab1 = new Tab({
root: ".tab", // タブのルート要素を指定
item: ".tabHead li", // タブ部分の他所を指定
body: ".tabBody li", // コンテンツ部分の他所を指定
duration: true // アニメーションの指定
});
62. 呼び出し
var tab1 = new Tab({
root: ".tab", // タブのルート要素を指定
item: ".tabHead li", // タブ部分の他所を指定
body: ".tabBody li", // コンテンツ部分の他所を指定
});
var tab2 = new Tab({
root: ".otherTab", // タブのルート要素を指定
item: ".otherTabHead .tab", // タブ部分の他所を指定
body: ".otherTabBody .content", // コンテンツ部分の他所を指定
duration: 400
});