POPSブログ

jQueryホリゾンタルアコーディオン/1

107

  Category:  jquery2012/05/28 pops 

jQueryホリゾンタルアコーディオン、Hoyzontal Accordion (Menu hoverタイプ)。ありふれたものですがFlash方式のものを、jQuery用に書き直しました。結構応用できるものがあります。


jQueryホリゾンタルアコーディオン(Menu hoverタイプ)

大きさは様々ですが、一般的に画像を挿入(または背景画像)して「メニュー」に使用されることが多いようです。


サンプル

簡易方式の「ホリゾンタルアコーディオン」です。現在、4枚構成、中央配置、大きさ300px になります。



2番目初期オープン状態、クリック(<a></a>)の設定はしていますが、クリックしても別ページには飛びません。



HoyzontalAccordionMenu (hoverタイプ)の説明

説明図

図のような配置になります。開閉によりその位置の関係を図にしたものです。1番目(配列番号0)のものだけが同じ位置であり、そのほかは重なりの余白分ずれて行くだけの関係にあることがわかります。
同様なものとして「Kwicks for jQuery」が有名であるが、作り方、スクリプトは全く違うものである。縦形のAccordionは全体を伸縮できるが(HTMLの構造上の理由で、ページの高さが変化しても違和感がないようにできている)、横形は全体の大きさを固定しないと見栄えが悪い(ページの横幅が決まっているのではみ出しはできない)ので作り方が違います。


  • li要素の等分された標準位置、オープン位置、クローズ位置、を事前に計算保存、その位置に移動する仕組みです。
  • 指定要素の開く操作は、オープンすべき要素番号と小さな要素番号はオープン位置に移動。大きな要素番号はクローズ位置に移動させればよい。(開きたい要素番号を引数にして関数にアクセスすればよい仕組みになっています)
  • メニュー拠り離れた場合は、等分された標準位置に戻すかあるいは、そのままにするかである。
  • これは、hoverタイプであるがクリックタイプにする事も可能である。
  • 画像の大きさを変えたり、あるいは中にコンテンツなどを挿入することも可能だから、応用範囲が広がる。
  • ul要素の大きさでマスク処理されます。はみ出す部分は表示されません。
  • 簡易方式ですが、競合しないように (function($){.....})(jQuery); でラップしています。
  • jquery-1.4以上、ブラウザは全てでOKと思います。(IE6-.Chrome.Opera.Firefox.Safari)

設定方法

JSの上方部分を見てください。ほぼCSSの大きさ部分の変更ですみますが、以下詳細を記述します。


1. 原則、CSS側で大きさなどを設計しますので、状況に応じて書き換えてください。
2. JS側では画像などの「li要素」の数をしらべて、「重なりの余白」を計算します。要素の数が1-2枚分変化しても差し支えありません。(見栄えが良くない場合は、全体の大きさを調整します)
3. 現在は「重なりの余白」は整数化しないで使用しています。問題が有る場合は整数化して使用ください。
(その場合に丸め計算の書式次第で1ドット前後の隙が出る場合がありますので、JSで収容BOX、CSSの大きさを修正出来るようにしてください)
4. 「重なりの余白」計算のため、JSでCSSの大きさを取得しています。解除する場合は、JS先頭で大きさを入力ください。その場合は入力値が計算に使用されます。
5. JS先頭部分をよく読んでください。
6. 小さなサムネールを沢山並べる場合は「重なりの余白」の計算を「整数化」して使用したほうが良い場合があります。「整数化」には、round を使用したほうが良い場合もあります。
7. 初期状態で、要素をオープン状態にするには、CSSでもJSでも設定可能です。
8. JSの書き換えなどは自由です。hoverflag の使用に注意ください。(jquery hover関数はhoverOutしたときにも機能するために、初期状態で指定要素を開閉指定出来ません。それで判別機能させるために使用されています)
9. 現在、li要素220x100、画像200x100の大きさのものが使用されています。li要素背景は画像と同じ色に染められています。幅の基準は「li要素」の幅です。
10. 見栄えが良いように、JS側で処理が終わるまで画像などは非表示になっています。処理が終われば表示します。
11. 全体の大きさ、要素数など変更する場合は、図を参考にして概略のCSSの大きさ部分など事前に「手計算」しておくと旨くゆきます。
12. 現在「中央配置」になっています。右、左寄せ配置の場合は popswicks-wrap popswicks のCSSを変更ください。
13. 要素数、大きさなど変更の場合はローカルで十分テストしてください。


設置方法

動作にはjQuery(v1.4以上)が必要です。事前にCSSを読み込み、jQuery、該当JSの順序で読み込みます。標準的なjQueryの設置と同じです。
なお、このサンプルでは jquery-1.6.4.min.js が使用されています。


