2011年10月18日

jquerymobileのタブ

お願いします♪いいねとかつぶやいたりして下さい
 
jquerymobileはぐぐってもタブデザインがでてこない。

機能としてつけときゃいいのに。

で、以下オリジナル。

てきとーなヘッダにjsを追加
//jquery tabs
$(function() {  
	$('.tabclear a').click(function(){  
		$('.tabclear a').each(function(){  
			$(this).removeClass('ui-btn-active');
			
			no = $('.tabclear a').index(this);
			$('.tabgroup>div').eq(no).hide();
			
		});  
		$(this).addClass('ui-btn-active');  
		  
	});    
	  
	$(".tabclear a").click(function() {  
		no = $('.tabclear a').index(this);
		$('.tabgroup>div').eq(no).toggle();
	});  
});


htmlに以下を追加
<style type="text/css">
	.tabgroup>div {
		display:none;	
	}

</style>
<div class="tab tabclear" data-role="controlgroup" data-type="horizontal">
    <a data-role="button">無料占い</a>
    <a data-role="button" class="ui-btn-active">有料占い</a>
    <a data-role="button">太郎</a>
</div>

<div class="tabgroup">
	<div>
    	無料占いの内容
    </div>
    <div style="display:block;">
    	[ 初期表示 ] 有料占いのないよう
    </div>
    <div>
    	うらしまたろーーーーーーーーーーーーーーーーーーーーろーたー
    </div>
</div>


こんな感じか。
関連するタグ: Dreamweaver cakephp iphone
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