jQueryで簡単タブメニューを自作する

WordPress 3.2.1がリリースされてますね。3.2からIE6非対応とのことなのでまだインストールすらしてませんが、そのうち試そう。


今日はスマホで活躍の場がありそうなタブメニューをjQueryで作成してみます。

スマホ対応ページを作成する場合、PCページをそのまま移植しようとするとやたらにページが長くなってしまう場合があります。そんなときはタブメニューを使って、ちょちょいとコンテンツをまとめてみましょう。

jQueryで簡単タブメニュー サンプル


まずは簡単にHTMLから説明。HTML側にはjQueryで処理しやすいように、タブとコンテンツにidを割り当てます。idは処理しやすくするため「tab_1」「content_1」と文字と数字のセパレータに「_」を入れ、数字が同じものが対になるように割り当てています。

<div class="tabarea">  
<ul class="tabs">  
<li id="tab_1" class="selected">メニュー1</li>  
<li id="tab_2">メニュー2</li>  
<li id="tab_3">メニュー3</li>  
</ul>  
<div id="content_1" class="content">『メニュー1』のコンテンツです。</div>  
<div id="content_2" class="content">『メニュー2』のコンテンツです。</div>  
<div id="content_3" class="content">『メニュー3』のコンテンツです。</div>  
</div>

つぎにCSS。リストを簡単に横並びにできるように「display: box;」を使っています。box非対応ブラウザの表示くずれを避けたい場合は「float: left;」等を使って調整を。

.tabarea {
	background: #000;
}
ul.tabs {  
	display: box;
	display: -webkit-box;
	display: -moz-box;
	margin:0px;
	padding:0px;
	background: #000;
}
ul.tabs li {  
	list-style:none;
	padding: 20px;
	border: 1px solid #000;  
	border-bottom: 0;
	color: #fff;
}
div.content {
	padding: 20px;
	border: 1px solid #000;  
	border-top: 0;
	background: #fff;
}
.tabarea .selected {
	background: #fff;
	color: #000;
}
#content_2, #content_3 {
	display: none;
} 

最後にjQuery。HTML側で割り当てたタブのidの数字部分取得して、数字の一致するコンテンツのみ表示させる、という処理をしています。

$(function(){
	$(".tabarea .tabs li").click(function(){
		var tab = $(this).attr("id"); //クリックされたタブのidを取得
		var num = tab.split("_"); //セパレータで分割
		var con = "#content_" + num[1]; //表示させるコンテンツのid名を生成
		$(this).addClass("selected"); //クリックされたタブのclassにselectedを割り当て
		$(".tabarea li:not(#"+tab+")").removeClass("selected"); //その他のタブのclassにあるselectedを削除
		$(".tabarea div[id^=content]").hide(); //コンテンツをすべて非表示に
		$(".tabarea " + con).show(); //クリックされたタブ対応のコンテンツのみ表示
	});
});


今回のサンプルではHTML側で視覚的にどれが対になっているかわかりやすいようidを割り当てましたが、jQuery側で「.index()」使って要素の順番を取得し、HTML側はいちいちidを記述しなくても動作するようにもできます。


と、こんな感じに、わざわざjQueryプラグインを導入しなくても、ちょこっとjQueryの記述さえわかれば、簡単にタブメニューを導入できます。

jQueryさわったことがないという方も、この機会にぜひお試しあれ。

ページ遷移、読み込み時にふわっと表示するjQueryプラグインを再び修正 [ 2012-02-06 ]

fadeMoverプラグインの解説ページを別途作成しましたので、下記ページをご覧ください。

jquery.fadeMover – Fadein and Fadeout for jQuery


——- 以下 [ 2012-02-06 ] 以前の内容です —-

[ 2012-02-06 追記 ] 最近このページのアクセスがかなり増えているので、記事を見直していたら、制作途中のものを記事にしてしまっていました。もしご利用をお考えになられていても「動かない…wtf…」となっていた方がおられたと思います。。。申し訳ありません。

作成途中で「ページ内リンクの動作禁止にしないと使えないよね、これ。。。」と気がつき、機能を付け足していたんですが、公開していたものが動作確認中の途中のスクリプトでした。それが原因でアンカーにclassを指定していたらまったく動作しないようになっていました。もし古いものをご利用されている方がいらっしゃいましたら修正していただければと思います。

