デモ:最小セットアップ

jQuery toolsによる「最小セットアップ」の動作デモです。

サンプルコード

HTMLのサンプル

<!-- "前へ移動" -->
<a class="prev browse left">prev</a>
	
<!-- スクロールアイテム・ルート -->
<div class="scrollable">   
	<!-- スクロールアイテム・セット -->
	<div class="items">
		<!-- 1-2 -->
		<div>
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50a.png" />
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50b.png" />
		</div>
		<!-- 3-4 -->
		<div>
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50c.png" />
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50d.png" />
		</div>
		<!-- 5-6 -->
		<div>
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50e.png" />
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50f.png" />
		</div>
	</div>
</div>
<!-- "次へ移動" -->
<a class="next browse right">next</a>

CSSのサンプル

/* ボタン */
#example .browse{
	display:block;
	float: left;
	width: 30px;
	height: 16px;
	margin-top: 20px;
	background: url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/tool/ic_arrow.png) no-repeat;
	cursor: pointer;
}
#example .prev{	background-position: 0 0; padding-left: 18px;}
#example .prev:hover{	background-position: 0 -100px;}
#example .next{	background-position: -470px 0; padding-right: 18px;}
#example .next:hover{	background-position: -470px -100px;}
#example .disabled{	background: none; color: #999; cursor: default;}

/* パネルを囲う要素 */
#example .scrollable {
	float: left;
	margin: 0 10px;
	position:relative;
	overflow:hidden;
	width: 160px;
	height:50px;
}
#example .scrollable .items {
	width:20000em;
	position:absolute;
}
#example .items div {
	float:left;
}

Javascriptのサンプル

$(function() {
	// 基本の例
	$(".scrollable").scrollable();
});