ダウンロード

埋め込み

常に最新

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/styless-tabs.min.js" ></script>

1.0.1

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/styless-tabs.1.0.1.min.js" ></script>

1.0.0

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/styless-tabs.1.0.0.min.js" ></script>

必要なライブラリ

jQuery

ライブラリ内でのjQueryの利用範囲
  • DOM要素の取得
  • 属性の設定
  • スタイルの設定
  • イベントハンドラの登録

概要

styless-tabsは良くあるタブの動きのみを提供します。配置や装飾に自由度を持たせられるように、設定で自動設定するcssを制御できます。

切り替えられたタブコンテンツの配置基準となるコンテナと、タブインデックス・タブコンテンツの組み合わせを与えることで動作します。

デフォルトではタブコンテンツの大きさを揃え、重ね合わせの順番のみコントロールします。設定でz-indexや後ろのコンテンツを見えなくする事も可能です。

1.0.1
  • deprecate対応

サンプル

シンプル

Windows 7 サンプル画像

僕のお気に入りのWindows 7 サンプル画像を紹介します。

Windowsを購入すると、マイピクチャの中に自然をテーマにしたサンプル画像が入っている事は皆知っていると思います。

でもあまりじっくり見ませんよね?

そこで僕がお気に入りの画像を3点ピックアップし、コメントします

皆さんと意見が合いますでしょうか!?

日本ではまず見れない風景!

風で長い年月をかけて巨大な岩が削られるなんて、安定して乾いた大陸の土地ならではですね

梅雨時の風物詩、紫陽花

こんなに綺麗に撮影できるテクニックを身に付けたいです

Blooming!

こういう生命力を感じる写真、大好きです!

Windows 7 には、実はサンプル動画もついてます

<--画像パスは書き換えてください-->
	<nav id="samp01_nav">
		<ul class="clearfix">
			<li id="samp01_idx01" class="tabindex_on">概要</li>
			<li id="samp01_idx02">画像1</li>
			<li id="samp01_idx03">画像2</li>
			<li id="samp01_idx04">画像3</li>
			<li id="samp01_idx05">特別編(movie)</li>
		</ul>
	</nav>
	<div id="samp01_container" class="clearfix">
		<section id="samp01_cnt01">
			<div class="adjuster">
				<h5>Windows 7 サンプル画像</h5>
				<p>僕のお気に入りのWindows 7 サンプル画像を紹介します。</p>
				<p>Windowsを購入すると、マイピクチャの中に自然をテーマにしたサンプル画像が入っている事は皆知っていると思います。</p>
				<p>でもあまりじっくり見ませんよね?</p>
				<p>そこで僕がお気に入りの画像を3点ピックアップし、コメントします</p>
				<p>皆さんと意見が合いますでしょうか!?</p>
			</div>
		</section>
		<section id="samp01_cnt02">
			<div class="adjuster">
				<div class="img_frame">
					<img src="img/styless-tabs/Desert.jpg" />
				</div>
				<article>
					<p>日本ではまず見れない風景!</p>
					<p>風で長い年月をかけて巨大な岩が削られるなんて、安定して乾いた大陸の土地ならではですね</p>
				</article>
			</div>
		</section>
		<section id="samp01_cnt03">
			<div class="adjuster">
				<div class="img_frame">
					<img src="img/styless-tabs/Hydrangeas.jpg" />
				</div>
				<article>
					<p>梅雨時の風物詩、紫陽花</p>
					<p>こんなに綺麗に撮影できるテクニックを身に付けたいです</p>
				</article>
			</div>
		</section>
		<section id="samp01_cnt04">
			<div class="adjuster">
				<div class="img_frame">
					<img src="img/styless-tabs/Tulips.jpg" />
				</div>
				<article>
					<p>Blooming!</p>
					<p>こういう生命力を感じる写真、大好きです!</p>
				</article>
			</div>
		</section>
		<section id="samp01_cnt05">
			<div class="adjuster">
				<video controls>
					<source src="img/styless-tabs/Wildlife.wmv" type="video/wmv; codecs='WMA'"/>
					<source src="img/styless-tabs/Wildlife-1.m4v" type="video/mp4"/>
					<source src="img/styless-tabs/Wildlife-1.mp4" type="video/mp4"/>
					<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
				</video>
				<article>
					<p>Windows 7 には、実はサンプル動画もついてます</p>
			</article>
			</div>
		</section>
	</div>
