jquery mobile デサイン作業に必要な物の整理的な物

機能

これらの機能は最新版を基準に作成されております。先ず一回VersionUpが必要かと思います。

メニュー固定表示

固定したいターグにdata-position="fixed"を書くだけでOK

<div data-role="header" data-position="fixed">
	<h1>固定表示</h1>
</div>

フローティング表示

別途ページを作ってリンクをかけdata-rel="dialog"にすればOKです。

<a href="foo.html" data-rel="dialog">フローティング表示</a>

開かれる側はこんな感じです。

<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example</title> 
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

	<script src="../../js/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../js/jquery.mobile.js"></script>

</head> 
<body> 

<div data-role="dialog">
	
		<div data-role="header" data-theme="d">
			<h1>Dialog</h1>

		</div>

		<div data-role="content" data-theme="c">
			<h1>Delete page?</h1>
			<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
			<a href="page-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
			<a href="page-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
		</div>
	</div>


</body>
</html>

スライドバナー

例をご参考ください。

http://jsfiddle.net/zvTqg/1/

タブの切り替え

大体こんな感じです。

<div data-role="footer">		
	<div data-role="navbar">
		<ul>
			<li><a href="#">One</a></li>
			<li><a href="#">Two</a></li>
			<li><a href="#">Three</a></li>
		</ul>
	</div><!-- /navbar -->
</div><!-- /footer -->

icon と入れたい場合は普通にaターグにdata-iconで追加出来ます。

<a href="index.html" data-icon="delete">Delete</a>

icon を置きたい場合は位置はdata-iconposをleft, right, top, bottomにすれば置き変えます。

<div data-role="navbar" data-iconpos="bottom">

ページの中身の切り替えは下のもっと見るボタンの項目を参考ください。

アコーディオン

全体的にdata-role="collapsible-set"でセットし開けときたい奴を data-collapsed="false"2すればいいです。

<div data-role="collapsible-set">

	<div data-role="collapsible" data-collapsed="false">
	<h3>Section 1</h3>
	<p>I'm the collapsible set content for section 1.</p>
	</div>
	
	<div data-role="collapsible">
	<h3>Section 2</h3>
	<p>I'm the collapsible set content for section 2.</p>
	</div>
	
</div>

もっと見るボタン

ページ全体更新

<body> 
<!-- Start of first page -->
<div data-role="page" id="foo">

	<div data-role="header">
		<h1>Foo</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p>View internal page called <a href="#bar">bar</a></p>	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /header -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

	<div data-role="header">
		<h1>Bar</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p><a href="#foo">Back to foo</a></p>	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /header -->
</div><!-- /page -->
</body>

内容だけ入れ替えたい場合

<div data-role="content">
    <div class="faq tab-content">    
        <p>I'm faq page.</p>
    </div>
    <div class="hide help tab-content">    
        <p>I'm help page.</p>    
    </div>
    <div class="hide contact tab-content">    
        <p>I'm contact page.</p>        
    </div>
</div><!-- /content -->
<div data-role="footer">
    <div data-role="navbar" class="tab">
        <ul>
            <li><a href="#" data-id="faq">One</a></li>
            <li><a href="#" data-id="help">Two</a></li>
            <li><a href="#" data-id="contact">Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div>

.hide {
    display: none;
}

$('.tab a').click(function(e) {
    var $this = $(this);
    e.preventDefault();
    $(".tab-content").hide();
    $this.addClass("ui-btn-hover-a");  // a はテーマ番号
    $("."+$this.data("id")).show();
    return false;
});

リストに追加する場合 page 2個が必要です

親ページ

$("#notice .see_more").live("click", function(){
    var $this = $(this);
    $.get('notice.html?page=' + $this.data("page"), function (data) {
        $("#notice").append(data);
        $this.remove();
    });
});

$(".btn_more").live("click", function(){
  var $this = $(this);
  $.get('/d/none/news_list_more?page=' + $this.data("page"), function (data) {
    $('.list .ui-listview').append(data).listview("reflesh");
  });
});

<div data-role="content">
    <ul id="notice">
      最小に見せる内容。
　　　　<li class="see_more">Click Me To View More Rows</li>

    </ul>
</div>

notice.html（子ページ）では追加するターグだけ書けばいいです。

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li class="see_more">Click Me To View More Rows</li>

marocchino/design-guide.md

機能