POPSブログ

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

123

  Category:  jquery2012/06/22 pops 

jQueryその他のアコーディオン2、コンテンツ内部で使用する画像用アコーディオンである。単なるアコーディオンであって、余り意味のあるものではない。

 

画像用アコーディオン(clickタイプ)


画像用Accordion サンプル

前のアコーディオンはメニューなどで応用するものでしたが、これはコンテンツ内部での画像用アコーディオンである。単に目的の画像ブロックを非表示にしておき、アクションがあれば表示するものである。アコーディオンというべきかは微妙である。使用することにより、ページの高さを抑えることが出来る。

  • ページ内のコンテンツの中で使用する事を目的にしています。
  • 前ページの記事「jQueryその他のアコーディオン1」のコンテンツ部分が画像に変わっただけです。
  • 使い道は在るんでしょうか、疑問におもいます。何らかの組み合わせにする等のアイデアが必要です。
    何でも隠したいかたには重要なアイテムかも知れません!。

toggleクリック関数「非推奨」の理由により、clickクリック関数に一部書き換えました。尚、jquery-2.0では完全に削除されましたので、toggleクリック関数が動作するのはjquery-1.9までとなります。

● このページの Example4 は 2012/11/22、2013/01/29、toggle形式でないものに修正しました。


単純な画像用(div 使用、clickタイプ)

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


Example4 開閉形(FADE)

ImageContents-Accordion4

Example4は、toggleを使用しない形式のJSが作動しています。


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

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

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


Example5 開閉連動形(SLIDE)

ImageContents-Accordion5


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

Example6 開閉連動形(SLIDE、上の Example5 と同じものです)

ImageContents-Accordion6

このようにすれば、使い道もありそうなものです。画像というよりもコンテンツですが、、、。


IMGコンテンツ、LightBox表示サンプル



簡単な LightBox と組み合わせて見ました。サムネールをクリックください。大きな画像を表示します。


【参考】当方の記事: jqueryで簡単なLightBoxを作る




HTML JS CSS

3種類、マトメテ書いてありますので、好みのものを選定ください。


HTML

コンテンツ内部、にサンプルと同様に記述して使用します。


---Example4---
	<div class="accord-title4"><p>IMGコンテンツサブタイトル1</p></div>
	<div class="accord-imgbox">
		<img src="/main/images/photo_m1.jpg" width="640" height="200" />
	</div>

	<div class="accord-title4"><p>IMGコンテンツサブタイトル2</p></div>
	<div class="accord-imgbox">
		<img src="/main/images/photo_m2.jpg" width="640" height="200" />
	</div>

	<div class="accord-title4"><p>IMGコンテンツサブタイトル3</p></div>
	<div class="accord-imgbox">
		<img src="/main/images/photo_m3.jpg" width="640" height="200" />
	</div>

---Example5---
	<div class="accord-title5">IMGコンテンツサブタイトル1</div>
	<div class="accord-imgbox5">
		<img src="/main/images/photo_m3.jpg" width="640" height="200" />
	</div>
	<div class="accord-title5">IMGコンテンツサブタイトル2</div>
	<div class="accord-imgbox5">
		<img src="/main/images/photo_m4.jpg" width="640" height="200" />
	</div>
	<div class="accord-title5">IMGコンテンツサブタイトル3</div>
	<div class="accord-imgbox5">
		<img src="/main/images/photo_m5.jpg" width="640" height="200" />
	</div>

---Example6---
	<div class="click-point">IMGコンテンツ、LightBox表示サンプル</div>
	<div class="open-box">
		<br />
		<table>
		<tr>
		<td><a herf="javascript:void(0);"><img src="/main/images/toyota_car01s.gif" /></a></td>
		<td><a herf="javascript:void(0);"><img src="/main/images/toyota_car01s.gif" /></a></td>
		<td><a herf="javascript:void(0);"><img src="/main/images/toyota_car01s.gif" /></a></td>
		</tr>
		</table>
		<br />
	</div>

画像用としているが、文章を書けないものではない。前ページの記事のアコーディオンでも画像は埋め込みできます。
画像用などは使用者が用意ください。Example6は LightBox の部分削除しています。


JS

[ Example4 ]

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

Example4は、toggleを使用した形式と、toggleを使用しない形式と2つ記載しています。現在、toggleからclickに変更したJSが動作しています。


● 通常click方式


(function($){
	//Example4 accordion-image2
	//click形式
	$(function(){

		//一旦消す
		$('.accord-title4').next('div').hide();

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

			//active切り替え
			$(this).toggleClass("active");

			//fadeToggleアニメ
			$(this).next('div').fadeToggle('slow');

		});

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

	});

})(jQuery);


● hidden判定方式 toggle方式


