POPSブログ

jQuery 自動開閉アコーディオン 快気祝いだ!

201

  Category:  jquery2013/02/11 pops 

拝啓、毎度お馴染み、jQuery slideToggle()で作った、自動開閉アコーディオンですが、早速、胃腸科で診断結果「腸ねん転」という事で、3分間手術で「快気祝い」と相成りました。ここに、謹んでご報告申しあげます。胃腸快調絶好調!、只今上下運動中 アーソレ。.....敬具。

 

jQuery setTimeout自動開閉アコーディオン、リハビリ中、みんなで動けば怖くない!

少しせわしい、、、。動かす順序を変えただけだ。これが面白いと感じればそれで良い。


Example


ACCORDION-NEWS-3、slideToggle()形式

MENUブロックを「クリック」しても開くことが出来ます。(タイマーは再セットされます)


MENUお題目

MENUブロック1

リンク1
リンク2
リンク3
リンク4

MENUブロック2

リンク1
リンク2
リンク3
リンク4

MENUブロック3

リンク1
リンク2
リンク3
リンク4

MENUブロック4

リンク1
リンク2
リンク3
リンク4

MENUブロック5

リンク1
リンク2
リンク3
リンク4


▼下のボタンで少し変更を見ることが出来ます。


背景色の切替 :                         :初期値 #FFFFFF

タイトル背景色の切替 :                       :初期値 #00CED1



テスト的に、slideToggle() 形式で作っているにすぎない。

HTML JS CSS


HTML

HTML、「dl dt」構成です。「MENUブロック」増減可能、但し全体の高さを再計算して、CSS修正。

IDが外側 #slide-news-box3、内側 #slide-news-block3、になっているのに注意。
外側の装飾が無く、内側 #slide-news-block3 だけでも動作します。


<div id="slide-news-box3">
	<div class="slide-news-head3"><h2>MENUお題目</h2></div>
	<div id="slide-news-block3">
		<h3>MENUブロック1</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
		<h3>MENUブロック2</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
		<h3>MENUブロック3</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
		<h3>MENUブロック4</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
		<h3>MENUブロック5</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
	</div>
</div>


JS

accordion-news3.js 適当な名前で保存して使用する。


//accordion-news3.js
//slideToggle

(function($){

	//slideToggle形式
	$(function(){

		var slide_speed=400;//200-800
		var time=5000;// 5000-10000
		var no=0;//オープン指定番号 0-

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

		var timerID=null;
		var index_no=0;
		var len=0;

		//オブジェクト保存
		var newsBox=$('#slide-news-block3');
		//オープン指定番号要素保存
		var openItem=$('#slide-news-block3').find('h3').next('dl').eq(no);
		len=newsBox.find('h3').length;

		//一旦消す
		newsBox.find('dl').hide();

		//active要素を指定して開く
		openItem.show().prev('h3').addClass('active');
		//timer-SET
		index_no=no;
		timerID=setTimeout(next_set,time);

		//click-ACTION
		newsBox.find('h3').click(function() {

			//開いている場合は実行しない/くずれる
			if ($(this).hasClass('active')) {return false}

			clearTimeout(timerID);
			index_no=newsBox.find('h3').index(this);
			var item=$(this);
			move(index_no);
		});
		
		//slideToggle
		function move(opno) {

			var opnumber=opno;
			var hitItem=newsBox.find('h3').eq(opnumber);

			openItem=hitItem.next('dl');
			var siblingsItem=openItem.siblings('dl:visible');

			//先に他を閉じてから開く
			siblingsItem.slideToggle(slide_speed,function () {

				siblingsItem.siblings('h3').removeClass('active');
				hitItem.addClass('active');
				openItem.slideToggle(slide_speed);

				//timerをセットする
				timerID=setTimeout(next_set,time);
			});

		}

		//next
		function next_set() {
			index_no +=1;
			if (index_no > (len-1)) {index_no=0;}
			move(index_no);
		}
	});

})(jQuery);

アニメの順序を変えただけです。


CSS

accordion-news3.css 適当な名前で保存して使用する。画像パスなどは環境にあわせる。


/* accordion-news3.css 日本語 */

