jQuery mobile data-attribute

data-attribute: http://api.jquerymobile.com/data-attribute/

slideup

        <div data-role="content">
          <p>こんにちは！</p>
          <p><a href="#home">ホーム</a></p>
          <p><a href="#menu" data-transition="slideup">メニュー</a></p>
        </div>

ボタン:icon(http://api.jquerymobile.com/icons/)

<div data-role="controlgroup" data-type="horizontal">
          <p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
          メニュー</a></p>
          <p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
          メニュー</a></p>
          <p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
          メニュー</a></p>
          </div>

theme(http://api.jquerymobile.com/theme/)

<div data-role="content">
          <p>こんにちは！</p>
          <p><a href="#home" data-role="button">ホーム</a></p>
          <p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>
        </div>

header button

<div data-role="content">
          <p>こんにちは！</p>
          <p><a href="#home" data-role="button">ホーム</a></p>
          <p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>
        </div>

footer

<div data-role="footer" class="ui-bar">
          <div data-role="controlgroup" data-type="horizontal">
          <a href="#menu" data-icon="plus">追加</a>
          <a href="#menu" data-icon="delete">削除</a>
          </div>
        </div>

フッター、ヘッダーナビゲーション

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

ヘッダー、フッター固定

<div data-role="header" data-position="fixed">
<div data-role="footer" data-position="fixed">

form, 検索、スライダー

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

              <input type="submit" value="送信!">
            </form>
<div data-role="fieldcontain">
                <label for="keywords">検索</label>
                <input type="search" name="keywords" id="keywords" value="">
              </div>

<div data-role="fieldcontain">
                <label for="amount">数量</label>
                <input type="range" name="amount" id="amount" min="0" max="100" value="">
              </div>