jQuery Horizontal Accordion を使って、横(水平)アコーディオン

型(水平)のアコーディオンが使いたかったので色々探してみたが、jQuery 使う事が多いのでプラグインで見つけたのが Horizontal Accordion アコーディオン内部にテキストや画像配置でき、マウスオーバーでの切り替えや自動切り替えにも対応している。

個人的に使いたかったのがシンプルなクリックで切り替え式の水平アコーディオン、尚且つできれば js の読み込みは少なめにしたかったので Horizontal Accordion の使い方とかコードを一式。

Horizontal Accordion

http://www.portalzine.de/index?/Horizontal_Accordion
ページ内コンテンツ最下部(コメントより上)から「Download (GET FILE)」→「DOWNLOAD LINK(Download)」よりダウンロードできる。

ダウンロードしたディレクト内の index.html のサンプルからでも大体どんな事ができるかがわかるが、以下のソースでは Example 4 をベースに簡易化する。

  • まず js の読み込みと CSS の記述から、 jquery.easing.1.3.js は動き方を制御するものなので読み込まなくても問題ない。
  • CSS は jquery.hrzAccordion.examples から必要な分だけを書き換えたもので、外部読み込みにしても構わない。
  • function.js は実際に使う際のオプション、ソースについては後述。
  • jquery 1.3.2 でも使用可、Horizontal Accordion も js圧縮(min)したものを使用している。

html head 内に記述

<script type="text/javascript" src="common/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="common/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="common/jquery.hrzAccordion.min.js"></script>
<script type="text/javascript" src="common/function.js"></script>
<style type="text/css">
<!--
#Horizontal_Accordion {
	display: none;
}
.contentContainer {
	float: left;
	width: 0px;
	height: 300px;
	padding: 0px;
	overflow: hidden;
}
.contentWrapper{
	background: #ccefdc;
	height: 300px;
}
.contentInnerWrapper {
	padding: 10px;
}
.contentWrapper h3 {
	border-bottom: 1px solid silver;
	color: #1E90FF;
}
.container {
	width:800px;
}
.container ul{
	list-style-type: none;
}
.container li{
	display: inline;
}
.handle {
	text-align:center;
	float: left;
	width: 80px;
	height: 300px;
}
.handle img{}
.handleOver {
	cursor: pointer;
}
.handleOver img{}
.handleSelected {
	cursor: default;
}
-->
</style>

html body 内に記述

サイズに合ったイメージを class=”handle” 内に設置する、div 自体のサイズを指定してしまえばイメージである必要はなく、テキストでも動作する。

<ul id="Horizontal_Accordion">
	<li><div class="handle"><img src='images/com_01.gif' width="80" height="300" /></div>
		<h3>Content 1</h3>
		<p>コンテンツ1</p>
	</li>
	<li><div class="handle"><img src='images/com_02.gif' width="80" height="300" /></div>
		<h3>Content 2</h3>
		<p>コンテンツ2</p>
	</li>
	<li><div class="handle"><img src='images/com_03.gif' width="80" height="300" /></div>
		<h3>Content 3</h3>
	<p>コンテンツ3</p>
	</li>
</ul>

function.js

$(document).ready(function() {
	$("#Horizontal_Accordion").hrzAccordion({
			openOnLoad		: "1",
// jquery.easing.1.3
/* Y */			closeEaseAction		: "easeOutExpo",
			closeSpeed		: 300,
/* Y */			openEaseAction		: "easeOutExpo",
			openSpeed		: 300,

//			eventTrigger		: "mouseover",
//			cycle			: true,
//			cycleInterval		: 1000,
//			closeOpenAnimation	: 1,
			containerClass		: "container",
			listItemClass		: "listItem",
			contentWrapper		: "contentWrapper",
			contentInnerWrapper	: "contentInnerWrapper",
			handleClass		: "handle",
			handleClassOver		: "handleOver",
			handleClassSelected	: "handleSelected"
	});
});
  1. 最初に開いておくリストの場所を指定したいなら openOnLoad の数値を変更する。
  2. jquery.easing.1.3 を読み込むなら Y 行の “easeOutExpo” の部分を変更し、動き方を制御できる。
  3. jquery.easing.1.3 を読み込まない場合は Y 行の “easeOutExpo” を “swing” に変更する。
  4. マウスオーバーで切り替えるアコーディオンにしたいなら eventTrigger 前のコメントを外す。
  5. 自動で切り替わるアコーディオンにするなら cycle 前のコメントを外す+、cycleInterval 前のコメントを外し切り替える時間を数値で指定。
次の記事
前の記事

コメント