«

»

5月 04

jQueryMobile メモ

このエントリーを含むはてなブックマークはてなブックマーク - jQueryMobile メモ Googleブックマークに追加 このエントリをつぶやくこのWebページのtweets

jQueryMobileについて覚えたことのメモ


画面遷移

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
    <!-- ヘッダー data-position="fixed"で常に画面上部に表示される -->
    <div data-role="header" data-position="fixed">
        <h1>ホーム</h1>
    </div>
    
    <div data-role="content">
        <!-- 同htmlに書いたページへ -->
        <p><a href="#page1">ページ1</a></p>
        <!-- 外部htmlへ -->
        <p><a href="page2.html">ページ2</a></p>
        <!-- 外部htmlへ(ajaxなし) -->
        <p><a href="page2.html" data-ajax="false">ページ2 (data-ajax=false)</a></p>
        <!-- 外部サイトへ -->
        <p><a href="http://www.yahoo.co.jp/" rel="external">Yahoo!</a></p>
    </div>
    <!-- フッター -->
    <div data-role="footer" class="ui-bar" data-position="fixed">
      <h4>footer</h4>
    </div>
</div>

<div data-role="page" id="page1" data-add-back-btn="true">
    <div data-role="header">
        <h1>ページ1</h1>
    </div>
    <div data-role="content">
        <p><a href="#home">ホーム</a></p>
        <p><a href="page2.html">ページ2</a></p>
    </div>
    <div data-role="footer">
        <h4>footer</h4>
    </div>
</div>

</body>
</html>

画面遷移時のエフェクト

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
    <!-- ヘッダー data-position="fixed"で常に画面上部に表示される -->
    <div data-role="header" data-position="fixed">
        <h1>ホーム</h1>
    </div>
    
    <div data-role="content">
        <p><a href="#page1" data-transition="slide">slide</a></p>
        <p><a href="#page1" data-transition="slideup">slideup</a></p>
        <p><a href="#page1" data-transition="slidedown">slidedown</a></p>
        <p><a href="#page1" data-transition="pop">pop</a></p>
        <p><a href="#page1" data-transition="fade">fade</a></p>
        <p><a href="#page1" data-transition="flip">flip</a></p>
        <p><a href="#page1" data-transition="slide" data-direction="reverse">slide reverse</a></p>
    </div>
    <!-- フッター -->
    <div data-role="footer" class="ui-bar" data-position="fixed">
      <h4>footer</h4>
    </div>
</div>

<div data-role="page" id="page1" data-add-back-btn="true">
    <div data-role="header">
        <h1>ページ1</h1>
    </div>
    <div data-role="content">
        <p><a href="#home" data-transition="slide">slide</a></p>
        <p><a href="#home" data-transition="slideup">slideup</a></p>
        <p><a href="#home" data-transition="slidedown">slidedown</a></p>
        <p><a href="#home" data-transition="pop">pop</a></p>
        <p><a href="#home" data-transition="fade">fade</a></p>
        <p><a href="#home" data-transition="flip">flip</a></p>
        <p><a href="#home" data-transition="slide" data-direction="reverse">slide reverse</a></p>
    </div>
    <div data-role="footer">
        <h4>footer</h4>
    </div>
</div>

</body>
</html>

ボタンとアイコン

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
    <!-- ヘッダー data-position="fixed"で常に画面上部に表示される -->
    <div data-role="header" data-position="fixed">
        <h1>ホーム</h1>
    </div>
    
    <div data-role="content">
        <p><a href="#home" data-role="button">ボタン</a></p>
        <p><a href="#home" data-role="button" data-inline="true">ボタン</a></p>
        <p><a href="#home" data-role="button" data-inline="true" data-theme="a">ボタン</a></p>
        <p><a href="#home" data-role="button" data-inline="true" data-theme="b">ボタン</a></p>
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#home" data-role="button" data-inline="true">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="a">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="b">ボタン</a>
        </div>
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#home" data-role="button" data-inline="true" data-icon="arrow-l">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="a" data-icon="arrow-r">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="b" data-icon="arrow-u">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-icon="arrow-d">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="a" data-icon="delete">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="b" data-icon="plus">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-icon="minus">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="a" data-icon="check">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="b" data-icon="gear">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-icon="refresh">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="a" data-icon="forward">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="b" data-icon="back">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-icon="grid">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="a" data-icon="star">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="b" data-icon="alert">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-icon="info">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="a" data-icon="home">ボタン</a>
            <a href="#home" data-role="button" data-inline="true" data-theme="b" data-icon="search">ボタン</a>
        </div>
    </div>
    <!-- フッター -->
    <div data-role="footer" class="ui-bar" data-position="fixed">
      <h4>footer</h4>
    </div>
