jQueryMobileのあれこれ

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Insert title here</title>

<meta name=”viewport” content=”width=device-width”, initital-scale=1″>

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
</head>
<body>

<div data-role=”page” id=”home” data-add-back-btn=”true”>
<div data-role=”header” data-position=”fixed”>
<div data-role=”navbar”>
<ul>
<li><a href=”#menu”>メニュー1</a></li>
<li><a href=”#menu” class=”ui-btn-active”>メニュー2</a></li>
<li><a href=”#menu”>メニュー3</a></li>
</ul>
</div>
<!–
<a href=”#menu” data-icon=”gear” class=”ui-btn-right”>左</a>
–>
<h1>ホーム</h1>
<a href=”#menu” data-role=”button” >右</a> <!– data-theme=”b” –>
</div>
<div data-role=”content”>
<p>こんにちわ!</p>
<p>こんにちわ!</p>

<form action=”mail.php” method=”post”>
<div data-role=”fieldcontain”>
<label for=”name”>お名前</label>
<input type=”text” name=”name” id=”name” value=””/>
</div>

<div data-role=”fieldcontain”>
<label for=”keywords”>検索</label>
<input type=”seach” name=”keywords” id=”keywords” value=””/>
</div>

<!– スライダー –>
<div data-role=”fieldcontain”>
<label for=”amount”>検索</label>
<input type=”range” name=”amount” min=”0″ max=”100″ id=”amount” value=”20″/>
</div>

<!– チェックボクス –>
<div data-role=”fieldcontain”>
<fieldset data-role=”controlgroup” data-type=”horizontal”>
<legend>色1</legend>
<input type=”checkbox” name=”color_1″ id=”color_1″>
<label for=”color_1″>赤</label>
<input type=”checkbox” name=”color_2″ id=”color_2″>
<label for=”color_2″>青</label>
<input type=”checkbox” name=”color_3″ id=”color_3″>
<label for=”color_3″>黄</label>
</fieldset>
</div>

<!– ラジオボタン –>
<div data-role=”fieldcontain”>
<fieldset data-role=”controlgroup” data-type=”horizontal”>
<legend>色2</legend>
<input type=”radio” name=”color” value=”1″ id=”color_1″>
<label for=”color_1″>赤</label>
<input type=”radio” name=”color” value=”2″ id=”color_2″>
<label for=”color_2″>青</label>
<input type=”radio” name=”color” value=”3″ id=”color_3″>
<label for=”color_3″>黄</label>
</fieldset>
</div>

<!– りすと –>
<ul data-role=”listview” data-filter=”true”>
<li data-role=”list-divider”>日本語</li>
<li><a href=”#menu”>赤いぺーじ</a><span class=”ui-li-count”>10</span></li>
<li><a href=”#menu”>青いぺーじ</a></li>
<li><a href=”#menu”>赤いぺーじ</a></li>
<li data-role=”list-divider”>日本語</li>
<li><a href=”#menu”>赤いぺーじ</a><span class=”ui-li-count”>10</span></li>
<li><a href=”#menu”>青いぺーじ</a></li>
<li><a href=”#menu”>赤いぺーじ</a></li>
</ul>

<div data-role=”fieldcontain”>
<label for =”color”>色3</label>
<select name=”color” id=”color” data-native-menu=”false” multiple>
<option value=”1″>赤</option>
<option value=”2″>青</option>
<option value=”3″>気</option>
</select>
</div>

<input type=”submit” value=”送信!”/>
</form>
<p><a href=”#home”>ホーム</a></p>
<p><a href=”#menu” data-role=”button” data-icon=”gear” data-inline=”true”>メニュー</a></p>

<div data-role=”controlgroup” > <!– data-type=”horizontal” –>
<a href=”#menu” data-role=”button” data-icon=”gear” data-theme=”b”>メニュー1</a>
<a href=”#menu” data-role=”button” data-icon=”gear” >メニュー2</a>
<a href=”#menu” data-role=”button” data-icon=”gear” >メニュー3</a>
</div>
<p><a href=”http://google.com” rel=”external”>google</a></p>
<p><a href=”a.html”>a</a></p>
<p><a href=”a.html” data-ajax=”false”>a(ajax-false)</a></p>

</div>
<div data-role=”footer” data-position=”fixed”>
<div data-role=”navbar”>
<ul>
<li><a href=”#menu”>メニュー1</a></li>
<li><a href=”#menu” class=”ui-btn-active”>メニュー2</a></li>
<li><a href=”#menu”>メニュー3</a></li>
</ul>
</div>

<!–
<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#menu” data-icon=”plus”>追加</a>
<a href=”#menu” data-icon=”delete”>追加</a>
</div>
–>
</div>
</div>
<div data-role=”page” id = “menu”>
<div data-role=”header”>
<h1>メニュー</h1>
</div>
<div data-role=”content”>
<p>こんにちわ!</p>
<p><a href=”#home”>ホーム</a></p>
<p><a href=”#menu”>メニュー</a></p>
</div>
<div data-role=”footer”>
<h4>Copyright 2012</h4>
</div>
</div>

</body>
</html>