横にスライドするタブメニューボックス/コンテンツ表示/SolidStateEveryday

スライドボックスcoda-slider.1.1.1.pack.js

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>Coda-Slider 1.1.1</title>
	<meta http-equiv="Content-Language" content="en-us" />
	
	<meta name="author" content="Niall Doherty" />
	
	<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
	<script src="jquery-easing.1.2.pack.js" type="text/javascript"></script>
	<script src="jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
	<script src="coda-slider.1.1.1.pack.js" type="text/javascript"></script>
	
	<style type="text/css">
		
		* { margin: 0; padding: 0 }
		p { text-align: left; margin: 15px 0 }
		p, ul { font-size: 13px; line-height: 1.4em } 
		h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
	
		.slider-wrap {position: relative;width: 666px;}


		.stripViewer { /* スライドパネルの大外枠 */
			position: relative;
			overflow: hidden; 
			border: 3px solid #000;
			width: 660px;
			height: 300px;
			clear: both;
			background: #fff;
		}
		
		.stripViewer .panelContainer { /* スライドパネルの外枠 */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
		}
		
		.stripViewer .panelContainer .panel { /* 実際にスライドするパネル */
			float:left;
			height: 100%;
			position: relative;
			width: 660px; 
		}
		
		.stripViewer .panelContainer .panel .wrapper { padding: 10px;}
		
		.stripNav { border-left:1px solid #000;margin-left:-1px;}
		
		.stripNav ul {list-style: none;}/*タブメニュー*/
		
		.stripNav ul li {float: left;}
		
		.stripNav a {/*タブメニューのリンク部分*/
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: #c6e3ff;
			color: #000;
			text-decoration: none;
			display: block;
			padding: 0 15px;
			background:#fff;
			border:1px solid #000;
			border-left:none;
		}
		
		.stripNav li.tab1 a {border-left:1px solid #000; }
		
		.stripNav li a:hover {background: #999;}/*マウスオン*/
		
		.stripNav li a.current {background: #000;color: #fff;}/*選択されているタブ*/
		
		.stripNavL, .stripNavR {/*矢印、簡単に非表示にするにはdisplay:noneを追加*/
			position: absolute;
			top: -2px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {display: block;height: 40px;width: 40px;}/*矢印のサイズ*/
		.stripNavL {left: 580px;background: url("images/arrow-left.gif") no-repeat center;}/*左矢印の位置*/
		.stripNavR {right: 0;background: url("images/arrow-right.gif") no-repeat center;}/*右矢印の位置*/
		
	</style>
	
	<!-- Initialize each slider on the page. Each slider must have a unique id -->
	<script type="text/javascript">
		jQuery(window).bind("load", function() {
			jQuery("div#slider1").codaSlider()
		});
	</script>
		
</head>

<body>
<div class="slider-wrap">
	<div id="slider1" class="csw">
		<div class="panelContainer">
		
			<div class="panel" title="Panel 1">
				<div class="wrapper">
					<h3>Panel 1</h3>
					<p>Romeo and Julia</p>
					<p>'Romeo und Julia' (Or, 'Romeo and Juliet' and Romeo and Juliet) is a drama by playwright William Shakespeare in England. It is roughly said about 1595 though there are various opinions about the first performance fiscal year. 'Romeo und Julia' is not considered to be a profound tragedy like a four great tragedy ('Hamlet', 'Macbeth', 'Othello', and 'King Lear') though the classification of the complete volume (the following "The 1.2th case book") that was made to the tragedy, and published when Shakespeare postmortem is also the same. In a shakespearian tragedy at later years, the striking feature that characters' characters cause the tragedy is seen. The one that is called "Fate" that is surrounding circumstances and chance, etc. from characters' characters leads both and surroundings to the tragic ending for this in Romeo und Julia. Moreover, a joke to excessive in the text </p>
					<p><a href="#5" class="cross-link" title="Go to Panel 5">&#171; Previous</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Next &#187;</a></p>
				</div>
			</div>
			<div class="panel" title="Panel 2">
				<div class="wrapper">
					<h3>Panel 2</h3>
					<p>The Secundus category sphere lust person's hell
The drowned person blows to the rampaging storm and it is thrown into the lust.</p>
					</p>
					<p><a href="#1" class="cross-link" title="Go to Panel 1">&#171; Previous</a> | <a href="#3" class="cross-link" title="Go to Panel 3">Next &#187;</a></p>
				</div>
			</div>		
			<div class="panel" title="Panel 3">
				<div class="wrapper">
					<h3>Panel 3</h3>
					<p>The third category Hell of avarice
Cerberus tears up the person who infringed the sin of gluttony, and it writhes and it turns round mud.</p>
					
					<p><a href="#2" class="cross-link" title="Go to Panel 2">&#171; Previous</a> | <a href="#4" class="cross-link" title="Go to Panel 4">Next &#187;</a></p>
				</div>
			</div>
			<div class="panel" title="Panel 4">
				<div class="wrapper">
					<h3>Panel 4</h3>
					<p>The fourth category Avaricious person's hell
The person who piled up the corruption of stinginess and waste mutually abuses it rolling the bag of a heavy gold coin.</p>
					<p><a href="#3" class="cross-link" title="Go to Panel 3">&#171; Previous</a> | <a href="#5" class="cross-link" title="Go to Panel 5">Next &#187;</a></p>
				</div>
			</div>
			<div class="panel" title="Panel 5">
				<div class="wrapper">
					<h3>Panel 5</h3>
					<p>The fifth category Indignation person's hell
In the marsh of suteiju that does the color of blood, the person who forgets oneself because of anger mutually tortures it. It is a toroidal alcazar in an eternal flame where red was heated in putting the fallen angel and major criminals. The sphere of the hell below is on this inside here.</p>
					
					<p><a href="#4" class="cross-link" title="Go to Panel 4">&#171; Previous</a> | <a href="#1" class="cross-link" title="Go to Panel 1">Next &#187;</a></p>
				</div>
			</div>
			
		</div><!-- .panelContainer -->
	</div><!-- #slider1 -->
</div>

</body>

</html>

	Coda-Slider 1.1.1

加速度付きで横にスライドするタブボックスです。
next、prevボタンの様なものも使用することができ、省スペースに役立つタブボックス、タブメニューに留まらず、アクティブなコンテンツを展開することが出来ます。

セッティング
マークアップ

ダウンロード＆<head>の設定

サイトへ行き、coda-slider.1.1.1.zipをダウンロードします。
解凍して出てきた中身をアップしたら、使用したいページへスクリプトを読み込ませます。

今回は上記の４つ。パスは任意で判断して調節してください。
次にスライドボックスのトリガーを記述します。

div#slider1というのがターゲットに付加するIDになります。
２つ、３つとスライドボックスを設置したい場合は、jQuery("div#slider1").codaSlider()をID変えて複数行記述します。
これでスクリプトの設定は完了します。

要素のマークアップ

   <div id="slider1">
   <div class="panelContainer">
   <div class="panel" title="Panel 1">コンテンツ </div>
   </div>
   </div>　

基本的には上記のようになり、class="panel"が実際にスライドするボックスです。
ちなみにこれについているtitle="Panel 1"がタブメニューの内容になります。
スライドするボックスを増やす場合は、

<div class="panel" title="Panel 1"> コンテンツ </div>
<div class="panel" title="Panel 2"> コンテンツ </div>
<div class="panel" title="Panel 3"> コンテンツ </div>　

のようにclass="panel"の範囲を複数個増やしていくだけでOKです。
class="panel"には自動的に上から#1、#２、#3のようにIDが付加されるので、サンプルのようにボックス内で動作を指定したい場合は、これにリンクを張れば動作するようになります。

CSSについては、サンプルのコード内にそれぞれ対応している箇所をコメントアウトしているので、そちらを参考にしてください。

新着記事
ページ履歴
人気ページ

自動スライドするコンテンツボックス

トップページにピッタリなスライドショー

jQueryのギャラリー

縦にフェード展開するドロップダウンメニュー

jQueryを使用したシンプルなスライドボックス

iGoogleみたいなフローティングボックス

感想

何でも使いどころが大切だけど、これはあまり意識しなくても使いやすいと思います。
サイドバーのパーツとかだとより使いやすいですかね。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。

ダウンロード＆<head>の設定

要素のマークアップ

関連スクリプト

感想

スクリプトの使用について