</div>

</body>
</html>

ヘッダー、フッダーのボタン

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
    <div data-role="header">
        <a href="#page" data-icon="gear">ボタン1</a>
        <h1>ホーム</h1>
        <a href="#page" data-icon="check" class="ui-btn-right">ボタン2</a>
    </div>
    
    <div data-role="content">
        <a href="#page" data-role="button">次のページへ</a>
    </div>
    <!-- フッター -->
    <div data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#page" data-icon="plus">ボタン3</a>
            <a href="#page" data-icon="delete">ボタン4</a>
        </div>
    </div>
</div>

<div data-role="page" id="page">
    <div data-role="header">
        <div data-role="navbar">
            <ul>
                <li><a href="#home">ボタン1</a></li>
                <li><a href="#home" class="ui-btn-active">ボタン2</a></li>
                <li><a href="#home">ボタン3</a></li>
            </ul>
        </div>
    </div>
    
    <div data-role="content">
        <a href="#home" data-role="button">前のページへ</a>
    </div>
    <div data-role="footer" class="ui-bar">
        <p>フッター</p>
    </div>
</div>

</body>
</html>

リスト

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
    <!-- ヘッダー data-position="fixed"で常に画面上部に表示される -->
    <div data-role="header" data-position="fixed">
        <h1>ホーム</h1>
    </div>
    
    <div data-role="content">
        <ul data-role="listview">
            <li data-role="list-divider">A</li>
            <li><a href="#home">ボタン1<span class="ui-li-count">10</span></a></li>
            <li><a href="#home">ボタン2</a></li>
            <li><a href="#home">ボタン3</a></li>
            <li data-role="list-divider">B</li>
            <li><a href="#home">ボタン4<span class="ui-li-count">20</span></a></li>
            <li><a href="#home">ボタン5</a></li>
            <li><a href="#home">ボタン6</a></li>
            <li data-role="list-divider">画像</li>
            <li><a href="#home"><img src="test.jpg"><h3>ペンギン1</h3><p>ぺんぎんぺんぎんぺんぎん</p></a></li>
            <li><a href="#home"><img src="test.jpg"><h3>ペンギン2</h3><p>ぺんぎんぺんぎんぺんぎん</p></a></li>
            <li><a href="#home"><img src="test.jpg"><h3>ペンギン3</h3><p>ぺんぎんぺんぎんぺんぎん</p></a></li>
        </ul>
        
        <br/><br/><br/>
        <ul data-role="listview" data-filter="true">
            <li data-role="list-divider">検索機能付き</li>
            <li><a href="#home">A</a></li>
            <li><a href="#home">B</a></li>
            <li><a href="#home">AA</a></li>
            <li><a href="#home">BB</span></a></li>
            <li><a href="#home">AAB</a></li>
            <li><a href="#home">BBA</a></li>
        </ul>
    </div>
    <!-- フッター -->
    <div data-role="footer" class="ui-bar" data-position="fixed">
      <h4>footer</h4>
    </div>
</div>

</body>
</html>

フォーム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
    <!-- ヘッダー data-position="fixed"で常に画面上部に表示される -->
    <div data-role="header" data-position="fixed">
        <h1>ホーム</h1>
    </div>
    
    <div data-role="content">
        <form action="#home" 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="20">
            </div>
            
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>チェックボックス</legend>
                    <input type="checkbox" name="check_1" id="check_1">
                    <label for="check_1">1</label>
                    <input type="checkbox"name="check_2" id="check_2">
                    <label for="check_2">2</label>
                    <input type="checkbox" name="check_3" id="check_3">
                    <label for="check_3">3</label>
                </fieldset>
            </div>
            
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>ラジオボタン</legend>
                    <input type="radio" name="radio" id="radio_1" value="1" checked="checked">
                    <label for="radio_1">1</label>
                    <input type="radio" name="radio" id="radio_2" value="2">
                    <label for="radio_2">2</label>
                    <input type="radio" name="radio" id="radio_3" value="3">
                    <label for="radio_3">3</label>
                </fieldset>
            </div>
            
            <div data-role="fieldcontain">
                <label for="color">セレクト</label>
                <select name="select" id="select" data-native-menu="false" multiple>
                    <option value="1" selected>1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
            
            <input type="submit" value="送信">
        </form>
    </div>
    <!-- フッター -->
    <div data-role="footer" class="ui-bar" data-position="fixed">
      <h4>footer</h4>
    </div>
</div>

</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次の HTMLタグおよび属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>