POPSブログ

jQueryバーチカルアコーディオン/2

113

  Category:  jquery2012/06/07 pops 

jQueryバーチカルアコーディオン2、Vertical Accordion (clickタイプ)。横形のものを縦形に書き直しました。但し応用の範囲は限定されます。


jQueryバーチカルアコーディオン(clickタイプ)

バーチカルアコーディオンは様々ありますが、ここでは高さが固定されたものを指すことにします。大きさは様々ですが、一般的に画像を挿入(または背景画像)して「メニュー」に使用されることが多いようです。

(最も一般的な縦方向に伸縮するバーチカルアコーディオンは当方では「アコーディオン」と呼ぶことにします)


サンプル

簡易方式の「バーチカルアコーディオン」です。現在、背景画像5枚構成、中央配置、タイマー設定中、になります。


POPS WEB KOUBOU 1

POPS WEB KOUBOU 2

POPS WEB KOUBOU 3

POPS WEB KOUBOU 4

POPS WEB KOUBOU 5


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



VerticalAccordionMenu (clickタイプ)の説明


  • 横形のものを縦形に書き直しました。li要素では無くdiv要素に変更
  • Clickタイプに変更しました。一部違いがあります。(Clickタイプのほうが使い易い、余りお勧めいたしません)
  • 背景画像にした場合、中に文字、リストなどの記述が可能です。
  • 使用に際してはサイドバーのリンク用のメニューに使用されるのを前提に考慮しました。よって、中にリスト形式の記述が可能です。(レイアウトなどは使用者が行ってください)
  • バー部分にアクションがあることを明示するため矢印画像を挿入しています。
  • 高さが固定されたものは一般的ではありません。余り見かけないものです。
  • 簡易方式ですが、競合しないように (function($){.....})(jQuery); でラップしています。
  • jquery-1.4以上、ブラウザは全てでOKと思います。(IE6-.Chrome.Opera.Firefox.Safari)

設定方法

JSの上方部分を見てください。ほとんどはJS設定になります。

1. 一番外側のpopswicks-v-wrapクラスはどうしても必要ではありません。中央表示のために使用。
(この高さをCSSで書き込んでください。高さ = 画像高さ + アイテム数 x 余白、で算出できます)
2. そのほかの大きさなどは、JSで登録してください。CSSはJSで修正されます。
3. 原則、背景画像として挿入しています、画像として挿入したい場合は下記の説明をお読みください。
4. サイドバーのリンク用として使用の場合は、使用者がCSSなど追加して、文字など入れてください。
5. ラベル部分、v-lableクラスの中の設計も自由です。但し、余白ラベル部分の高さは必ず設定ください。20以上
6. 画像などの大きさにより速度を変更ください。タイマーの使用は自由です。
7. 注意、「ホリゾンタルタイプ」と併用使用の恐れがあるためクラス名はかえてあります。
8. もし、アイテムのオープン指定でCSS設定が不安定な場合は、JS側でオープン指定番号を入力ください。
9. タイマー作動の場合は、常に現在オープンされているアイテムの次ぎがオープンされます。
10. ラベル、v-lableクラス部分は、クリックのためのバーになります。div要素になっています。


IMG画像として挿入する場合、そのほか


v-baseクラスに挿入します

画像のみ表示
<div class="v-base"><img src="画像URL" /></div>

画像にaリンクをつけて表示
<div class="v-base"><a href="リンク先URL"><img src="画像URL" /></a></div>

文字、コンテンツなどを挿入する場合
<div class="v-base">ここに文字、コンテンツ等を挿入</div>

-----------------------------------

CSSのクラス設定によるアイテムのオープン指定、actived-v-wicks を挿入
<div class="wicks-li actived-v-wicks">

-----------------------------------

JS actived位置保存/クラスが複数なので判定をかえる

//javascript indexOfを使用した場合
var act = $(this).attr('class').indexOf("actived-v-wicks");
if (act != -1) {open_no = i;index = i;}

//jquery hasClassを使用した場合
if ($(this).hasClass('actived-v-wicks')) {open_no = i;index = i;}

どちらでも良い

全てに応用の利くものではありません。挿入するコンテンツによりJSの書き換えなどが必要になります。
実際に文字などを書き込み、確認ください。


設置方法

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


HTML

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