/*-----外部部構造3-----*/
#slide-news-box3 {
	position:relative;
	width:200px;
	height:290px;
	margin:0;
	padding:0;
	text-align:left;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background-color:#00CED1;
}
#slide-news-box3 .slide-news-head3 {
	display:block;
	width:200px;
	height:30px;
}
#slide-news-box3 .slide-news-head3 h2{
	width:auto;
	height:30px;
	margin:0;
	padding:0 10px;
	font-size:13px;
	color:#000000;
	line-height:30px;
}


/*-----内部構造3-----*/
#slide-news-block3 {
	position:relative;
	left:0;top:0;
	display:block;
	width:200px;
	height:250px;
	background:url(/main/images/sky_back.jpg) no-repeat;
	background-color:#FFFFFF;
	overflow:hidden;
}
#slide-news-block3 h3 {
	width:auto;
	height:19px;
	margin:0;
	padding:0 0 0 10px;
	border-top:1px #FFFFFF solid;
	line-height:20px;
	color:#FFFFFF;
	font-size:12px;
	background:url(/main/images/arrow_5.gif) no-repeat;
	background-color:#BBBBBB;
	background-position:right 0px;
	cursor:default;/*pointer*/
}

/*-----OPEN指定-----*/
#slide-news-block3 h3.active {
	background-position:right -21px;
	background-color:#555555;
}

/*-----擬似:hover-----*/
#slide-news-block3 h3:hover {
	background-color:#AAAAAA;
}


/*-------- DL DT -------------*/
#slide-news-block3 dl {
	display:block;
	width:auto;
	height:150px;
	margin:0;
	padding:0;
}
#slide-news-block3 dl dt {
	list-style:none;
	height:auto;
	margin:1px 5px;
	padding:0;
	text-align:left;
	font-size:12px;
	font-weight:normal;
	line-height:150%;
	border-bottom:1px #CCCCCC solid;
}
#slide-news-block3 dl dt a {
	text-decoration:none;
	color:#BBBBBB;	
}
#slide-news-block3 dl dt a:hover {
	background-color:#EFEFEF;
	color:#000000;
}
#slide-news-block3 dl dt a:active {
	color:#555555;
}


簡単な説明


「DL階層」を、slideToggle()で動かすように作った為に、HTMLの性質に多少は左右されます。出来上がりはともかく改造は仕易い。一緒に動けばその様なものだと錯覚する、このサンプルもゴマカシに過ぎない。
動きに問題があれば、前々ページの「位置を決定してアニメでスライド」する形式のものを推奨します。


●「DL」の高さは必ず設定します。設定なき場合は旨く動作しません。内枠(#slide-news-block3)は、外枠の装飾無しに「単独動作可能」です。外枠など(#slide-news-box3、.slide-news-head3)は装飾のラップです。


● 内枠高さ計算 (#slide-news-block3)、要素の数、高さなど変更の度に再計算しなければならない。
内枠高さ = 内部スライド要素の数 x タイトルの高さ + DLの高さ
サンプル例: 20 x 5 + 150 = 250


● 内部の要素にY方向の padding margin などがあると、下層の背景、または文字などが隙間から出る場合があります。(見苦しい)


「DL」構造を「UL」構造に変更の場合は、CSS JS共に該当部分の修正が必要です。
slideToggle()などは、jquery標準のアニメですから簡単に使用可能でアコーディオン向きです。但し、どのような構造時も最適に対処は難しいので何処で妥協するか、あるいはカスタムアニメanimate()で細やかに処理するかの手数である。




画像

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

使用背景画像

背景の位置を変えればデザインの変更が可能です。使用画像以外の画像の場合は使用者がCSSを変更ください。


透過矢印画像 arrow_9.gif 19x40 透過矢印画像 arrow_6.gif 19x40 透過矢印画像 arrow_7.gif 19x40 透過矢印画像 arrow_5gif 19x40 快気画像 sky_back.jpg 250x250

追伸、快気画像は「熨斗袋」のほうが喜ばれると思います。あのよろし。


HTMLの性質で下部が少し動く(離れれば判らない)。slideToggle()形式、気にしない性格であればOKだ。

【参照】当方の記事: jQuery 自動開閉アコーディオン


位置を決定してアニメでスライドしているので下部が動かない形式。推奨

【参照】当方の記事: jQuery setTimeout自動開閉アコーディオン


以上、「快気祝い」の報告でした。

 


[ この記事のURL ]


タグ:jquery , Accordion , memo

 

ブログ記事一覧



[1]