POPSブログ

jQueryその他のアコーディオン/3

124

  Category:  jquery2012/06/24 pops 

jQueryその他のアコーディオン3、通常は記述が簡単ですから、siblings を使用して製作する場合が多いかとおもいます。siblings を使用しない番号指定方式にしたアコーディオンです。利用価値があるかは「不明瞭」ですから当方でも利用は考えていません。


番外アコーディオン(clickタイプ)


番外 Accordion サンプル

siblings を使用して製作する場合簡単ですが、jQueryの標準アニメを使用するのが前提になります。オリジナルアニメを使用の場合に必ずしも「アコーディオン対象ブロック」を非表示にするとは限りません。そんな時 siblings での判定が出来なくなることがあります。
slideUp slideDown slideToggle 以外の処理を加えたい、前後に少し別のアクションを入れたいなどの時、少し困ることがあります。siblingsを使用しないスクリプトを書いて見ました。当然長くなります。


  • siblings での判定の出来ない、オリジナルアニメ用です。
  • 押されたブロックの番号を基準に開閉しています。
  • 単に作ってみただけであり、現在使用する予定はありません。(下の記載JS参照)
  • ブロックを横に並べ上下に開閉する、アコーディオンMENUには応用可能かも?。

siblings('.xxxxxxxx:visible') は、jQueryの独自のCSS拡張機能による「表示非表示」判定方法ですから、マスクなどにより隠している場合の判定には向きません。jQueryの標準アニメを使用が前提の、jQuery製作者に仕組まれた「特殊な判定方法」「標準アニメ活用方法」といえます。
下記のサンプルは動作は通常のアコーディオンと同じですが、中に色々書き込んだり改造に便利なよう「雌形」として書いたものです。


単純な画像用(div 使用、clickタイプ、siblingsを使用しない番号指定)

下の「タイトルブロック」をクリックください。


Example7 開閉連動形(SLIDE) animate方式

ImageContents-Accordion7 toggle / アニメ中は「Click」は機能しません


IMGコンテンツサブタイトル1
IMGコンテンツサブタイトル2
IMGコンテンツサブタイトル3

Example8 開閉連動形(SLIDE) slideToggle方式

ImageContents-Accordion8 toggle / 標準アニメ使用ですからsiblings判定は可能です。


IMGコンテンツサブタイトル1
IMGコンテンツサブタイトル2
IMGコンテンツサブタイトル3

Example9 超手抜き形(アニメを使用しない、display切り替え)

Contents-Accordion9 toggle / 普通のAccordionです。

アニメを使用しないので、切り替えが早い、負荷がかからない、よって性能の悪いマシン環境に最適です。




HTML JS CSS

3種類、マトメテ書いてありますので、好みのものを選定ください。Example9 超手抜き形のサンプルになっています。


Example9サンプル [ HTML JS CSS ] を表示します。

HTML

コンテンツ内部、にサンプルと同様に記述して使用します。
Example7 8 はラップされていますが、ラップを削除する場合は、CSSも変更ください。


---Example7---
<div id="accord-wrap">
	<div class="accord-title7">IMGコンテンツサブタイトル1</div>
	<div class="accord-imgbox7">
		<div class="imginner"><img src="/main/images/photo_m1.jpg" /></div>
	</div>
	<div class="accord-title7">IMGコンテンツサブタイトル2</div>
	<div class="accord-imgbox7">
		<div class="imginner"><img src="/main/images/photo_m2.jpg" /></div>
	</div>
	<div class="accord-title7">IMGコンテンツサブタイトル3</div>
	<div class="accord-imgbox7">
		<div class="imginner"><img src="/main/images/photo_m3.jpg" /></div>
	</div>
</div>

---Example8---
<div id="accord-wrap2">
	<div class="accord-title8">IMGコンテンツサブタイトル1</div>
	<div class="accord-imgbox8">
		<div class="imginner"><img src="/main/images/photo_m1.jpg" /></div>
	</div>
	<div class="accord-title8">IMGコンテンツサブタイトル2</div>
	<div class="accord-imgbox8">
		<div class="imginner"><img src="/main/images/photo_m2.jpg" /></div>
	</div>
	<div class="accord-title8">IMGコンテンツサブタイトル3</div>
	<div class="accord-imgbox8">
		<div class="imginner"><img src="/main/images/photo_m3.jpg" /></div>
	</div>
</div>

---Example9---
<div class="click-point">Example9サンプル [ HTML JS CSS ] を表示します。</div>
<div class="open-box">

ここに表示非表示させるコンテンツを入れる

</div>

