POPSブログ

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

110

  Category:  jquery2012/06/01 pops 

Hoyzontal Accordion (Menu clickタイプ)大型背景画像専用。今まではhoverタイプでしたが、これはclickタイプになります。設定はほぼJS側で行いCSS記述を簡略化しています。


jQueryホリゾンタルアコーディオン(Menu clickタイプ) 背景画像挿入

大型背景画像として挿入して、文字などを書くことも可能です。但しかなり面倒になりますので、hoverタイプと比較してお世辞でも良いものとは言えません。ショウがないので作ったものです。


Clickタイプ、サンプル

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

色付きのバーを「クリック」すればオープンします。


1番目初期オープン状態、リンク(<a></a>)の設定はしていますが、クリックしても別ページには飛びません。
矢印画像は、スライドなりの「アクションを明示」させるために挿入しています。



HoyzontalAccordionMenu (clickタイプ) 大型画像使用の説明

CSSでの設定は、大まかな収容位置の大きさのみの変更で、そのほかのサイズなどはJS側で変更します。JSの上方部分をよく読んでください。


  • 利点として、中に文字などを挿入できます。使用者が行ってください。(全て背景画像のほうが簡単)
  • 重なり余白は「オープン用のクリックバー」になっています。バーの部分に背景画像など挿入してデザイン変更をおこなえます。HTML.CSSを工夫すれば個別の画像挿入も可能でしょう。
  • 「クリックタイプ」は、操作性が劣ります。よほど必要性がなければ使用をお勧めいたしません。普通の「ホバータイプ」のほうが簡単ですし、文字が必要なら画像に塗りこめばよろしい。
  • 単純に「クリックタイプ」のものも作れますと言うことです。縦形アコーディオンと違い馴染みが薄い。

設定方法

JS先頭部分を読んでください。背景画像はJSに登録します。

・boxbaseクラスの画像は背景画像ですから、DIV部分にコンテンツなどを書き込めますが、狭い場所ですからCSSでの設定が大変難しくなります、使用者の判断で行ってください。
・操作性を向上させるには、「クリックバー」boxlableクラスのデザインなどをどのようにするかです、縦ですので文字は挿入しても読み難いので、どうしても画像を使用せざるを得ないから工夫が必要になります。


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

ul要素の幅 = 背景画像要素の幅 + 重なり余白の幅 x li要素の合計数 で算出できます。注意、今までのものと違います。

重なり余白などは通常自動計算されて、マスクの大きさも修正されます。場合によっては横幅が1ピクセル小さくなる場合があります。通常はありませんが、事前にli要素の幅など考慮せず数多く並べた場合には、マスクでカットされ全て表示されない場合があります。

簡易説明図


設置方法

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


HTML

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


<div id="popswicks-wrap">
	<ul id="popswicks">
	<li><div class="boxlable" title="OPEN1"><img src="/main/images/popswicks_arrow.gif" /></div><div class="boxbase"><a class="wicks_link" href="javascript:void(0);" title="GOTO-PAGE1"><img src="/main/images/wicks_btn.gif" /></a></div></li>
	<li><div class="boxlable" title="OPEN2"><img src="/main/images/popswicks_arrow.gif" /></div><div class="boxbase"><a class="wicks_link" href="javascript:void(0);" title="GOTO-PAGE2"><img src="/main/images/wicks_btn.gif" /></a></div></li>
	<li><div class="boxlable" title="OPEN3"><img src="/main/images/popswicks_arrow.gif" /></div><div class="boxbase"><a class="wicks_link" href="javascript:void(0);" title="GOTO-PAGE3"><img src="/main/images/wicks_btn.gif" /></a></div></li>
	<li><div class="boxlable" title="OPEN4"><img src="/main/images/popswicks_arrow.gif" /></div><div class="boxbase"><a class="wicks_link" href="javascript:void(0);" title="GOTO-PAGE4"><img src="/main/images/wicks_btn.gif" /></a></div></li>
	<li><div class="boxlable" title="OPEN5"><img src="/main/images/popswicks_arrow.gif" /></div><div class="boxbase"><a class="wicks_link" href="javascript:void(0);" title="GOTO-PAGE5"><img src="/main/images/wicks_btn.gif" /></a></div></li>
	</ul>
</div>

初期状態で「オープンさせたいli要素」には actived_wicks クラスをあたえます。JSで設定を優先させる場合はCSSのクラス設定はしないでください。この例ではJSで設定しています。
注意、画像1番目を指定する場合は、0を記入します、2番目は1です。li要素数より大きすぎる場合は最後の画像がオープンします。


JS

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


//popswicks-d.js
//簡易記述HoyzontalAccordion
//click type
//POPS WEB KOUBOU