nav#samp01_nav{
	border-bottom: solid 1px rgba(202, 199, 192, 1);
}
nav#samp01_nav ul{
	width: 1000px;
	padding-left: 20px;
}
nav#samp01_nav li{
	float: left;
	background-color: rgba(245, 243, 239, 1);
	border-top: solid 1px rgba(202, 199, 192, 1);
	border-left: solid 1px rgba(202, 199, 192, 1);
	border-right: solid 1px rgba(202, 199, 192, 1);
	border-bottom: solid 1px rgba(202, 199, 192, 1);
	font-size: 14px;
	margin: 0 2px -1px 0;
	text-align: center;
	cursor: pointer;
	
	line-height: 42px;
	width: 125px;
}
nav#samp01_nav li.tabindex_on{
	background-color: #ffffff;
	border-bottom: solid 1px #ffffff;
}
div#samp01_container{
	margin-bottom: 30px;
}
div#samp01_container section{
	width: 800px;
	background-color: #ffffff;
}
.img_frame{
	width: 640px;
	height: 480px;
	margin: 0 auto 15px auto;
	padding: 0;
	position: relative;
	overflow: hidden;
	background-color: rgba(245, 243, 239, 1);
	border-radius: 5px;
	border: solid 10px rgba(245, 243, 239, 1);
}
.img_frame img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}
div#samp01_container section div.adjuster{
	padding: 15px 10px 15px 20px;
	line-height: 24px;
}
div#samp01_container section div.adjuster h5{
	font-size: 32px;
	line-height: 91px;
}
div#samp01_container section div.adjuster p{
	margin: 0 0 8px 0;
}
div#samp01_container section div.adjuster article{
	text-indent: 70px;
}
section#samp01_cnt05 video{
	display: block;
	width: 640px;
	margin: 0 auto 15px auto;
}
//以下をscriptのjqueryロード後の処理に記述します
samp1 = new StylessTabs({
	contentcontainerid: 'samp01_container',
	indexcontentids: {
		samp01_idx01: 'samp01_cnt01',
		samp01_idx02: 'samp01_cnt02',
		samp01_idx03: 'samp01_cnt03',
		samp01_idx04: 'samp01_cnt04',
		samp01_idx05: 'samp01_cnt05'
	},
	invisiblehidecontent: true
});
samp1.setOnContentChange(function(tabindex, content){
	$('nav#samp01_nav li').each(function(){
		$(this).removeClass('tabindex_on');
	});
	tabindex.addClass('tabindex_on');
});

スマートフォン向け

<--画像パスは書き換えてください-->
	<h5>Windows 7 サンプル画像</h5>
	<div id="container">
		<section id="cnt01">
			<div class="adjuster">
				<p>僕のお気に入りのWindows 7 サンプル画像を紹介します。</p>
				<p class="img_frame"<<img src="img/styless-tabs/thumbs.jpg"/<</p<
				<p>Windowsを購入すると、マイピクチャの中に自然をテーマにしたサンプル画像が入っている事は皆知っていると思います。</p>
				<p>でもあまりじっくり見ませんよね?</p>
				<p>そこで僕がお気に入りの画像を3点ピックアップし、コメントします</p>
				<p>皆さんと意見が合いますでしょうか!?</p>
			</div>
		</section>
		<section id="cnt02">
			<div class="adjuster">
				<div class="img_frame">
					<img src="img/styless-tabs/Desert.jpg" />
				</div>
				<article>
					<p>日本ではまず見れない風景!</p>
					<p>風で長い年月をかけて巨大な岩が削られるなんて、安定して乾いた大陸の土地ならではですね</p>
				</article>
			</div>
		</section>
		<section id="cnt03">
			<div class="adjuster">
				<div class="img_frame">
					<img src="img/styless-tabs/Hydrangeas.jpg" />
				</div>
				<article>
					<p>梅雨時の風物詩、紫陽花</p>
					<p>こんなに綺麗に撮影できるテクニックを身に付けたいです</p>
				</article>
			</div>
		</section>
		<section id="cnt04">
			<div class="adjuster">
				<div class="img_frame">
					<img src="img/styless-tabs/Tulips.jpg" />
				</div>
				<article>
					<p>Blooming!</p>
					<p>こういう生命力を感じる写真、大好きです!</p>
				</article>
			</div>
		</section>
		<section id="cnt05">
			<div class="adjuster">
				<div class="img_frame">
					<video controls>
						<source src="img/styless-tabs/Wildlife.wmv" type="video/wmv; codecs='WMA'"/>
						<source src="img/styless-tabs/Wildlife-1.m4v" type="video/mp4"/>
						<source src="img/styless-tabs/Wildlife-1.mp4" type="video/mp4"/>
						<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
					</video>
				</div>
				<article>
					<p>Windows 7 には、実はサンプル動画もついてます</p>
			</article>
			</div>
		</section>
	</div>
	<nav class="gnav">
		<ul>
			<li id="idx01" class="tabindex_on"><div class="box_deco">概要</div></li>
			<li id="idx02"><div class="box_deco">画像1</div></li>
			<li id="idx03"><div class="box_deco">画像2</div></li>
			<li id="idx04"><div class="box_deco">画像3</div></li>
			<li id="idx05"><div class="box_deco">movie</div></li>
		</ul>
	</nav>