画像用としているが、文章を書けないものではない。前ページの記事のアコーディオンでも画像は埋め込みできます。


JS

基本的に、常時読み込むJSに書き込みます。または適当な名前で保存して使用します。使用しないExampleは削除。


(function($){

	//Example7 画像スライド専用/siblingsは使用していない
	$(function(){

		//一旦高さを縮小して消すアイテムを閉じる
		//innerをtopにセット
		$('.imginner').css({'top':0});
		//アイテムを閉じる高さ0
		$('.accord-imgbox7').css({'height':0});

		var openitems=[];//close openの記録
		var items=[];//hitItem保存配列
		var imgitems=[];//画像BOX保存配列
		var imginners=[]//画像BOX INNER

		//保存配列のセット
		$('.accord-title7').each(function(i) {
			items[i]=$(this);
			imgitems[i]=$(this).next('div');
			openitems[i]=false;//false CLOSE
		});

		//画像BOXの高さ
		var h=200;
		//押された番号の保存、未使用
		keep_no=-1;
		//delay処理
		var delayflag=false;
		//move中はクリックを受け付けない
		var moveyflag=false;

		//click-ACTION
		$('.accord-title7').click(function (e) {

			//move中はクリックを受け付けない
			if (moveyflag) {return false;};

			//押されたアイテムの番号取得
			var index=$('.accord-title7').index(this);
			hit_no=index;

			//hit番号以外で開いているアイテムを閉じる
			delayflag=false;
			//キー受付
			moveyflag=true;
			//クリア
			clearItem(hit_no);//roopで探す

			//moveItemに分離した

		});

		//moveItem
		function moveItem() {

			//hit番号CLOSEならばOPEN、ここを別のfunctionにしたほうが良い
			//OPEN
			if (!openitems[hit_no]) {
				items[hit_no].addClass("active");
				imgitems[hit_no].animate({'height':h},600,function(){
					openitems[hit_no]=true;
					//キー受付
					moveyflag=false;
					return false;
				});
			} else {
				//CLOSE
				items[hit_no].removeClass("active");
				imgitems[hit_no].animate({'height':0},600,function(){
					openitems[hit_no]=false;
					//キー受付
					moveyflag=false;
					return false;
				});
				
			}
		}	

		//他に開いていれば閉じる
		function clearItem(no) {

			//roop処理
			var no_v=0;
			var i=0;
			for(i=0; i < openitems.length; i++) {
				if (no != i && openitems[i]) {
					no_v=i;
					delayflag=true;
					break;
				}
			}

			if (delayflag) {
				//開いていれば閉じる
				openitems[no_v]=false;
				items[no_v].removeClass("active");
				imgitems[no_v].animate({'height':0},400,function() {
					//moveItem
					moveItem();
				});
			}
			if (!delayflag) {moveItem();}
		}

		//hover-ACTION
		$('.accord-title7').hover(
			function () {
  				$(this).addClass("hover");
			}, 
			function () {
  				$(this).removeClass("hover");
			}
		);
	});

})(jQuery);


(function($){

	//Example8 画像スライド専用/siblingsは使用していない
	//アニメの後何らか処理できるようにfunctionをつけた
	$(function(){

		//押されたアイテム番号
		var hit_no=0;
		//番号保存変数、初期値-1
		var keep_no = -1;
		//アイテム保存変数
		items=[];

		//保存配列のセット/閉じる
		$('.accord-title8').each(function(i) {
			//保存配列にアイテム保存
			items[i]=$(this);
			//全てを閉じる、全てremove activeクラス処理
			$(this).next('div').hide().removeClass("active");

		});

		//クリックアクション設定
		$('.accord-title8').click(function() {

			//要素の番号を取得
			var hit_no=$('.accord-title8').index(this);

			//番号同じ処理、番号違い処理の上に書くこと
			//開く閉じるのToggle処理
			if (keep_no == hit_no) {
				items[hit_no].next('.accord-imgbox8').slideToggle('slow',function() {
					items[hit_no].toggleClass("active");
					//番号保存
					keep_no = hit_no;
					return false;
				});
			}
			//番号違い処理
			if (keep_no != hit_no) {
				//最初-1の時1回だけ実行
				if (keep_no < 0) {
					//activeクラス処理/slideToggle()でも良い
					items[hit_no].addClass("active");
					items[hit_no].next('.accord-imgbox8').slideDown('slow');
					keep_no=hit_no;
					return false;
				}
				//開いている要素があれば最初に閉じる
				if (keep_no >= 0) {
					items[keep_no].removeClass("active");
					items[keep_no].next('.accord-imgbox8').slideUp('slow',function() {
						//activeクラス処理
						items[hit_no].toggleClass("active");
						items[hit_no].next('.accord-imgbox8').slideToggle('slow',function() {
							//番号保存
							keep_no = hit_no;
							return false;
						});

					});
				}

			}

		});

		//hover-ACTION
		$(".accord-title8").hover(
			function () {
  				$(this).addClass("hover");
			}, 
			function () {
  				$(this).removeClass("hover");
		});

	});
})(jQuery);