(function($){

  $(function(){

	//幅などの大きさ情報の設定

	//全てを収容する外枠の大きさ、この部分はJSで修正はしません
	var boxWidth = 640;//ul幅
	var boxHeight = 260;//ul高さ

	//余白(boxlableクラス)は固定しない場合自動修正されます
	var boxSpace_W = 24;
	//余白を固定する use/固定する場合は全体を自動修正
	var set_space_use = '';

	//収容item幅 li/自動修正されます
	var itemWidth = 0;//li幅
	var itemHeight = 260;//li高さ

	//背景画像収容(boxbaseクラス)のBOXサイズ/背景画像そのもの大きさでは在りません
	//通常は、画像の大きさになります、背景画像は伸縮しませんので大きすぎればカットされます
	var imgWidth = 520;//BOX幅
	var imgHeight = 260;//BOX高さ

	//収容item幅、暫定計算
	itemWidth = imgWidth + boxSpace_W;

	//背景画像URL
	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';

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

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

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

	//初期に開閉したい要素を指定、0からの番号に注意
	//CSSでの設定も可能です、オープンしたいli要素に actived_wicks クラスを記入する
	//オープン番号指定がない場合は1番目(open_no=0)をオープン
	var open_no = 0;

	//収容BOX大きさ修正、そのままで使用ください
	var set_v_use = 'use';

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

	//初期化init
	function init () {

		//基本的な大きさを算出設定
		//要素の数
		len_max = $('#popswicks li').length;

		//収容BOX大きさ位置修正再計算
		//余白を再計算/useの場合初期値を使用
		if (set_space_use != 'use') {
			boxSpace_W = Math.ceil((boxWidth - imgWidth) / len_max);//重なり余白計算floor.round.ceil
			itemWidth = imgWidth + boxSpace_W;
		}

		//boxWidthが大きすぎる場合ははみ出し分カットされる
		boxWidth = imgWidth + boxSpace_W * (len_max);

		//収容BOX大きさCSS修正
		if (set_v_use == 'use') {
			$('#popswicks').css({'width':boxWidth,'height':boxHeight});
			$("#popswicks li").css({'width':itemWidth,'height':boxHeight});
			$("#popswicks li .boxlable").css({'left':0,'width':boxSpace_W,'height':imgHeight});
			$("#popswicks li .boxbase").css({'left':boxSpace_W,'width':imgWidth,'height':imgHeight});
		}
			
		//配置位置を計算保存
		$("#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;}
			//背景画像流し込み
			if (bgimage_use == 'use') {
				var bg_url = path + backimage_url[i];
				$(this).find(".boxbase").css({'width':imgWidth,'height':imgHeight,'background-image':'url('+ bg_url + ')'});
			}
			//li背景を染める
			if (bgcolor_use == 'use') {
				$(this).css({'background-color':bgcolor[i]});
			}

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

		});

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

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

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

	}

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

	var hover_action_set = function() {

		//boxlableクラス要素HOVER-ACTION-addClass
		$(".boxlable").hover(
			//hover
			function(e) {
				$(this).addClass("hovered_wicks");
			},
			//hover-Out-removeClass
			function(e) {
				$(this).removeClass("hovered_wicks");
			}
		);

		//boxlableクラス要素CLICK-ACTION
		$(".boxlable").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 li").each(function(i) {
			if (no >= i) {$(this).stop().animate({'left':position_op[i]},duration);}
			else {$(this).stop().animate({'left':position_cl[i]},duration);}
		});

	};

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

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

  });

})(jQuery);

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


CSS

popswicks-d.css


/* popswicks-d.css 日本語 */

/*外枠は必ず設定する*/
#popswicks-wrap {
	width:640px;
	height:260px;
	background-color: #000000;
	text-align:center;/*中央補正*/
	overflow: hidden;
}

/*以下JSで自動修正されます*/
#popswicks-wrap ul {
	position: relative;
	list-style: none;
	margin: 0 auto;/*中央補正*/
	padding: 0;
	text-align:left;/*中央補正の場合に重要*/
	background-color:none;
	overflow: hidden;
}
#popswicks {
	width:640px;
	height:260px;
}
#popswicks li{
	list-style: none;
	display: inline;
	position: absolute;
	top:0;left:0;
	width: 100%;
	height: auto;
	padding: 0;
	margin-right: 0px;
	background-color:#000000;/*標準*/
	overflow: hidden;
}
#popswicks .boxlable{
	position: absolute;
	top:0;left:0;
	width:24px;
	height:260px;
	background:url('/main/images/popswicks_back.gif') repeat;
	background-color:none;
	cursor:default;
}
#popswicks .boxlable.hovered_wicks{
	background-color:#555555;
}

#popswicks .boxbase{
	position: absolute;
	top:0;left:0;
	width:520px;
	height:260px;
	background-color:none;
	/*cursor: pointer;*/
}

#popswicks .boxbase .wicks_link{
	width:60px;
	height:21px;
}
#popswicks .boxbase a {
	text-decoration:none;
}
#popswicks .boxbase a img {
	margin:10px 0 0 10px;
	border:none;
	text-decoration:none;
}

収容する外枠のCSSは使用者が直接訂正ください。現在中央表示になっています。


画像

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

  
ボタン画像、wicks_btn.gif 60x21 背景透過画像、popswicks_back.gi 20x20矢印画像、popswicks_arrow.gif 20x20
サンプル画像、520x260

前ページに掲載しています: jQueryホリゾンタルアコーディオン3


画像はトヨタ自動車(株)の壁紙を引用しています。

【画像引用】toyota.jp: TOYOTA


以上です。




[ この記事のURL ]


タグ:series , Accordion , jquery

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

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

 

ブログ記事一覧

年別アーカイブ一覧



[1]