POPSブログ

jQuery setTimeout自動開閉アコーディオン

199

  Category:  jquery2013/02/09 pops 

ニュースサイトなどで見かける事がある、setTimeout利用「自動のアコーディオン」です。クリックして開く事も出来ます。

 

jQuery setTimeout自動開閉アコーディオン、animate()方式

通常の「アコーディオン」で slideToggle() を使用して作る事も可能ですが、高さが微妙に伸縮して見栄えが良くありませんので、高さを固定して animate() で処理しています。自動開閉の場合は、見損なうとまた「開く」まで時間がかかるのが欠点ですが、これは「クリックして開く」ことが可能です。


Example


ACCORDION-NEWS

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

中のタイトル部分にborderを表示するようにしています。Chromeで太さが時々変化するのはレンダリングの不具合と思います。何時の日か直ることでしょう。(テーブルのボーダーが切れる時がある)


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


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


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

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



HTML JS CSS


HTML

必要に応じて、スライド部品の「slide-news-chipクラス」を増やします。記載のリンクなどの数にもよりますが、表示の状況に応じて全体の高さなどを修正ください。(CSS.JSの高さ部分)


<div id="slide-news-box">
	<div class="slide-news-head"><h2>MENUお題目</h2></div>
	<div id="slide-news-block">
		<div class="slide-news-chip">
			<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>
		</div>
		<div class="slide-news-chip">
			<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>
		</div>
		<div class="slide-news-chip">
			<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>
		</div>
	</div>
</div>

適当な「ID」または「クラス」でラップして使用する。CSSは随意。


<div id="適当なIDまたはクラス">
	<div id="slide-news-block">
		<div class="slide-news-chip">
			<h3>MENUブロック1</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			</dl>
		</div>
		<div class="slide-news-chip">
			<h3>MENUブロック2</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			</dl>
		</div>
		<div class="slide-news-chip">
			<h3>MENUブロック3</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			</dl>
		</div>
	</div>
</div>

JS

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


//accordion-news.js
//setTimeout

//anime形式
(function($){

	$(function(){

		//初期設定
		//スライドブロックの高さ
		var boxHeight=250;
		//スライドチップのタイトルの高さ
		var title_H=20;
		//初期オープン指定番号 1番目=0 2番目=1
		var no=0;// 0-
		//スライド速度 200-800
		var slide_speed=400;
		//タイマー値 5000-10000
		var time=5000;

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

		//変数
		var timerID=null;
		var index_no=0;
		var len=0;

		//position関連変数
		var position_st=[];//初期標準位置保存配列
		var position_op=[];//オープン位置保存配列
		var position_cl=[];//クローズ位置保存配列

		//スライドチップ数
		len=$('#slide-news-block').find('.slide-news-chip').length;

		//配置位置を計算保存
		for (var i=0; i < len; i++) {
			//position保存、Y方向
			position_st[i]=(boxHeight/len)*i;
			position_op[i]=title_H*i;
			position_cl[i]= -title_H*(len-i)+boxHeight;
			if(i == 0) {position_cl[0]=0;position_op[0]=0;}//1番目補正
		}

		//オープン指定とタイマーSET
		index_no=no;
		open_set(index_no);//開く
		timerID=setTimeout(next_set,time);

		//click-ACTION
		$('#slide-news-block').find('h3').click(function() {

			//押された番号取得
			var item_no=$('#slide-news-block').find('h3').index(this);

			//開いている場合は実行しない
			if (item_no == index_no) {return false}

			//タイマークリア
			clearTimeout(timerID);
			index_no=item_no;
			open_set(index_no);//開く
			//タイマー再セット
			timerID=setTimeout(next_set,time);

		});

		//指定位置要素を開く
		function open_set(opno) {

			//active切り替え
			$('#slide-news-block').find('h3').removeClass('active');
			$('#slide-news-block').find('h3').eq(opno).addClass('active');

			//アニメ処理ループ
			$('#slide-news-block').find('.slide-news-chip').each(function(i) {
				if (opno >= i) {$(this).stop().animate({'top':position_op[i]},slide_speed);}
				else {$(this).stop().animate({'top':position_cl[i]},slide_speed);}
			});

		}

		//次ぎの開く要素を計算
		function next_set() {

			//次ぎの番号
			index_no +=1;
			if (index_no > (len-1)) {index_no=0;}

			//開く、タイマーセット
			open_set(index_no);
			timerID=setTimeout(next_set,time);
		}

	});

})(jQuery);


CSS

外部構造である、#slide-news-box、外部タイトル.slide-news-headクラス、は削除可能です。

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


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

/*-----外部構造-----*/
#slide-news-box {
	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-box .slide-news-head {
	display:block;
	width:200px;
	height:30px;
}
#slide-news-box .slide-news-head h2{
	width:auto;
	height:30px;
	margin:0;
	padding:0 10px;
	font-size:13px;
	color:#000000;
	line-height:30px;
}


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

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

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


