【jQuery mobile】
【jQuery mobile】
とりあえず動きの確認を一通りやってみました。
http://rara.mods.jp/08081
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.defaultTransition = "flip";
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<a href="#page2">home</a>
<h1>page1</h1>
<a href="#page12">save</a>
</div>
<div data-role="content">
<ul data-role="listview" data-split-theme="e">
<li>list
<ul>
<li><a href="#page12">list2</a></li>
<li><a href="#page10">list2</a></li>
<li><a href="#page4">list2</a></li>
</ul>
</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li><a href="#page12">list</a></li>
</ul>
</div>
<div class="ui-bar">
<a href="#page11">Remove</a>
<a href="#page5">Add</a>
<a href="#page2" data-transition="slideup">Up</a>
<a href="#page4" data-transition="slidedown">Down</a>
</div>
<div data-role="footer">
<h4>page1</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>ページ2</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-split-icon="gear">
<li><a href="#page7">list</a><a href="#page9">detail</a></li>
<li><a href="#page3">list</a><a href="#page12">detail</a></li>
<li><a href="#page10">list</a><a href="#page8">detail</a></li>
<li><a href="#page5">list</a><a href="#page4">detail</a></li>
<li><a href="#page6">list</a><a href="#page">detail</a></li>
</ul>
</div>
<div data-role="footer">
<h4>page2</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>page3</h1>
</div>
<div data-role="content">
<ol data-role="listview" data-inset="true">
<li><a href="#page7">ページ</a></li>
<li><a href="#page8">ページ</a></li>
<li><a href="#page11">ページ</a></li>
</ol>
</div>
<div data-role="footer">
<h4>page3</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>page4</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page10"><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page6"><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page3"><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page5"><h1>見出し</h1><p>説明の内容</p></a></li>
</ul>
</div>
<div data-role="footer">
<h4>page4</h4>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="header">
<h1>page5</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page3" data-transition="slideup"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page13" data-transition="slideup"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li>
<li><a href="#page6"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li>
</ul></div>
<div data-role="footer">
<h4>page5</h4>
</div>
</div>
<div data-role="page" id="page6">
<div data-role="header">
<h1>page6</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">見出し</li>
<li><a href="#page7">list</a></li>
<li><a href="#page10">list</a></li>
<li data-role="list-divider">見出し</li>
<li><a href="#page8">list</a></li>
<li><a href="#page9">list</a></li>
</ul>
</div>
<div data-role="footer">
<h4>page6</h4>
</div>
</div>
<div data-role="page" id="page7">
<div data-role="header">
<h1>ヘッダー</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-dividertheme="a">
<li data-role="list-divider">見出し</li>
<li><a href="#page9" data-transition="slideup">list</a></li>
<li><a href="#page13" data-transition="pop">list</a></li>
<li data-role="list-divider" data-transition="slideup">見出し</li>
<li><a href="#page11" data-transition="slideup">list</a></li>
<li><a href="#page8" data-transition="pop">list</a></li>
</ul>
</div>
<div data-role="footer">
<h4>フッター <div data-role="navbar">
<ul>
<li><a href="#page12" data-transition="slideup">One</a></li>
<li><a href="#page" data-transition="pop">Two</a></li>
</ul>
</div></h4>
</div>
</div>
<div data-role="page" id="page8">
<div data-role="header">
<h1>page7</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-count-theme="e">
<li><a href="#page" data-transition="slidedown">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page2" data-transition="flip">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page3" data-transition="slidedown">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page4" data-transition="flip">list<span class="ui-li-count">10</span></a></li>
<li><a href="#page5" data-transition="slidedown">list<span class="ui-li-count">10</span></a></li>
</ul>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
<div data-role="page" id="page9">
<div data-role="header">
<a href="#page" data-direction="reverse" data-transition="flip">TOP</a>
<h1>ヘッダー</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page10" data-transition="pop"><img src="images/pt-f-skull_n.png">list</a></li>
<li><a href="#page2" data-transition="slidedown"><img src="images/pt-f-mushroom2_n_white2.png">list</a></li>
<li><a href="#page11" data-transition="pop"><img src="images/pt-f-skull_black.png">list</a></li>
<li><a href="#page13" data-transition="slideup"><img src="images/pt-f-skull_black_n_white.png">list</a></li>
<li><a href="#page7" data-transition="flip"><img src="images/pt-f-skull_green.png" class="ui-li-icon">list</a></li>
</ul>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
<div data-role="page" id="page10">
<div data-role="header">
<h1>ヘッダー</h1>
<div data-role="navbar">
<ul>
<li><a href="#page" data-transition="flip">One</a></li>
<li><a href="#page8" data-transition="slideup">Two</a></li>
</ul>
</div>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#page7" data-transition="flip"><strong>I'm Block A</strong></a></div>
<div class="ui-block-b"><a href="#page13" data-transition="slideup"><strong>I'm Block B</strong></a></div>
</div>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
<div data-role="page" id="page11">
<div data-role="header">
<h1>ヘッダー</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a"><div class=" ui-bar ui-bar-e"><a href="#page12" data-transition="slidedown">Block A</a></div></div>
<div class="ui-block-b"><div class=" ui-bar ui-bar-e"><a href="#page8" data-transition="slideup">Block B</a></div></div>
<div class="ui-block-c"><div class=" ui-bar ui-bar-e"><a href="#page10" data-transition="slidedown">Block C</a></div></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
<div data-role="page" id="page12">
<div data-role="header">
<h1>ヘッダー</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a"><div class=" ui-bar ui-bar-e"><a href="#page13" data-transition="pop">Block A</a></div></div>
<div class="ui-block-b"><div class=" ui-bar ui-bar-e"><a href="#page11" data-transition="pop">Block B</a></div></div>
<div class="ui-block-c"><div class=" ui-bar ui-bar-e"><a href="#page9" data-transition="pop">Block C</a></div></div>
<div class="ui-block-a"><div class=" ui-bar ui-bar-e"><a href="#page8" data-transition="pop">Block A</a></div></div>
<div class="ui-block-b"><div class=" ui-bar ui-bar-e"><a href="#page7" data-transition="pop">Block B</a></div></div>
<div class="ui-block-c"><div class=" ui-bar ui-bar-e"><a href="#page6" data-transition="pop">Block C</a></div></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
<div data-role="page" id="page13">
<div data-role="header" data-position="fixed">
<h1>ページ1</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">list1</a></li>
<li><a href="#page2">list2</a></li>
<li><a href="#page2">list3</a></li>
<li><a href="#page2">list4</a></li>
<li><a href="#page2">list5</a></li>
<li><a href="#page2">list6</a></li>
<li><a href="#page2">list7</a></li>
<li><a href="#page2">list8</a></li>
<li><a href="#page2">list9</a></li>
<li><a href="#page2">list10</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>フッター1</h4>
</div>
</div>
</body>
</html>
