POPSブログ

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

108

  Category:  jquery2012/05/29 pops 

Hoyzontal Accordion (Menu hoverタイプ)。前ページの記事「ホリゾンタルアコーディオン1」を背景画像使用にしてみました。主にCSS設定がかわります。


jQueryホリゾンタルアコーディオン(Menu hoverタイプ) 背景画像使用

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


サンプル

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



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



HoyzontalAccordionMenu (hoverタイプ) 背景画像使用の説明

背景画像を使用して、background-position により画像を変化させるようにしてみました。JSは同じですがCSSの設定が違います。CSSの書き方次第では認識しない場合がありますので、確認しながら変更ください。


  • 現在、「li要素」全体にクリック機能が有効になるように「div要素」をいれています。(HTML的には正しくない)
  • JSの内容は popswicks-a.js と同じものですので popswicks-a.js をそのまま使用できます。
  • HTMLおよびCSSの内容が違いますので注意ください。HTMLを変更の場合はCSSを使用者が適正化してください。
  • 「li要素」にホバーした場合に hovered_wicks クラスが与えられます。それにより背景画像位置をCSSで変更します。
  • 「li要素」の中に、文字を挿入したり、それに「aリンク」を貼ることも可能になります。(要各種ブラウザ確認)

設定方法

説明、そのほかの資料は「前ページの記事」を参照ください。

【参照】前ページの記事: jQueryホリゾンタルアコーディオン1


全体の幅の計算方法(ul要素の幅)

ul要素の幅 = li要素の幅 + 重なり余白の幅 x (li要素の合計数 - 1) で算出できます。

最後のli要素の右側が動く場合は、マスク幅(ul要素の幅)を、1ピクセル小さくしてください。
通常はありませんが、ul要素の幅が極端に狭く、且つ数多く並べた場合には、縦線が入ったりする場合があります。


設置方法

動作には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"><a href="javascript:void(0);"><div>&nbsp;</div></a></li>
	<li id="menu-2"><a href="javascript:void(0);"><div>&nbsp;</div></a></li>
	<li id="menu-3"><a href="javascript:void(0);"><div>&nbsp;</div></a></li>
	<li id="menu-4"><a href="javascript:void(0);"><div>&nbsp;</div></a></li>
	</ul>
</div>

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


JS

簡易記述方式、popswicks-b.js (popswicks-a.jsと同じです)


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

(function($){

  $(function(){

	//全体の幅を決めるか、または重なりを決めるかで少し形態が違ってくる
	//幅などの大きさ情報
	//BOX情報、CSSに記載されていれば原則記入の必要はない
	var boxWidth = 290;//収容BOX幅
	var boxHeight = 100;//収容BOX高さ
	var itemWidth = 200;//収容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-b.css


/* popswicks-b.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:290px;
	height:100px;
}
#popswicks li{
	list-style: none;
	display: inline;
	position: absolute;
	top:0;left:0;
	width: 200px;
	height: 100px;
	padding: 0;
	margin-right: 0px;
	cursor: pointer;
	overflow: hidden;
}
#popswicks li a{
	text-decoration:none;
}
/*要素全体にaを有効にするにはdivを入れる*/
#popswicks li a div {
	width: 200px;
	height: 100px;
	cursor: pointer;/*IE対策*/
}

#popswicks #menu-1 {
	background:url('/main/images/popswicks1b.gif');
	background-position: 0 0;
}
#popswicks #menu-2 {
	background:url('/main/images/popswicks2b.gif');
	background-position: 0 0;
}
#popswicks #menu-3 {
	background:url('/main/images/popswicks3b.gif');
	background-position: 0 0;
}
#popswicks #menu-4 {
	background:url('/main/images/popswicks4b.gif');
	background-position: 0 0;
}
/* hovered_wicks 背景画像position移動*/
#popswicks #menu-1.hovered_wicks {
	background-position: 0 -100px;
}
#popswicks #menu-2.hovered_wicks {
	background-position: 0 -100px;
}
#popswicks #menu-3.hovered_wicks {
	background-position: 0 -100px;
}
#popswicks #menu-4.hovered_wicks {
	background-position: 0 -100px;
}

背景画像使用のため、#menu-1.2.2.4 を使用しています。CSSの書き方に注意ください。


画像

サンプル画像

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

設定方法、そのほかの資料は「前ページ」の記事を参照ください。

【参照】前ページの記事: jQueryホリゾンタルアコーディオン1


以上です。




[ この記事の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]