<div id="popswicks-v-wrap">
	<div id="popswicks-v">
		<div class="wicks-li"><div class="v-lable"><h3>POPS WEB KOUBOU 1</h3></div><div class="v-base"><a class="wicks-linkbtn" href="javascript:void(0);" title="GOTO-PAGE1"><img src="/main/images/wicks_btn.gif" /></a></div></div>
		<div class="wicks-li"><div class="v-lable"><h3>POPS WEB KOUBOU 2</h3></div><div class="v-base"><a class="wicks-linkbtn" href="javascript:void(0);" title="GOTO-PAGE2"><img src="/main/images/wicks_btn.gif" /></a></div></div>
		<div class="wicks-li"><div class="v-lable"><h3>POPS WEB KOUBOU 3</h3></div><div class="v-base"><a class="wicks-linkbtn" href="javascript:void(0);" title="GOTO-PAGE3"><img src="/main/images/wicks_btn.gif" /></a></div></div>
		<div class="wicks-li"><div class="v-lable"><h3>POPS WEB KOUBOU 4</h3></div><div class="v-base"><a class="wicks-linkbtn" href="javascript:void(0);" title="GOTO-PAGE4"><img src="/main/images/wicks_btn.gif" /></a></div></div>
		<div class="wicks-li"><div class="v-lable"><h3>POPS WEB KOUBOU 5</h3></div><div class="v-base"><a class="wicks-linkbtn" href="javascript:void(0);" title="GOTO-PAGE5"><img src="/main/images/wicks_btn.gif" /></a></div></div>
	</div>
</div>

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


JS

簡易記述方式、popswicks-v2.js 6KB


//popswicks-v2.js
//簡易記述VerticalAccordion
//アイテムにdivを使用
//clicktype
//POPS WEB KOUBOU

(function($){

  $(function(){

	//幅などの大きさ情報/全てこちらで修正表示するようになっています
	//item等収容する外側のBOX(ulに相当)
	var boxWidth = 520;//収容BOX幅
	// 高さ = 画像高さ + アイテム数 x 余白、で算出できます
	var boxHeight = 360;//収容BOX高さ

	//余白、ラベルの高さ 20推奨、20以上必ず記入のこと
	var boxSpace_H = 20;

	//画像BOXの大きさ
	var imgWidth = 520;//画像サイズ幅
	var imgHeight = 260;//画像サイズ高さ

	//収容item(liに相当)/上の設置値で決まる
	var itemWidth = imgWidth
	var itemHeight = imgHeight + boxSpace_H;

	//速度
	var duration = 500;//アニメ速度
	var len_max = 0;//要素最大数

	//画像までのパス
	var path='/main/images/';
	//背景画像名の登録
	var backimage_url = ['toyota_car01.jpg','toyota_car02.jpg','toyota_car03.jpg','toyota_car04.jpg','toyota_car05.jpg'];
	//背景画像を埋め込むか use
	var bgimage_use = 'use';

	//item背景COLOR
	var bgcolor=['#068E9A','#02C8BC','#8FA308','#D0B002','#F89C78','#F08C9F','#D185B7','#068E9A','#02C8BC','#8FA308','#D0B002','#F89C78','#F08C9F','#D185B7'];
	//li要素の背景色を染めるか use	
	var bgcolor_use = 'use';

	//タイマー、タイマーの使用 use
	var timer_use = 'use';
	//サイクル時間
	var cycle_time = 8000;

	//初期に開閉したい要素を指定/CSSでの設定も可能/こちらで設定推奨
	//オープン番号指定がない場合は1番目をオープン
	var open_no = 0;

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

	var cycletimeID = null;

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

	//グローバルな番号保存値
	var index = open_no;

	//BOXの大きさを修正する、変更しないこと
	var set_v_use = 'use';

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

		//アイテム数
		len_max = $('#popswicks-v .wicks-li').length;
		//基本的な大きさを算、全体の高さ決定
		boxHeight = imgHeight + boxSpace_H * len_max;

		//収容BOX大きさ修正
		if (set_v_use == 'use') {
			$('#popswicks-v').css({'width':boxWidth,'height':boxHeight});
			$("#popswicks-v .wicks-li").css({'width':itemWidth,'height':boxHeight});
			$("#popswicks-v .wicks-li .v-lable").css({'width':itemWidth,'height':boxSpace_H});
			$("#popswicks-v .wicks-li .v-base").css({'width':imgWidth,'height':imgHeight});
		}
			
		//配置位置Yを計算保存(wicks-liクラスで判別)
		$("#popswicks-v .wicks-li").each(function(i) {

			//position-Y保存、等しい分割位置の計算はなし
			position_op[i] = boxSpace_H * i;
			position_cl[i] = boxSpace_H * (i-1) + itemHeight;
			if(i == 0) {position_cl[0] = 0;position_op[0] = 0;}//1番目補正

			//画像BOX、v-baseクラスの位置決定、余白分下にずらす
			$(this).children(".v-base").css({'top':boxSpace_H});

			//hasClassを使用した場合/actived位置保存/クラスが複数なので判定方法をかえる
			if ($(this).hasClass('actived-v-wicks')) {open_no = i;index = i;}

			//背景画像流し込み
			if (bgimage_use == 'use') {
				var bg_url = path + backimage_url[i];
				$(this).find(".v-base").css({'background-image':'url('+ bg_url + ')'});
			}
			//li背景を染める
			if (bgcolor_use == 'use') {
				$(this).css({'background-color':bgcolor[i]});
			}
			//外側に移動配置(下)
			$(this).css({'top':boxHeight});

		});

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

		//初期移動
		//オープン位置を指定してオープン
		if (open_no >= 0) {
			index = open_no;
			open_set(open_no);
		}

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

		//タイマーをセットする
		if (timer_use == 'use') {timerset();}

	}

	//------------------------------------------------
	//ACTIONの設定/v-lableクラス要素にアクションをあたえている
	//CSS側で変化をつける場合にクラスを使用してください

	var hover_action_set = function() {

		//v-lableクラス要素HOVER-ACTION-addClass
		$("#popswicks-v .v-lable").hover(
			//hover
			function(e) {
				$(this).addClass("hovered-v-wicks");
			},
			//hover-Out-removeClass
			function(e) {
				$(this).removeClass("hovered-v-wicks");
			}
		);

		//v-lableクラス要素CLICK-ACTION
		$("#popswicks-v .v-lable").click(function(e) {
			//親li要素の番号を取得
			var index_no = $(this).parent().index();
			//同じ番号の場合は実行しない
			if (index_no == index) {return false;}
			//グローバルindexに保存、現在index使用
			index = index_no;
			//hover番号位置をオープン
			open_set(index_no);
		});

	}

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

		$("#popswicks-v .wicks-li").each(function(i) {
			if (no >= i) {$(this).stop().animate({'top':position_op[i]},duration);}
			else {$(this).stop().animate({'top':position_cl[i]},duration);}
		});
	};

	//タイマー設定、始動
	var timerset = function () {
		clearInterval(cycletimeID);
		cycletimeID = setInterval(cycleset,cycle_time);
	}
	//タイマーに拠る次ぎのアイテムオープン
	function cycleset() {
		index ++;
		if (index > len_max - 1) {index=0;}
		open_set(index);
	}

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

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

  });

})(jQuery);