html, body{
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
}
#container{
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
}
.adjuster{
	padding 5px 0 0 0;
}
.img_frame{
	position: relative;
	height: 240px;
	border: solid 10px #ffffff;
}
.img_frame img,
.img_frame video{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: block;
	max-width: 100%;
	max-height: 100%;
}
.gnav{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
}
.gnav ul{
}
.gnav ul li{
	width: 20%;
	float: left;
	margin: 0 0 0 0;
	border-top: solid 1px #e5e5e5;
	background-color: #f3f3f3;
}
.gnav ul li div.box_deco{
	line-height: 40px;
	font-size: 14px;
	border-left: solid 1px #e5e5e5;
	text-align: center;
	cursor: pointer;
}
nav.gnav li.tabindex_on{
	background-color: #ffffff;
	border-top: solid 1px #ffffff;
}
//以下をscriptのjqueryロード後の処理に記述します
samp2 = new StylessTabs({
	contentcontainerid: 'container',
	indexcontentids: {
		idx01: 'cnt01',
		idx02: 'cnt02',
		idx03: 'cnt03',
		idx04: 'cnt04',
		idx05: 'cnt05'
	},
	invisiblehidecontent: true,
	adjustwidth: true
});
samp2.setOnContentChange(function(tabindex, content){
	$('nav.gnav li').each(function(){
		$(this).removeClass('tabindex_on');
	});
	tabindex.addClass('tabindex_on');
});

設定

未指定:必須条件:文字列
contentcontainerid
タブコンテンツを表示するコンテナのidを指定します。各タブコンテンツはこのコンテナの位置を基準に表示されます。
未指定:必須条件:文字列
indexcontentids
タブインデックスを表す要素のidと対になるタブコンテンツをキーと値の形で表したオブジェクトを設定します。
未指定:2条件:0->全て 1->マウス 2->タッチ 9->なし
handlemode
回転させる方法を決定します。これが0の状態だとマウスとタッチ両方のイベントを拾って動作します。9に設定するとドラッグやスワイプで動かなくなります。
未指定:0条件:整数
defaultzindex
タブコンテンツを表示するコンテナに指定するz-index値を設定します。
未指定:10条件:正の整数
zindexinterval
タブコンテンツの前後処理で使うz-indexの間隔を設定します。
未指定:true条件:true|false
adjustwidth
この設定がtrueの場合、タブコンテンツのコンテナとそれぞれのタブコンテンツの幅を一番大きいタブコンテンツの幅に揃えます。
未指定:true条件:true|false
adjustheight
この設定がtrueの場合、タブコンテンツのコンテナとそれぞれのタブコンテンツの高さを一番大きいタブコンテンツの高さに揃えます。
未指定:false条件:true|false
invisiblehidecontent
この設定がtrueの場合、表示するタブコンテンツ以外のタブコンテンツにdisplay: noneを設定します。
未指定:-条件:-
setOnContentChange(function(tabindex, content){})
引数にコールバック関数を指定することで、選択中のタブインデックスが変更された時の処理を記述することが出来ます。引数はそれぞれtabindex: 選択されたタブインデックス、content: 選択されたタブコンテンツ
未指定:-条件:-
adjustWidth(w)
タブコンテンツ全体の幅を指定した大きさに揃えます。
未指定:-条件:-
adjustHeight(h)
タブコンテンツ全体の高さを指定した大きさに揃えます。
未指定:-条件:-
adjustMaxWidth()
タブコンテンツ全体の幅を一番大きいタブコンテンツの幅に揃えます。
未指定:-条件:-
adjustMaxWidth()
タブコンテンツ全体の高さを一番大きいタブコンテンツの高さに揃えます。
未指定:-条件:-
getMaxWidth()
一番大きいタブコンテンツの幅を取得します。
未指定:-条件:-
getMaxHeight()
一番大きいタブコンテンツの高さを取得します。