jQueryプラグインを使わずに自前カルーセルパネルを関数化

「jQueryプラグインを使わずに自前カルーセルパネルを導入してみる」で作成したものを使い回しができるよう関数化してみました。

プラグインにすると少しカスタマイズの難易度が上がる気がする、もっと機能がついたものたくさん配布されているのでこれを使う理由があまりない、「自前で」と銘打ってる、ということで関数にしました。

あくまでも「ちょっとJavascriptを触って勉強がてらカスタマイズに挑戦して導入もできるように」ということが目的です。ですので、前記事「jQueryプラグインを使わずに自前カルーセルパネルを導入してみる」のjavascriptと比べつつ眺めてもらえればと思います。

さて、関数化するにあたり使い回しができるようにすために「横型、縦型、両方利用できる」「複数設置可能にする」ということを考慮し、単純に引数で判定することにしました。

「引数」というのは、簡単にいうと「関数に渡す値」のことで、『関数名(引数1,引数2,…)』という形で利用します。

carouselPanel("#carouselwrap", "left", 1);

今回作成したものは上記のように、この引数に指定された値を元にJavascriptの処理を振り分けています。で、できあがったものは下記。

/* Copyright (c) 2011 detelu (http://www.detelu.com)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * carouselPanel.js
 * Version: 2011-11-18
*/
//id=ターゲットになる要素のid名、posmove=横に動かしたい場合はleft,縦はtop、limove=スライドさせるliの数を引数として設定
function carouselPanel(id,posmove,limove) {
	var carousel_size,ul_size,ul_w_size,ul_h_size,li_move_top,li_move_left;
	//ターゲットになる要素を変数 tgt に代入
	var tgt = $(id);
	//tgtの要素の中に戻る、進むボタンを追加
	tgt.append('<div class="prev hide"></div><div class="next show"></div>');
	//tgtの要素の中からulタグ要素を抜き出し変数 tgt_ul に代入
	var tgt_ul = tgt.find("ul");
	//tgtの要素の中からliタグ要素を抜き出し変数 tgt_li に代入
	var tgt_li = tgt.find("li");
	var li_move = limove;
	var li_w_size = tgt_li.outerWidth();
	var li_h_size = tgt_li.outerHeight();
	var li_num = tgt_li.size();
	//引数 posmove に left が指定されていたら 横に動かすのに必要な値を変数に代入していく
	if(posmove == "left") {
		carousel_size = tgt.width();
		ul_w_size = li_w_size*li_num;
		ul_h_size = li_h_size;
		ul_size = ul_w_size;
		li_move_top = 0;
		li_move_left = li_w_size*li_move;
	//引数 posmove に top が指定されていたら 縦に動かすのに必要な値を変数に代入していく
	}else if(posmove == "top") {
		carousel_size = tgt.height();
		ul_w_size = li_w_size;
		ul_h_size = li_h_size*li_num;
		ul_size = ul_h_size;
		li_move_top = li_h_size*li_move;
		li_move_left = 0;
	}
	tgt_ul.css({position: 'absolute',top: '0',left: '0', width: ul_w_size+'px', height: ul_h_size+'px'});
	var tgt_prev = tgt.find("div.prev");
	var tgt_next = tgt.find("div.next");
	tgt_prev.click(function(){
		//クリックされた要素（ここではclass名 prevの要素）にclass名 hideが指定されていなければ以下を実行
		if(!$(this).hasClass('hide')){
				tgt.find('ul:not(:animated)').animate(
				{top:'+='+li_move_top, left:'+='+li_move_left},
				600,
				function(){
					var ul_pos = boxPosition(tgt_ul, posmove);
					//tgt_next に代入されている要素のclass hide を取り除き、class show を追加
					tgt_next.removeClass("hide").addClass("show");
					if(ul_pos === 0) {
						tgt_prev.removeClass("show").addClass("hide");
					}
				}
			);
		}
	});
	//クリックされた要素（ここではclass名 nextの要素）にclass名 hideが指定されていなければ以下を実行 以下略
	tgt_next.click(function(){
		if(!$(this).hasClass('hide')) {
			tgt.find('ul:not(:animated)').animate(
				{top:'-='+li_move_top, left:'-='+li_move_left},
				600,
				function(){
					var ul_pos = boxPosition(tgt_ul,posmove);
					tgt_prev.removeClass("hide").addClass("show");
					if(carousel_size >= (ul_size + ul_pos)) {
						tgt_next.removeClass("show").addClass("hide");
					}
				}
			);
		}
	});
	function boxPosition(ele,pos) {
		var position = ele.position();
		return position[pos];
	}
}

と、このように書き直してみました。少しだけ補足。

var tgt = $(id);

ここでjQueryを利用して引数 id に指定された要素を取得し、変数に代入しています。変数に代入しているのは、$(id)で抜き出した要素を何度か利用するためです。

たとえばjQueryは$(“#abc”)という記述があるたびに、HTMLの中で「id=abc」が指定された要素を探して抜き出す、という処理を行います。もし$(“#abc”)という記述が10個あれば、その度に「id=abc」が指定された要素を探して抜き出すという処理をさせることになるのです。

この「探して抜き出す」という処理を何度も行わせないために、一度抜き出したものを変数に代入しておいて、以降は変数に代入されている要素を利用するようにしています。処理速度を上げるための一個のポイントなので、覚えておくと損はないです。

ちょっとした記述の違いで処理速度が大幅にかわることもあります。記事は古いですが下記「てっく煮ブログ」さんがとても参考にります。あと英語ですがもっと詳しく知りたい方は「jQuery Proven Performance Tips And Tricks (Slides)」は必見の内容です。英語はちょっと…、という方はgoogle先生に聞いてみて下さい。

jQuery を高速に使う CSS セレクタの書き方 – てっく煮ブログ
 jQuery Proven Performance Tips And Tricks (Slides)
jquery 高速 – Google 検索

var tgt_ul = tgt.find("ul");

ここでも同じように要素を代入しているのですが、jQueryのfindメソッドを利用して要素を抜き出しています。ここでは変数 tgt に代入されている要素の中の ul を抜き出し、変数 tgt_ul に代入しています。

.find() – jQuery API
find([expr]) – jQuery API 1.4.4 日本語リファレンス – StackTrace

※本家ドキュメントは日本語がないので、バージョン違いですが日本語リファレンスを掲載しているサイト「StackTrace」さんのリンクを張らせて頂いてますが、バージョンが違うと挙動が異なることもあり、jQuery本家のドキュメントと比べながら利用しましょう。

ドキュメントについては、下記もおすすめです。こちらも古いのですが、逆引きになっているので、jQueryでどんなことができるのかをざっくり確認しながら利用できます。

jQuery逆引きリファレンス－＠IT

最後にこの関数を利用方法を。jQueryと関数を記述したファイルを読み込んで、下記のように指定します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="carouselPanel.js"></script>
<script>
$(function(){
	//carouselPanel("カルーセルパネルのid名", "left(左右に動かす) or top(上下に動かす)", 戻る、進むでスライドさせるliの数);
	carouselPanel("#carouselwrap", "left", 1);
});
</script>

HTML、CSSについては「jQueryプラグインを使わずに自前カルーセルパネルを導入してみる」で作成したものとあまり変わりませんが、HTMLのid属性はページ内で同じものを複数記述するのは規則違反になるので、複数設置可能できるよう prev, next, carouselの id指定をclass指定に変更しています。ファイル一式ダウンロードできるようにしたので、そちらのぞいてください。

カルーセルパネル関数 – ファイル一式ダウンロード

もしそのまま利用したい方はご自由にお使いください。もちろん改変もご自由にどーぞ。