「v-lableクラス要素にホーバー」した場合(余白、ラベル部分)、その要素に hovered-v-wicks クラスが与えられます。何らかの変化をCSSで与える場合に利用できます。
注意、hoverタイプの場合と違いますので間違わないようにしてください。


CSS

popswicks-v2.css


/* popswicks-v2.css Vertical日本語 */

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

#popswicks-v .wicks-li{
	position:absolute;
	display:block;
	top:0;left:0;
	padding:0;
	overflow hidden;
}
#popswicks-v .wicks-li .v-lable {
	position:absolute;
	top:0;left:0;
	background: url('/main/images/popswicks_arrow2.gif') no-repeat right top;
	cursor:pointer;
}
#popswicks-v .wicks-li .v-lable.hovered-v-wicks {
	background-color:#555555;
}
#popswicks-v .wicks-li .v-lable h3{
	margin:2px 0 0 10px;
	font-size:12px;
	color:#FFFFFF;
}
#popswicks-v .wicks-li .v-base {
	position:absolute;
	top:20px;left:0;
}
#popswicks-v .wicks-li a {
	text-decoration:none;
}
.v-base .wicks-linkbtn img{
	width:60px;
	height:21px;
	margin:5px 0 0 5px;
}

画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

  
ボタン画像、wicks_btn.gif 60x21矢印画像、popswicks_arrow2.gif 20x20

以上です。




[ この記事のURL ]


タグ:jquery , Accordion , series

[ jQueryバーチカルアコーディオン シリーズ記事 ]

jQueryバーチカルアコーディオン/22012.06.07
jQueryバーチカルアコーディオン/12012.06.06

 

ブログ記事一覧



[1]