Category: jQuery mobile / jQuery UI

jQuery Draggable

jQuery UIのHPより、ひな形をダウンロードします。
jQueryUI

draggableは以下のように書きます。
$(function(){
$(‘#hoge’).draggable();
}); 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    #box {
    width: 100px;
    height: 100px;
    background: green;
    }
  </style>
  </head>
  <body>
  <div id="box">box</div>

  <script>
    $(function(){
      $('#box').draggable();
    });    
  </script>
  </body>
</html>

設定、イベント

$(function(){
      $('#box').draggable({
        // axis: 'x'
        opacity: 0.5,
        // handle: '.handle'
        drag: function(event, ui){
          console.log(ui.position);
        }
      });
    });

jQuery mobile demo

リフェレンス：http://api.jquerymobile.com/data-attribute/

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>D3.js</title>
      <meta name="viewport" content="width=device-width, initial-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">
        <div data-role="header" data-position="fixed">
          <a href="#menu" data-icon="gear">左</a>
          <h1>ホーム</h1>
          <a href="#menu" data-icon="check" class="ui-btn-right">右</a>
        </div>
        <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 data-role="content">
            <ul data-role="listview" data-filter="true">
            <li data-role="list-divider">日本語</li>
              <li><a href="#menu">赤いページ<span class="ui-li-count">23</span></a></li>
              <li><a href="#menu">青いページ</a></li>
              <li><a href="#menu">黄色いページ</a></li>
              <li data-role="list-divider">英語</li>
              <li><a href="#menu">Red<span class="ui-li-count">23</span></a></li>
              <li><a href="#menu">Blue</a></li>
              <li><a href="#menu">Yellow</a></li>
            </ul>
          </div>
          <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="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>

              <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                  <legend>色</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">
                  <legend>色</legend>
                  <input type="radio" name="color" value="1" id="1" checked="checked">
                  <label for="1">赤</label>
                  <input type="radio" name="color" value="2" id="2">
                  <label for="2">青</label>
                  <input type="radio" name="color" value="3" id="3">
                  <label for="3">黄</label>
                </fieldset>
              </div>

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

              <input type="submit" value="送信!">
            </form>
        </div>
        <div data-role="footer" data-position="fixed">
          <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>

      <div data-role="page" id="menu" data-add-back-btn="true">
        <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" class="ui-bar">
          <a href="#menu" data-icon="plus">追加</a>
          <a href="#menu" data-icon="delete">削除</a>
          <h4>copyright 2016</h4>
        </div>
      </div>
  </body>
</html>

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>

jQuery mobile

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>D3.js</title>
      <meta name="viewport" content="width=device-width, initial-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">
        <div data-role="header">
          <h1>ホーム</h1>
        </div>
        <div data-role="content">
          <p>こんにちは！</p>
        </div>
        <div data-role="footer">
          <h4>copyright 2016</h4>
        </div>
      </div>
  </body>
</html>

ページ内に複数ページ作成することも可能です。

  <body>
      <div data-role="page" id="home">
        <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 2016</h4>
        </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 2016</h4>
        </div>
      </div>
  </body>

リンク設定

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