(function($){
	//Example4 accordion-image2
	//hidden判定方式
	$(function(){

		//一旦消す
		$('.accord-title4').next('div').hide();
		//複数あるのでeachで処理
		$('.accord-title4').each(function() {
			//click-ACTION
			$(this).click(function() {

				//何回も使うのでオブジェクトに代入
				var subitem=$(this).next('div');
				//閉じていれば
				if (subitem.is(':hidden')) {
					$(this).addClass("active");
					subitem.fadeIn('slow');
				} else {
					$(this).removeClass("active");
					subitem.fadeOut('slow');
				}
			});
		});

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

	});

})(jQuery);

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

(function($){

	//Example4 accordion-image
	//toggle形式 jquery-1.9まで

	$(function(){

		//一旦消す
		$('.accord-title4').next('div').hide();
		//toggle-ACTION
		$('.accord-title4').toggle(
			function () {
				$(this).addClass("active");
				$(this).next('div').fadeIn('slow');
			},
			function () {
				$(this).removeClass("active");
				$(this).next('div').fadeOut('slow');
			}
		);
		//hover-ACTION
		$('.accord-title4').hover(
			function () {
  				$(this).addClass("hover");
			}, 
			function () {
  				$(this).removeClass("hover");
			}
		);
	});

})(jQuery);


【toggleを使用しないJSを追加しました】、 Example4 はaccordion-image2 click形式を使用ください。Jquery1-8.2でも確認済みです。将来toggle機能が削除されるのでこちらが安心です。


Example4をスライド方式にする


現在は透過処理です
//fadeToggleアニメ jquery-1.4.4拠り有効
$(this).next('div').fadeToggle('slow');

-----------------------------------------------
スライドにする
$(this).next('div').slideToggle('slow');

-----------------------------------------------
短時間でパッと表示 show
$(this).next('div').toggle('fast');

hover-ACTION部分は、以下のようであっても機能する。但し、function が別々あれば細やかな処理が可能だ。


//hover-ACTION
$('.accord-title4').hover(function () {
  	$(this).toggleClass("hover");
});

閉じているかの判定、':hidden'を使用したが、「IE8」での判定があやふやだとの情報もあるが、機能しています。
判定の方法は沢山あるので、問題が有れば状況に応じてかえればよい。


toggleクリック関数が「非推奨」になったため、通常click方式で条件分岐が大変である。こんなときは、hidden判定等で詳細処理ができる。また、hasClass()で判定する方法もある。


jquery独自の擬似要素、hiddenを使用した

閉じているか判定する、subitemは$(this).next('div')、つまり直下のDIVである
if (subitem.is(':hidden')) {

visibleを使用すれば
if (!subitem.is(':visible')) {

高さ、幅があるかでも判定できる


[ Example5 6 ]


(function($){
	//Example5 accordion-image
	$(function(){

		//一旦消す
		$('.accord-title5').next('div').hide();

		//ACTION
		$('.accord-title5').click(function() {
			$(this).next('div').slideToggle('slow')
			.siblings('div.accord-imgbox5:visible').slideUp('slow');
			$(this).toggleClass("active");
			$(this).siblings("div.accord-title5").removeClass("active");
		});

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

})(jQuery);

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

(function($){
	//Example6 accordion-image
	$(function(){

		//一旦消す
		$('.click-point').next('div').hide();

		//ACTION
		$('.click-point').click(function() {
			$(this).next('div').slideToggle('slow')
			.siblings('div.open-box:visible').slideUp('slow');
			$(this).toggleClass("active");
			$(this).siblings("div.click-point").removeClass("active");
		});

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

})(jQuery);

不要な部分は削除して使用ください。


CSS

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


/* Example4 */
.accord-title4 {
	display:block;
	width:auto;
	_width:633px;
	height:16px;
	padding:0 2px 4px 10px;
	_padding:0 2px 2px 5px;
	border-top:2px #FFFFFF solid;
	color:#FFFFFF;
	background:url(/main/images/arrow_6.gif) no-repeat;
	background-position:right 0;
	background-color:#D2B4BC;
	cursor:pointer;
}
.accord-title4.hover {
	background-color:#E0CCD1;
}
.accord-title4.active {
	background-position:right -20px;
}
/*box*/
.accord-imgbox {
	display:block;/*意識的にblockにしている*/
	width:640px;
	height:200px;
	background-color:#000000;
}
/*image*/
.accord-imgbox img {
	display:block;/*意識的にblockにしている*/
	border-style:none;
}


/* Example5 */
.accord-title5 {
	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-title5.hover {
	background-color:#40E0D0;
}
.accord-title5.active {
	background-position:right -20px;
}
/*box*/
.accord-imgbox5 {
	display:block;/*意識的にblockにしている*/
	width:640px;
	height:200px;
	background-color:#000000;
}
/*image*/
.accord-imgbox5 img {
	display:block;/*意識的にblockにしている*/
	border-style:none;
}


/* Example6 */
.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にしている*/
	width:640px;
	height:auto;
	background-color:#000000;
}
.open-box img {
	display:block;/*意識的にblockにしている*/
	border-style:none;
}

上記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 ]


タグ:series , Accordion , jquery

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

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

 

ブログ記事一覧

年別アーカイブ一覧



[1]