jQueryMobleでページ作り

jQuery 授業

しかもDreamweaverのメニューを使うことで、
魔法のようなスピードでページが完成。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dw挿入メニュー全部盛り</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css">
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>jQueryMobile練習ページ1</h1>
</div>
<div data-role="content">page1のコンテンツ
<div data-role="fieldcontain">
<label for="flipswitch">flipswitch:オプション</label>
<select name="flipswitch" id="flipswitch" data-role="slider">
<option value="off">オフ</option>
<option value="on">オン</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">スライダー:値（0〜100）</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<ul data-role="listview" data-inset="true">
<li>
<h3><a href="#">ページ1</a></h3>
<p>このページ</p>
<span class="ui-li-count">1</span><a href="#">jQueryMobile練習ページ1</a>
<p class="ui-li-aside">付加情報</p>
</li>
<li>
<h3><a href="#page2">ページ2</a></h3>
<p>縮小可能ブロック</p>
<span class="ui-li-count">2</span><a href="#">jQueryMobile練習ページ2</a>
<p class="ui-li-aside">付加情報</p>
</li>
<li>
<h3><a href="#page3">ページ3</a></h3>
<p>アンケートフォームパーツ</p>
<span class="ui-li-count">3</span><a href="#">jQueryMobile練習ページ3</a>
<p class="ui-li-aside">付加情報</p>
</li>
</ul>
</div>
<div data-role="footer">
<h4>copyright &copy; fight2012</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>jQueryMobile練習ページ2</h1>
</div>
<div data-role="content">縮小可能ブロックでコンテンツ
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>中見出し1</h3>
<p>コンテンツ1</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>中見出し2</h3>
<p>コンテンツ2</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>中見出し3</h3>
<p>コンテンツ3</p>
</div>
</div>
</div>
<div data-role="footer">
<h4>copyright &copy; fight2012</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>jQueryMobile練習ページ3</h1>
</div>
<div data-role="content">アンケートフォーム
<div data-role="fieldcontain">
<label for="textinput">テキスト入力 :</label>
<input type="text" name="textinput" id="textinput" value=""  />
</div>
<div data-role="fieldcontain">
<label for="passwordinput">パスワード入力 :</label>
<input type="password" name="passwordinput" id="passwordinput" value=""  />
</div>
<div data-role="fieldcontain">
<label for="textarea">テキストエリア :</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">セレクトメニュー:オプション</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">オプション 1</option>
<option value="option2">オプション 2</option>
<option value="option3">オプション 3</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>チェックボックス:オプション</legend>
<input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
<label for="checkbox1_0">オプション1</label>
<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">オプション2</label>
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">オプション3</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>ラジオボタン:オプション</legend>
<input type="radio" name="radio1" id="radio1_0" value="" />
<label for="radio1_0">オプション1</label>
<input type="radio" name="radio1" id="radio1_1" value="" />
<label for="radio1_1">オプション2</label>
</fieldset>
</div>
<div data-role="controlgroup" data-type="horizontal"><a href="#" data-role="button">送信ボタン</a><a href="#" data-role="button">取消ボタン</a></div>
</div>
<div data-role="footer">
<h4>copyright &copy; fight2012</h4>
</h4>
</div>
</div>
</body>
</html>