/*-------- DL DT -------------*/
#slide-news-block .slide-news-chip dl {
	display:block;
	width:auto;
	margin:0;
	padding:0;
}
#slide-news-block .slide-news-chip 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-block .slide-news-chip dl dt a {
	text-decoration:none;
	color:#BBBBBB;
}
#slide-news-block .slide-news-chip dl dt a:hover {
	background-color:#EFEFEF;
	color:#000000;
}
#slide-news-block .slide-news-chip dl dt a:active {
	color:#555555;
}

#test-box-wrap {
width:300px;
padding:10px;
background-color:#DDDDDD;
}

「dl dt」及び「ul li」はページのCSSの影響を受ける場合があります。細部は修正ください。


簡単な説明


サンプルは「dl dt」で作成した。dl dtの場合の特性に注意ください。「ul li」でも自由に変更可能です。
jquery-1.6.4.min.js、jquery-1.8.2.min.js、jquery-1.9.0.min.js及びjquery-2.0.0b1.jsでOK


説明図


サンプルは図のように装飾のため、「#slide-news-box 階層」でラップして表示しています。中の「#slide-news-block 階層」が「アコーディオン本体」になります。

中の「dl dt」は JS の制約は受けませんので、各スライド層で違うデザイン内容にすることも可能です。


1.「アコーディオン本体」は #slide-news-block 階層になります。単独で動作可能です。
2.「ラップ層」#slide-news-box、「タイトル層」#slide-news-head、は装飾用で削除または変更など自由です。
3. 実際スライドしているのは「slide-news-chipクラス」です。中の「dl dt」は、「ul li」、「div」でも構成は自由です。
4.「slide-news-chipクラス」は追加出来ますが、全体の大きさは固定されますので状況に応じ高さを変更します。JS CSS とも同じ値にする事。
5. JS初期設定は、JS上部を参照ください。
● スライドブロックの高さ boxHeight、必ず #slide-news-block の高さの値である事。
● スライドチップのタイトルの高さ title_H、配置間隔ですから、通常タイトルの高さを設定、大きければ隙ができるし小さければ重なります。
角丸はCSS3で行っています。デザイン、その他の変更などは自由です。


「slide-news-chipクラス」の内部変更

スライドする内部の変更です。現在は「dl dt」で構成していますが「ul li」、「div」でも自由に変更可能です。
但しタイトル部分は「クリック」した時の「トリガー」になっていますので残します。現在は[h3]を使用しています。[h4]等に変更の場合は、JSの該当部分を変更ください。(下記「h3 を h4 に変更する場合」参照)


● 「dl dt」以外にする場合、CSSは当然変更ください。


UL LIで構成の例
<h3>MENUブロック</h3>
<ul>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>

DIVで構成の例
<h3>MENUブロック</h3>
<div>
<p>説明文などの文章.......<br /><a href="">リンク</p></p>
</div>


● h3 を h4 に変更する場合


h3を探しているので、h4ならば
$('#slide-news-block').find('h3')...............

以下のように変更する
$('#slide-news-block').find('h4')...............

自動だけにして、「クリック」して「開く」機能を削除する

自動だけあればよいと言う場合、次ぎの2つの方法があります。


該当箇所、以下の部分を全て削除するか、実行しないようにする

//click-ACTION
$('#slide-news-block').find('h3').click(function() {

	内部省略

});

あるいは、条件で使用するように、修正する、clickopen_use が "use" の場合実行
これだとその都度設定できる、判定、書き方は自由

var clickopen_use="use";

if (clickopen_use == 'use') {
	//click-ACTION
	$('#slide-news-block').find('h3').click(function() {

		内部省略

	});
}

ID (#slide-news-block) の部分をオブジェクト保存して、動作を早くする。

$('#slide-news-block')の実行が複数箇所ありますので、以下のようにすれば幾分速くなる。


JSの始まりで、オブジェクト保存する(変数名は任意)
var newsBlock=$('#slide-news-block');

以後、下記のような箇所は全て
$('#slide-news-block').find('h3').............

次のように修正できる、これで速くなる
newsBlock.find('h3').............

画像

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

使用背景画像

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


透過矢印画像 arrow_9.gif 19x40 透過矢印画像 arrow_6.gif 19x40 透過矢印画像 arrow_7.gif 19x40 透過矢印画像 arrow_5gif 19x40

上記のサンプルの「クリック」形式を「HOVER」形式に改造したもの。構造などは同じです。

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


以上のサンプルは、横に動く「jQueryホリゾンタルアコーディオン」を縦に動かしたに過ぎない。

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


以上です。

 


[ この記事のURL ]


タグ:memo , Accordion , jquery

 

ブログ記事一覧



[1]