jQuery・タッチデバイスでも滑らかなタブパネルを4種類作りました [IE8対応]

150811_001

デモを見る

よくあるタブ切り替えを2点と、使いどころが微妙な2点を暇潰しで作成。
「いつもと違う動きにしたい」と要望があったときに使えるかもしれない。

検証済みブラウザとOS

IE 8～
Firefox
Google Chrome
Safari
Windows 7
OS X Yosemite
iOS 8
Android 4.1

このjQueryで出来ること、出来ないこと

出来ること

タッチデバイスでも、PCと同じように瞬時に切り替え
フェードが滑らか
攻殻機動隊ライクなテキストアニメーション（使いどころが微妙）

出来ないこと: パネルを開いた状態で、トリガーをクリックして元に戻す

タッチデバイスでも滑らかな理由: Julian Shapiro 氏の、 Velocity.js を利用しているため。

要点とコード

共通コード

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="js/smoothTab.js"></script>

シンプル

どこにでもある普通のコード。

<ul id="tab-nav">
	<li><a href="#tab-01">HTML</a></li>
	<li><a href="#tab-02">CSS</a></li>
	<li><a href="#tab-03">JavaScript</a></li>
	<li><a href="#tab-04">PHP</a></li>
	<li><a href="#tab-05">MySQL</a></li>
<!-- /#tab-nav --></ul>

<ul id="tab-panel">
	<li id="tab-01"><img src="//placeimg.com/300/300/animals">
	<p>テキスト</p></li>
	<li id="tab-02"><img src="//placeimg.com/300/300/arch">
	<p>テキスト</p></li>
	<li id="tab-03"><img src="//placeimg.com/300/300/nature">
	<p>テキスト</p></li>
	<li id="tab-04"><img src="//placeimg.com/300/300/people">
	<p>テキスト</p></li>
	<li id="tab-05"><img src="//placeimg.com/300/300/tech">
	<p>テキスト</p></li>
<!-- /#tab-panel --></ul>

<li><a href="#tab-03">JavaScript</a></li>

<li><a href="#tab-05">MySQL</a></li>

</ul>

テキスト</li>

テキスト</li>

テキスト</li>

テキスト</li>

テキスト</li>

</ul>

/* ナビゲーション */
#tab-nav {
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	@include cf;

	li {
		float: left;
		margin-right: 10px;
		border: 1px solid #ccc;
		border-bottom: 0;
	}

	a {
		color: black;
		padding: 5px 20px;
		display: block;
		&:hover {
			color: white;
			background: #666;
		}
	}

	.active {
		color: white;
		background: #666;
	}
}

/* パネル */
#tab-panel {
	li {
		@include cf;
	}

	img {
		float: left;
		margin-right: 20px;
	}
}

/* ナビゲーション */

#tab-nav {

margin-bottom: 20px;

border-bottom: 1px solid #ccc;

@include cf;

li {

float: left;

margin-right: 10px;

border: 1px solid #ccc;

border-bottom: 0;

}

