POPSブログ

jQuery setTimeout自動開閉アコーディオン、HOVERタイプ

203

  Category:  jquery2013/02/15 pops 

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

 

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

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


「クリック」タイプの、setTimeout利用「自動のアコーディオン」は下記ページにあります。

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


Example


ACCORDION-NEWS (HOVER)

MENUブロックを「HOVER」しても開くことが出来ます。(HOVERタイマー解除、OUTタイマー再設定)

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


[HOVERの状態] false

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

重要、#slide-news-chipの高さを必ず設定すること。サンプルでは背景画像入り。


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


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

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



HTML JS CSS


HTML

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


<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
//news/setTimeout hover

(function($){

	$(function(){

		//anime形式
		//javascriptキャッシュを無効にする
		//window.onunload=function(){}

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

		//タイマーの使用
		var timer_use="use";
		//タイマー値 5000-10000
		var time=5000;

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

		//変数
		var timerID=null;
		var index_no=0;
		var len=0;
		//mouseが入っている判定
		var mouseIn=false;

		//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);//開く
		if (timer_use == 'use') {
			set_timer();
		}

		//hover-ACTION
		$('.slide-news-chip').hover(

			function() {

				//mouse-in有効
				mouseIn=true;
				//強制タイマークリア
				clearTimeout(timerID);
				//hover番号取得
				var item_no=$('.slide-news-chip').index(this);
				//開いている場合は実行しない
				if (item_no == index_no) {return false}
				//開いて居ない場合
				if (item_no != index_no) {
					index_no=item_no;
					open_set(index_no);//開く
				}

			},

			function() {

				//mouse-in無効
				mouseIn=false;
				//タイマーセット
				set_timer();
			}
		);

		//指定位置要素を開く
		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);
			set_timer();

		}
		function set_timer() {

			//mouseが入っていれば実行しない
			if (mouseIn) {return false}
			//タイマー再セット
			if (timer_use == 'use') {
				//一旦切ってからセット
				clearTimeout(timerID);
				timerID=setTimeout(next_set,time);
			}

		}

	});

})(jQuery);


CSS

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

accordion-news.css 適当な名前で保存して使用する。「クリック」タイプと同じです。slide-news-chipクラスの高さ設定のこと。


/* 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;
}
/*高さに注意 250 100%*/
#slide-news-block .slide-news-chip {
	position:absolute;
	left:0;top:0;
	display:block;
	width:200px;
	height:100%;
	margin:0;
	padding:0;
	border-top:1px #FFFFFF solid;
	background:url(/main/images/sky_back.jpg) no-repeat;
	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;
}

「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


説明図 Hoverタイプ


サンプルは図のように装飾のため、「#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. hover状態を維持するために「slide-news-chipクラス」の高さが必要です。計算が面倒な場合は100%を設定する。高さが無いとhover状態が解除されて、タイマーが機能してしまうので注意。
6. JS初期設定は、JS上部を参照ください。
● スライドブロックの高さ boxHeight、必ず #slide-news-block の高さの値である事。
● スライドチップのタイトルの高さ title_H、配置間隔ですから、通常タイトルの高さを設定、大きければ隙ができるし小さければ重なります。
● スライドチップの高さ計算。高さ = スライドブロックの高さ - (タイトルの高さ x (スライドチップ数 - 1))
サンプル計算例、250-(20x4)=170px、又は100%。
角丸はCSS3で行っています。デザイン、その他の変更などは自由です。


Hoverタイプとタイマー、キャッシュ機能などの挙動

「クリックタイプ」と比較して、挙動に少し違いがありますので理解ください。

1. 開く位置を指定すれば開くことが可能ですが、下記説明の「キャッシュ機能」によりJSの先頭より実行しない時があります。(最後に開いた所に戻る、タイマー停止)
2. Hoverすることにより指定位置が開きます。この場合タイマーは解除されます。Hoverアウトすれば。タイマーが作動します。
3. 何らかの条件で、タイマーが停止した場合に、一旦、Hover後、Hoverアウトすればタイマーが再作動します。
4. ブラウザにもよりますが、次ぎの点を了承ください。(迷惑な機能だ!)


「モダンブラウザ」では「リンクをクリック」して「別ページ」にジャンプ後、ブラウザの「戻る」ボタンで戻った場合に、このJSではタイマーは停止の状態になることがあります。「キャッシュ機能」が働くからです。つまりJSを最初から実行しないで、途中から実行します。但し「IE.Chrome」はキャッシュ機能が無く最初からJSを実行しますので関係はありません。

通常の「Aリンク」で戻る場合は関係ありません。


● 次ぎの方法でキャッシュを解除できます。


onunload実行部分を有効にすればキャッシュされません。但しパフォーマンスなど落ちることあり。


//javascriptキャッシュを無効にする
window.onunload=function(){}

【参考】webbibo.com: ブラウザの戻るでJavaScriptの効果が残っている時の対処法


「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')...............

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 背景画像 sky_back.jpg 250x250

「クリック」タイプの、setTimeout利用「自動のアコーディオン」は下記ページにあります。

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


以上です。

 


[ この記事のURL ]


タグ:jquery , Accordion , memo

 

ブログ記事一覧



[1]