HTML

上記サンプル、当方の設定例、状況に応じ画像URLなどの書き方を変更ください。


<div id="popswicks-wrap">
	<ul id="popswicks">
	<li id="menu-1" class=""><a href="javascript:void(0);"><img src="/main/images/popswicks1.gif" /></a></li>
	<li id="menu-2" class="actived_wicks"><a href="javascript:void(0);"><img src="/main/images/popswicks2.gif" /></a></li>
	<li id="menu-3" class=""><a href="javascript:void(0);"><img src="/main/images/popswicks3.gif" /></a></li>
	<li id="menu-4" class=""><a href="javascript:void(0);"><img src="/main/images/popswicks4.gif" /></a></li>
	</ul>
</div>

初期状態で「オープンさせたい要素」には actived_wicks クラスをあたえます。JSで設定することも可能ですがCSS設定が優先されます。JSで設定を優先させる場合はCSSのクラス設定はしないでください。


JS

簡易記述方式、popswicks-a.js


//popswicks-a.js
//簡易記述HoyzontalAccordion
//POPS WEB KOUBOU

(function($){

  $(function(){

	//全体の幅を決めるか、または重なりを決めるかで少し形態が違ってくる
	//幅などの大きさ情報
	//BOX情報、CSSに記載されていれば原則記入の必要はない
	var boxWidth = 300;//収容BOX幅
	var boxHeight = 100;//収容BOX高さ
	var itemWidth = 220;//収容item幅
	//画像、未使用
	var imgWidth = 200;//画像サイズ幅未使用
	var imgHeight = 100;//画像サイズ高さ未使用
	//速度、余白
	var duration = 500;//アニメ速度
	var len_max = 0;//要素最大数
	var boxSpace_W = 30;//余白、自動計算されます

	//position関連変数
	var position_st = [];//初期標準位置保存配列
	var position_op = [];//オープン位置保存配列
	var position_cl = [];//クローズ位置保存配列
	var hoverflag = 0;//ul要素にhoverしているかの判定
	var index = 0;

	//初期に開閉したい要素を指定/CSSでの設定も可能
	//オープン番号指定がない場合は1番目をオープン/-1の場合は初期標準にする
	var open_no = 0;
	//standerd位置に戻すか use
	var standerd_use = 'use';

	//BOXの大きさを取得する、標準で use
	var get_v_use = 'use';
	//BOXの大きさを修正する use
	var set_v_use = '';

	//計算のためBOX大きさ取得/数値
	if (get_v_use == 'use') {
		boxWidth = $('#popswicks').width() * 1;
		boxHeight = $('#popswicks').height() * 1;
		itemWidth = $("#popswicks li").width() * 1;
	}

	//------------------------------------------------
	//初期化init
	function init () {

		//BOX非表示
		$("#popswicks").css({'display':'none'});

		//基本的な大きさを算出設定、修正、この計算に誤差があるようだ、切捨てしたほうが良いようだ
		len_max = $('#popswicks li').length;
		//boxSpace_W = Math.ceil((boxWidth-itemWidth)/(len_max-1));//重なり余白計算floor.round.ceil
		boxSpace_W = (boxWidth-itemWidth)/(len_max-1);//重なり余白簡易計算

		//収容BOX大きさ修正
		if (set_v_use == 'use') {
			$('#popswicks').css({'width':boxWidth,'height':boxHeight});
			$("#popswicks li").css({'width':itemWidth,'height':boxHeight});
		}
			
		//配置位置を計算保存
		$("#popswicks li").each(function(i) {

			//position保存
			position_st[i] = (boxWidth / len_max) * i;
			position_op[i] = boxSpace_W * i;
			position_cl[i] = boxSpace_W * (i-1) + itemWidth;
			if(i == 0) {position_cl[0] = 0;position_op[0] = 0;}//1番目補正
			//actived位置保存
			if ($(this).attr('class') == 'actived_wicks') {open_no = i;}

			//外側に移動配置
			$(this).css({'left':boxWidth});

		});

		//actived位置修正/大きい場合は最後
		if (open_no >= len_max) {open_no = len_max - 1;}

		//BOX表示
		$("#popswicks").css({'display':'block'});

		//初期移動
		//オープン位置を指定してオープン
		if (open_no >= 0) {
			open_set(open_no);
		}
		//指定なしオープン、standerd2標準にする
		if (open_no == -1) {
			standerd_set2();
		}

		//hover_actionを有効にする
		hover_action_set();
	}

	//------------------------------------------------
	//ACTIONの設定/hovered_wicksクラスをあたえているがここではクラス未使用
	//CSS側で変化をつける場合にクラスを使用してください

	var hover_action_set = function() {

		//li要素HOVER-ACTION-addClass
		$("#popswicks li").hover(
			//hover
			function(e) {
				$(this).addClass("hovered_wicks");
				//要素の番号を取得
				var index_no = $("#popswicks li").index(this);
				//グローバルindexに保存、但し現在indexは使用していない
				index = index_no;
				//hover番号位置をオープン
				open_set(index_no);
			},
			//hover-Out-removeClass
			function(e) {
				$(this).removeClass("hovered_wicks");
			}
		);

		//ul要素HOVER-OUT-ACTION
		$("#popswicks").hover(
			//hover何もしない
			function() {
				hoverflag = 0;
			},
			//hover-Out標準に戻す
			function() {
				hoverflag = 1;
				//戻す場合の指定を判定して処理する
				if (standerd_use == 'use') {
					//標準状態に戻す
					standerd_set();
				} else {
					//開いたままにする、場所を指定して開くことも可能
					hoverflag = 0;

					//常に初期指定のオープン位置に戻す場合はstanderd_useを変更して、下記のようにすれば良い
					//open_set(open_no);

				}
			}
		);
	}

	//------------------------------------------------
	//アニメACTIONの実行
	//open
	function open_set(no) {

		$("#popswicks li").each(function(i) {
			if (no >= i) {$(this).stop().animate({'left':position_op[i]},duration);}
			else {$(this).stop().animate({'left':position_cl[i]},duration);}
		});
	};
	//standerd hoverflag-OUTの場合のみ処理
	function standerd_set() {
		//ul要素にhoverしている場合のみ処理
		if (hoverflag) {
			$("#popswicks li").each(function(i) {
				//標準positionにセット
				$(this).stop().animate({'left':position_st[i]},duration);
			});
			hoverflag = 0;
		}
	};
	//standerd2 hoverflag-OUT以外、初期のオープに使用
	function standerd_set2() {
		$("#popswicks li").each(function(i) {
			//標準positionにセット
			$(this).stop().animate({'left':position_st[i]},duration);
		});

	};

	//----------------------------------------------

	//全体を計算配置表示する
	init ();

  });

})(jQuery);