//jquery.fademover.jsの23行目
if(!$(this).attr("class")){

//jquery.fademover.jsの23行目
if(!$(this).hasClass(setting.nofadeOut) && moveUrl.charAt(0) != "#"){

——- 以下 [ 2012-02-06 ] 内容修正済みです —-

以前作成していたページ遷移、読み込み時にふわっと表示するjQueryプラグインを修正しました。

ブラウザのバックボタンで戻った時にフェードアウトしたページが表示されない状態で保持されてしまっていたのですが、下記1行追加してきちんと表示されるようになりました。

window.onunload = function () {}

プラグインの動作は、
・ページ読み込み時にフェードインする。
・アンカーをクリックし次のページに移る前に現在のページをフェードアウトするというものです。

jquery.fademover.js サンプル

$(function(){
	$('フェード処理する要素').fadeMover({'outSpeed':現在のページをフェードアウトするスピード,'inSpeed':ページ読み込み時のフェードインスピード,'effectType':どのエフェクトを利用するか指定,'nofadeOut','クリックしてもフェードアウトさせないアンカーに記述するclass名'});
	$('body').fadeMover();
});

なにも指定しない場合はフェードイン、フェードアウト両方利用し、処理速度は1000ミリ秒(1秒)になっています。

effectTypeの指定は、指定なし(もしくは「1」)は両方、フェードインのみは「2」、フェードアウトのみは「3」となります。

effectTypeは分ける必要もないかなと思いつつ、もしかしたら使うかもってことで分けてあります。

nofadeOutはクリックしてもフェードアウト処理をさせないアンカータグに対して記述するclass名になります。初期値は「nonmover」になっています。これはページ内リンクに対応するために追加したものです。アンカーにclassを記述してください。もしアンカーのclass名に「nonmover」という文字を含む名前を使っている場合(nonmover1等)は、nofadeOutを別のものに指定してください。

[ 2012-02-06 追記 ] 「<a href=”#pagetop”>」等、#から始まるページ内リンクの記述の場合はclassを付ける必要がないように修正しました。

//下記のリンクは動作しません。
<a href="#pagetop">ページの先頭へ戻る</a>
<a href="/img/big.jpg" class="nonmover">画像を開く</a>


[ 2012-02-06 追記 ] javascriptの読み込みの関係で、フェードインする前に全部表示されてから動作する場合があります。この場合フェード処理する要素のスタイル自体に「opacity:0」の記述をしておけば一番いいのですが、Javascriptを切っている場合、表示されなくなります。このあたりは少し悩ましいところですが、javascriptでhead要素にスタイルを追加する方法があります。
※ この記述はフェードアウトのみ利用の場合は必要ありません。
/*
jQueryのappendでhead内に対象要素のスタイルに「opacity:0」を追記
IE6〜8対応用に-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 );
$(function(){〜});の外に記述
*/
$('head').append('<style>#content { opacity: 0;-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 ); }</style>');
$(function(){
	$('#content').fadeMover();
});

必ず「$(function(){〜});の外に記述」するようにして下さい。これで全部表示されることがなく、スームーズにフェードインするようになるはず。お試しください。


jquery.fademover.jsの中身は下記。

/* Copyright (c) 2011 detelu (http://www.detelu.com)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * jquery.fademover.js
 * Version: 2012-02-06
*/
(function($){
	$.fn.fadeMover = function(options) {
        var defaults = {
            'outSpeed': 1000,
            'inSpeed': 1000,
			'effectType': 1, // fadeIn only 2, fadeOut only 3
			'nofadeOut' : 'nonmover' //fadeOut no thx (class name)
        };
        var setting = $.extend(defaults, options);
        this.each(function() {
			var pel = this;
			if(setting.effectType == 1 || setting.effectType == 2) {
				$(pel).css("opacity", 0).animate({opacity: 1}, setting.inSpeed);
			}
			if(setting.effectType == 1 || setting.effectType == 3) {
				$('a').click(function(event) {
					var moveUrl = $(this).attr("href");
					if(!$(this).hasClass(setting.nofadeOut) && moveUrl.charAt(0) != "#"){
						event.preventDefault();
						$(pel).animate({"opacity": 0}, setting.outSpeed, function(){
							location.href = moveUrl;
						});
					}
				});
			}
		});
		return this;
	}
	window.onunload = function () {};
})(jQuery);


プラグインを作ってみようと、ぱぱっと作ったものなので不具合はあるかもしれません。とりあへずZIPファイルを置いておきますので、ご利用の方はどーぞ。

fademover.zip (サンプルファイル等一式 107KB)

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

PhoneGapでandroidアプリ作成のための準備。

携帯をMEDIAS N-06Cに買い替えたので、スマホアプリに挑戦(というよりスマホアプリを作りたくて乗り換えた…)。

HTML5+CSS+Javascriptでアプリが作れるってことでPhoneGapをいじって見ました。

下記日本語の情報サイトがあるのでそちらを見ながら、インストール等環境を準備。

PhoneGap Fan – インストール方法 | PhoneGap Fan


Eclipseとandroid SDKはすでにインストール済みだったので特にすることなし。もしインストール等されていない方は、下記ページが参考になります。

世界を目指せ!Androidアプリ開発入門:第2回 Androidアプリ開発のための環境構築|gihyo.jp … 技術評論社


PhoneGap用のEclipseプラグインも見つけたのでインストール。これを入れるとEclipseにPhoneGapのプロジェクト追加ボタンが表示され、さくさく下準備ができるようになります。

PhoneGap Eclipse PlugIn for Android – speg03の雑記帳


あとは技術評論社さんところの『連載:世界を目指せ!Androidアプリ開発入門』で必要そうな情報を一通り目を通したのですが、テストから公開にあたり下記2ページが参考になりました。

世界を目指せ!Androidアプリ開発入門:第3回 Android SDKでサンプルアプリを使ってみる|gihyo.jp … 技術評論社
世界を目指せ!Androidアプリ開発入門:第12回 Androidマーケットにアプリを公開する|gihyo.jp … 技術評論社

あとはPhoneGapのドキュメントを見ながら、いろいろ機能をテスト中。

PhoneGap API Documentation


HTML5+CSS+Javascriptでネイティブアプリが作れるのは、JavaができないWEBデザイナにとっては一から覚えていく手間がかからないのがありがたいですね。

Javascriptは弱いので、これを機に一から勉強し直そう。

(iphoneの場合はリンゴさんに開発者登録しないと実機テストもできないみたいなので、また本格的に作るときに。。。)