//Example9/CSS display
(function($){

	$(function(){

		//一旦CSSで消す
		$('.click-point').next('div.open-box').css({'display':'none'});

		//toggle-ACTION、CSSで表示非表示切り替え
		$('.click-point').toggle(
			function() {
				$(this).next('div.open-box').css({'display':'block'});
				$(this).addClass("active");
			},
			function() {
				$(this).next('div.open-box').css({'display':'none'});
				$(this).removeClass("active");
			}
		);

		//hover-ACTION
		$('.click-point').hover(
			function () {
  				$(this).addClass("hover");
			}, 
			function () {
  				$(this).removeClass("hover");
			}
		);
	});

})(jQuery);

.accord-imgbox .imginner imgと3種のブロックを動かせば面白いのではとは考えますが、アコーディオンの動きがあるため制約がありすぎ良いものが出来難いのが原因かな。面倒なだけで応用範囲が狭い。


参考、Example7のjsで判定方法の違うもの


//accordion-u2.js
(function($){

	//Example7 画像スライド専用/siblingsは使用していない
	$(function(){

		//一旦高さを縮小して消すアイテムを閉じる
		//innerをtopにセット
		$('.imginner').css({'top':0});
		//アイテムを閉じる高さ0
		$('.accord-imgbox7').css({'height':0});

		var openitems=[];//close openの記録
		var items=[];//hitItem保存配列
		var imgitems=[];//画像BOX保存配列
		var imginners=[]//未使用

		//保存配列のセット
		$('.accord-title7').each(function(i) {
			items[i]=$(this);
			imgitems[i]=$(this).next('div');
			openitems[i]=false;//false CLOSE
		});

		//画像BOXの高さ
		var h=200;
		//押された番号の保存
		keep_no=-1;
		//delay
		var delayflag=false;
		//move中はクリックを受け付けない
		var moveyflag=false;

		//click-ACTION
		$('.accord-title7').click(function (e) {

			//move中はクリックを受け付けない
			if (moveyflag) {return false;};

			//押されたアイテムの番号取得
			var index=$('.accord-title7').index(this);
			hit_no=index;

			//hit番号以外で開いているアイテムを閉じる
			//clearItemでアニメするためにdelay
			delayflag=false;
			//キー受付
			moveyflag=true;
			//ダイレクトで処理
			clearItem2(hit_no);//keep_noでダイレクト

			//hit番号CLOSEならばOPEN、ここを別のfunctionにしたほうが良い
			//moveItemに分離した

		});

		//moveItem
		function moveItem() {

			//hit番号CLOSEならばOPEN、ここを別のfunctionにしたほうが良い
			//OPEN
			if (!openitems[hit_no]) {
				items[hit_no].addClass("active");
				imgitems[hit_no].animate({'height':h},600,function(){
					openitems[hit_no]=true;
					keep_no=hit_no;
					//キー受付
					moveyflag=false;
					return false;
				});
			} else {
				//CLOSE
				items[hit_no].removeClass("active");
				imgitems[hit_no].animate({'height':0},600,function(){
					openitems[hit_no]=false;
					keep_no=hit_no;
					//キー受付
					moveyflag=false;
					return false;
				});
				
			}
		}	

		//他に開いていれば閉じる2/ダイレクトで処理
		function clearItem2(no) {

			//最初はclear処理しない-1
			if (keep_no < 0) {keep_no=hit_no;moveItem();}

			//開いている番号が、現在番号と違えば閉じる
			if (no != keep_no) {
				delayflag=true;
				//開いていれば閉じる
				openitems[keep_no]=false;
				items[keep_no].removeClass("active");
				//CSSで閉じる、animateだと面倒になる
				//imgitems[keep_no].css({'height':0});
				imgitems[keep_no].animate({'height':0},400,function() {
					//moveItem
					moveItem();
				});
			} else {
				moveItem();
			}
		}

		//hover-ACTION
		$('.accord-title7').hover(
			function () {
  				$(this).addClass("hover");
			}, 
			function () {
  				$(this).removeClass("hover");
			}
		);
	});

})(jQuery);

CSS

基本的に、常時読み込むCSSに書き込みます、または適当な名前で保存して使用します。
Example7 8 はラップされた状態です。高さは使用者が決定ください。ラップは削除可能です。



/* Example7 */
#accord-wrap {
width:auto;
_width:629px;
height:270px;
background-color:#000000;
}
#accord-wrap .accord-title7 {
display:block;
width:auto;
_width:629px;
height:16px;
padding:0 2px 4px 10px;
_padding:0 2px 2px 10px;
border-top:2px #FFFFFF solid;
color:#FFFFFF;
background:url(/main/images/arrow_5.gif) no-repeat;
background-position:right 0;
background-color:#48D1CC;
cursor:pointer;
}
#accord-wrap .accord-title7.hover {
background-color:#40E0D0;
}
#accord-wrap .accord-title7.active {
background-position:right -20px;
}
/*box*/
#accord-wrap .accord-imgbox7 {
position: relative;
display:block;/*意識的にblockにしている*/
width:640px;
height:200px;
background-color:#000000;
overflow:hidden;
}
#accord-wrap .accord-imgbox7 .imginner {
position: absolute;
top:0;left:0;
display:block;/*意識的にblockにしている*/
width:640px;
height:auto;
background-color:#000000;
}
/*image*/
#accord-wrap .accord-imgbox7 .imginner img {
display:block;/*意識的にblockにしている*/
width:640px;
height:200px;
border-style:none;
}


/* Example8 */
#accord-wrap2 {
width:auto;
_width:629px;
height:270px;
background-color:#000000;
}
#accord-wrap2 .accord-title8 {
display:block;
width:auto;
_width:629px;
height:16px;
padding:0 2px 4px 10px;
_padding:0 2px 2px 10px;
border-top:2px #FFFFFF solid;
color:#FFFFFF;
background:url(/main/images/arrow_5.gif) no-repeat;
background-position:right 0;
background-color:#778899;
cursor:pointer;
}
#accord-wrap2 .accord-title8.hover {
background-color:#B0C4DE;
}
#accord-wrap2 .accord-title8.active {
background-position:right -20px;
}
/*box*/
#accord-wrap2 .accord-imgbox8 {
position: relative;
display:block;/*意識的にblockにしている*/
width:640px;
height:200px;
background-color:#000000;
overflow:hidden;
}
#accord-wrap2 .accord-imgbox8 .imginner {
position: absolute;
top:0;left:0;
display:block;/*意識的にblockにしている*/
width:640px;
height:auto;
background-color:#000000;
}
/*image*/
#accord-wrap2 .accord-imgbox8 .imginner img {
display:block;/*意識的にblockにしている*/
width:640px;
height:200px;
border-style:none;
}



/* Example9 */
.click-point {
display:block;
width:auto;
_width:628px;
height:16px;
padding:0 2px 4px 10px;
_padding:0 2px 2px 10px;
border-top:2px #FFFFFF solid;
color:#FFFFFF;
background:url(/main/images/arrow_5.gif) no-repeat;
background-position:right 0;
background-color:#FF1493;
cursor:pointer;
}
.click-point.hover {
background-color:#555555;
}
.click-point.active {
background-position:right -20px;
}
/*box*/
.open-box {
display:block;/*意識的にblockにしている*/
margin:0;
padding:0;
background-color:none;
}

クラス名などは変更可能です。その場合はJSの該当部分のクラス名を変更しなければなりません。
上記CSSは、ページのCSSに影響される場合があります。使用者が適正に修正ください。上記CSSは単なる一例です。

Opera Safariで、初期状態が、画像および画像収容BOXなどが display:none であると、HTMLに記述しておいても、「画像を先に読み込まない」場合がありますので注意ください。(画像をプリロードしておきキャッシュすれば防げるが面倒である)





画像

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

使用透過背景画像

arrow.gif / 使用画像以外の画像の場合は使用者がCSSを変更ください。


arrow_2.gif
20x44 透過画像
arrow_3.gif
15x40 透過画像
arrow_4.gif
15x40 透過画像
arrow_5.gif
19x40 透過画像
arrow_6.gif
19x40 透過画像

以上です。



[ この記事のURL ]


タグ:jquery , Accordion , series

[ jQueryその他のアコーディオン シリーズ記事 ]

jQueryその他のアコーディオン/32012.06.24
jQueryその他のアコーディオン/22012.06.22
jQueryその他のアコーディオン/12012.06.21

 

ブログ記事一覧

年別アーカイブ一覧



[1]