「li要素にホーバー」した場合、その要素に hovered_wicks クラスが与えられます。何らかの変化をCSSで与える場合に利用できます。


CSS

popswicks-a.css


/* popswicks-a.css */

#popswicks-wrap {
	width:640px;
	height:100px;
	background-color: #000000;
	text-align:center;/*中央補正*/
}
#popswicks-wrap ul {
	position: relative;
	list-style: none;
	margin: 0 auto;/*中央補正*/
	padding: 0;
	text-align:left;/*中央補正の場合に重要*/
	background-color:none;
	overflow: hidden;
}

#popswicks {
	width:300px;
	height:100px;
}
#popswicks li{
	list-style: none;
	display: inline;
	position: absolute;
	top:0;left:0;
	width: 220px;
	height: 100px;
	padding: 0;
	margin-right: 0px;
	cursor: pointer;
	overflow: hidden;
}
#popswicks li a {
	width: 220px;
	height: 100px;
	text-decoration:none;
}
#popswicks li a img {
	border:none;
	text-decoration:none;
}

#popswicks #menu-1 {
	background-color:#068E9A;
}
#popswicks #menu-2 {
	background-color:#02C8BC;
}
#popswicks #menu-3 {
	background-color:#8FA308;
}
#popswicks #menu-4 { 
	background-color:#D0B002;
}

#menu-1.2.2.4は必ずしも必要とはしません。サンプルでは画像をわざと小さくして配置しているために要素の背景を染めるために使用しています。画像は背景画像であっても機能します。


画像

サンプル画像

サンプル画像1、200x100 サンプル画像2、200x100
サンプル画像3、200x100 サンプル画像4、200x100

上の例は、X方向移動の横形ですが、Y方向移動の縦形伸縮(スライド)に改造することも可能です。


【参考】jeremymartin: Kwicks for jQuery

【参考】jeremymartin: Kwicks Example


以上です。




[ この記事のURL ]


タグ:jquery , Accordion , series

[ jQueryホリゾンタルアコーディオン シリーズ記事 ]

jQueryホリゾンタルアコーディオン/52012.06.04
jQueryホリゾンタルアコーディオン/42012.06.01
jQueryホリゾンタルアコーディオン/32012.05.31
jQueryホリゾンタルアコーディオン/22012.05.29
jQueryホリゾンタルアコーディオン/12012.05.28

 

ブログ記事一覧

年別アーカイブ一覧



[1]