a {

color: black;

padding: 5px 20px;

display: block;

&:hover {

color: white;

background: #666;

}

.active {

color: white;

background: #666;

}

/* パネル */

#tab-panel {

li {

@include cf;

}

img {

float: left;

margin-right: 20px;

}

/*
Smooth tab menu
Author: KEITA HIRAI
URL: keitahirai.net
*/
$(function(){
	var touch = ("ontouchstart" in document) ? "touchstart" : "click";

	$("#tab-panel li:not(:first)").hide();
	$("#tab-nav a:first").addClass("active");

	// $("#tab-nav a").on("click", function() {
	$("#tab-nav a").on(touch, function() {
		$($(this).attr("href")).show();
		$($(this).attr("href")).siblings().hide();

		$("#tab-nav a.active").removeClass("active");
		$(this).addClass("active");
		return false;
	});
});

Smooth tab menu

Author: KEITA HIRAI

URL: keitahirai.net

$(function(){

var touch = ("ontouchstart" in document) ? "touchstart" : "click";

$("#tab-panel li:not(:first)").hide();

$("#tab-nav a:first").addClass("active");

// $("#tab-nav a").on("click", function() {

$("#tab-nav a").on(touch, function() {

$($(this).attr("href")).show();

$($(this).attr("href")).siblings().hide();

$("#tab-nav a.active").removeClass("active");

$(this).addClass("active");

return false;

});

フェード

fadeIn() を velocity() メソッドに変更しているだけの、普通のコード。

<ul id="tab-nav-fade">
	<li><a href="#tab-01-fade">HTML</a></li>
	<li><a href="#tab-02-fade">CSS</a></li>
	<li><a href="#tab-03-fade">JavaScript</a></li>
	<li><a href="#tab-04-fade">PHP</a></li>
	<li><a href="#tab-05-fade">MySQL</a></li>
<!-- /#tab-nav-fade --></ul>

<ul id="tab-panel-fade">
	<li id="tab-01-fade"><img src="//placeimg.com/300/300/animals">
	<p>テキスト</p></li>
	<li id="tab-02-fade"><img src="//placeimg.com/300/300/arch">
	<p>テキスト</p></li>
	<li id="tab-03-fade"><img src="//placeimg.com/300/300/nature">
	<p>テキスト</p></li>
	<li id="tab-04-fade"><img src="//placeimg.com/300/300/people">
	<p>テキスト</p></li>
	<li id="tab-05-fade"><img src="//placeimg.com/300/300/tech">
	<p>テキスト</p></li>
<!-- /#tab-panel-fade --></ul>

<li><a href="#tab-03-fade">JavaScript</a></li>

<li><a href="#tab-05-fade">MySQL</a></li>

</ul>

テキスト</li>

テキスト</li>

テキスト</li>

テキスト</li>

テキスト</li>

</ul>

/* ナビゲーション */
#tab-nav-fade {
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	@include cf;

	li {
		float: left;
		margin-right: 10px;
		border: 1px solid #ccc;
		border-bottom: 0;
	}

	a {
		color: black;
		padding: 5px 20px;
		display: block;
		&:hover {
			color: white;
			background: #666;
		}
	}

	.active {
		color: white;
		background: #666;
	}
}

/* パネル */
#tab-panel-fade {
	min-height: 300px;

	li {
		@include cf;
	}

	img {
		float: left;
		margin-right: 20px;
	}
}

/* ナビゲーション */

#tab-nav-fade {

margin-bottom: 20px;

border-bottom: 1px solid #ccc;

@include cf;

li {

float: left;

margin-right: 10px;

border: 1px solid #ccc;

border-bottom: 0;

}

a {

color: black;

padding: 5px 20px;

display: block;

&:hover {

color: white;

background: #666;

}

.active {

color: white;

background: #666;

}

/* パネル */

#tab-panel-fade {

min-height: 300px;

li {

@include cf;

}

img {

float: left;

margin-right: 20px;

}

/*
Smooth tab menu
Author: KEITA HIRAI
URL: keitahirai.net
*/
$(function(){
	var touch = ("ontouchstart" in document) ? "touchstart" : "click";

	$("#tab-panel-fade li:not(:first)").hide();
	$("#tab-nav-fade a:first").addClass("active");

	// $("tab-nav-fade a").on("click", function() {
	$("#tab-nav-fade a").on(touch, function() {
		$($(this).attr("href")).velocity("fadeIn", {duration: 400});
		$($(this).attr("href")).siblings().hide();

		$("#tab-nav-fade a.active").removeClass("active");
		$(this).addClass("active")
		return false;
	});
});

Smooth tab menu

Author: KEITA HIRAI

URL: keitahirai.net

$(function(){

var touch = ("ontouchstart" in document) ? "touchstart" : "click";

$("#tab-panel-fade li:not(:first)").hide();

$("#tab-nav-fade a:first").addClass("active");

// $("tab-nav-fade a").on("click", function() {

$("#tab-nav-fade a").on(touch, function() {

$($(this).attr("href")).velocity("fadeIn", {duration: 400});

$($(this).attr("href")).siblings().hide();

$("#tab-nav-fade a.active").removeClass("active");

$(this).addClass("active")

return false;

});

縦スライド

show() を velocity() メソッドの slideDown に変更しているだけ
ドロップダウンナビの、トリガーをクリックしても元には戻らないバージョン

<ul id="tab-nav-slidedown">
	<li><a href="#tab-01-slidedown">HTML</a></li>
	<li><a href="#tab-02-slidedown">CSS</a></li>
	<li><a href="#tab-03-slidedown">JavaScript</a></li>
	<li><a href="#tab-04-slidedown">PHP</a></li>
	<li><a href="#tab-05-slidedown">MySQL</a></li>
<!-- /#tab-nav-slidedown --></ul>

<ul id="tab-panel-slidedown">
	<li id="tab-01-slidedown"><img src="//placeimg.com/300/300/animals">
	<p>テキスト</p></li>
	<li id="tab-02-slidedown"><img src="//placeimg.com/300/300/arch">
	<p>テキスト</p></li>
	<li id="tab-03-slidedown"><img src="//placeimg.com/300/300/nature">
	<p>テキスト</p></li>
	<li id="tab-04-slidedown"><img src="//placeimg.com/300/300/people">
	<p>テキスト</p></li>
	<li id="tab-05-slidedown"><img src="//placeimg.com/300/300/tech">
	<p>テキスト</p></li>
<!-- /#tab-panel-slidedown --></ul>

<li><a href="#tab-03-slidedown">JavaScript</a></li>

<li><a href="#tab-05-slidedown">MySQL</a></li>

</ul>

テキスト</li>

テキスト</li>

テキスト</li>

テキスト</li>

テキスト</li>

</ul>

/* ナビゲーション */
#tab-nav-slidedown {
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	@include cf;

	li {
		float: left;
		margin-right: 10px;
		border: 1px solid #ccc;
		border-bottom: 0;
	}

	a {
		color: black;
		padding: 5px 20px;
		display: block;
		&:hover {
			color: white;
			background: #666;
		}
	}

	.active {
		color: white;
		background: #666;
	}
}

/* パネル */
#tab-panel-slidedown {
	min-height: 300px;

	li {
		@include cf;
	}

	img {
		float: left;
		margin-right: 20px;
	}
}

/* ナビゲーション */

#tab-nav-slidedown {

margin-bottom: 20px;

border-bottom: 1px solid #ccc;

@include cf;

li {

float: left;

margin-right: 10px;

border: 1px solid #ccc;

border-bottom: 0;

}

a {

color: black;

padding: 5px 20px;

display: block;

&:hover {

color: white;

background: #666;

}

.active {

color: white;

background: #666;

}

/* パネル */

#tab-panel-slidedown {

min-height: 300px;

li {

@include cf;

}

img {

float: left;

margin-right: 20px;

}

/*
Smooth tab menu
Author: KEITA HIRAI
URL: keitahirai.net
*/
$(function(){
	var touch = ("ontouchstart" in document) ? "touchstart" : "click";

	$("#tab-panel-slidedown li:not(:first)").hide();
	$("#tab-nav-slidedown a:first").addClass("active");

	// $("#tab-nav-slide a").on("click", function() {
	$("#tab-nav-slidedown a").on(touch, function() {
		$($(this).attr("href")).velocity("slideDown", {duration: 400});
		$($(this).attr("href")).siblings().hide();

		$("#tab-nav-slidedown a.active").removeClass("active");
		$(this).addClass("active");
		return false;
	});
});

Smooth tab menu

Author: KEITA HIRAI

URL: keitahirai.net

$(function(){

var touch = ("ontouchstart" in document) ? "touchstart" : "click";

$("#tab-panel-slidedown li:not(:first)").hide();

$("#tab-nav-slidedown a:first").addClass("active");

// $("#tab-nav-slide a").on("click", function() {

$("#tab-nav-slidedown a").on(touch, function() {

$($(this).attr("href")).velocity("slideDown", {duration: 400});

$($(this).attr("href")).siblings().hide();

$("#tab-nav-slidedown a.active").removeClass("active");

$(this).addClass("active");

return false;

});

横スライド

デフォルトを width: 0; に設定し、トリガーの発火で width: 100%; にすることで、攻殻機動隊ライクなテキストアニメーションを表現。

<ul id="tab-nav-slide">
	<li><a href="#tab-01-slide">HTML</a></li>
	<li><a href="#tab-02-slide">CSS</a></li>
	<li><a href="#tab-03-slide">JavaScript</a></li>
	<li><a href="#tab-04-slide">PHP</a></li>
	<li><a href="#tab-05-slide">MySQL</a></li>
<!-- /#tab-nav-slide --></ul>

<ul id="tab-panel-slide">
	<li id="tab-01-slide"><img src="//placeimg.com/300/300/animals">
	<p>テキスト</p></li>
	<li id="tab-02-slide">
	<p>テキスト</p></li>
	<li id="tab-03-slide"><img src="//placeimg.com/300/300/nature">
	<p>テキスト</p></li>
	<li id="tab-04-slide">
	<p>テキスト</p></li>
	<li id="tab-05-slide"><img src="//placeimg.com/300/300/tech">
	<p>テキスト</p></li>
<!-- /#tab-panel-slide --></ul>

<li><a href="#tab-03-slide">JavaScript</a></li>

<li><a href="#tab-05-slide">MySQL</a></li>

</ul>

テキスト</li>

テキスト</li>

テキスト</li>

テキスト</li>

テキスト</li>

</ul>

/* ナビゲーション */
#tab-nav-slide {
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	@include cf;

	li {
		float: left;
		margin-right: 10px;
		border: 1px solid #ccc;
		border-bottom: 0;
	}

	a {
		color: black;
		padding: 5px 20px;
		display: block;
		&:hover {
			color: white;
			background: #666;
		}
	}

	.active {
		color: white;
		background: #666;
	}
}

/* パネル */
#tab-panel-slide {
	min-height: 300px;
	overflow: hidden;
	position: relative;

	li {
		@include cf;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}

	img {
		float: left;
		margin-right: 20px;
	}
}

/* ナビゲーション */

#tab-nav-slide {

margin-bottom: 20px;

border-bottom: 1px solid #ccc;

@include cf;

li {

float: left;

margin-right: 10px;

border: 1px solid #ccc;

border-bottom: 0;

}

a {

color: black;

padding: 5px 20px;

display: block;

&:hover {

color: white;

background: #666;

}

.active {

color: white;

background: #666;

}

/* パネル */

#tab-panel-slide {

min-height: 300px;

overflow: hidden;

position: relative;

li {

@include cf;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

}

img {

float: left;

margin-right: 20px;

}

/*
Smooth tab menu
Author: KEITA HIRAI
URL: keitahirai.net
*/
$(function(){
	var touch = ("ontouchstart" in document) ? "touchstart" : "click";

	$("#tab-panel-slide li:not(:first)").css("width", "0");
	$("#tab-nav-slide a:first").addClass("active");

	// $("#tab-nav-slide a")on("click", function() {
	$("#tab-nav-slide a").on(touch, function() {
		$($(this).attr("href")).velocity({width: "100%"}, 800, "ease-out");
		$($(this).attr("href")).siblings().css("width", "0");

		$("#tab-nav-slide a.active").removeClass("active");
		$(this).addClass("active");
		return false;
	});
});

Smooth tab menu

Author: KEITA HIRAI

URL: keitahirai.net

$(function(){

var touch = ("ontouchstart" in document) ? "touchstart" : "click";

$("#tab-panel-slide li:not(:first)").css("width", "0");

$("#tab-nav-slide a:first").addClass("active");

// $("#tab-nav-slide a")on("click", function() {

$("#tab-nav-slide a").on(touch, function() {

$($(this).attr("href")).velocity({width: "100%"}, 800, "ease-out");

$($(this).attr("href")).siblings().css("width", "0");

$("#tab-nav-slide a.active").removeClass("active");

$(this).addClass("active");

return false;

});

カスタマイズ

トリガーを画像にしたい: a / hover / .active を背景画像にする。画像は時代遅れかつ面倒なので、テキストにすべき。

攻殻機動隊ライクな動きではなく、普通の横スライドにしたい

li に div をネストして、CSSで横幅を指定すればOK。

<li id="tab-01-slide"><div>
<img src="//placeimg.com/300/300/animals">
<p>テキスト</p>
</div></li>

テキスト

</div></li>

問題点

Android 4.1 でカクつく

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

posted with amazlet at 15.08.11

西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 16,631

Amazon.co.jpで詳細を見る

鼻ちょうちん

jQuery・タッチデバイスでも滑らかなタブパネルを4種類作りました [IE8対応]

検証済みブラウザとOS

このjQueryで出来ること、出来ないこと

要点とコード

共通コード

シンプル

フェード

縦スライド

横スライド

カスタマイズ

問題点

コメントを投稿する返信をキャンセル

jQuery・タッチデバイスでも滑らかなタブパネルを4種類作りました [IE8対応]

検証済みブラウザとOS

このjQueryで出来ること、出来ないこと

要点とコード

共通コード

シンプル

フェード

縦スライド

横スライド

カスタマイズ

問題点

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル