0

jQuery Mobile で最初のアプリを作成しています。セレクトメニューで困っています。

http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.htmlで「あなたの状態」スタイルをコピーして貼り付け、コードに組み込んでみました:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CAST</title>
    <link rel="stylesheet" href="./custom.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="./global.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  </head>

  <body>
    <div data-role="page" data-theme="c" id="home-page" class="type-interior" data-url="home-page">
        <div data-role="header" style="background:#AAA">
             <h1><a href="javascript:Load.main();"><img src="/logo.png" width="97" height="50" border="0" /></a></h1>

        </div>
        <h2 id="header_title"></h2>

        <div id="error" class="error" style="display:none;">Could not connect to the server. Please try again.</div>
        <div data-role="content">
            <div class="content-primary" id="content">
                <div data-role="fieldcontain">
                    <label for="client" class="select">Client:</label>
                    <select name="client" id="client" data-native-menu="false">
                        <option value="1">Option 1</option>
                    </select>
                </div>
            </div>
        </div>
        <div data-role="footer">
             <h4>&copy; 2013</h4>

        </div>
    </div>
  </body>
</html>

選択メニューが表示されますが、サイトのカスタム モバイル バージョンのように見えませんか? 通常の選択メニューのように見えます。

jquery.mobile についてはまだ十分に理解していないため、この質問を適切に行う方法さえ理解できていません。

4

1 に答える 1

1

「あなたの状態」の例がダイアログのように見え、画面にメニューの内容だけを表示している場合は、リンクするページに記載されているように、select 要素にさらにオプションを追加する必要があります。

デバイスの画面に表示するオプションが多すぎる場合、フレームワークは、オプションの標準リストビューが取り込まれた新しい「ページ」を自動的に作成します。これにより、デバイスに含まれているネイティブのスクロールを使用して、長いリストを移動できます。ラベル内のテキストは、このページのタイトルとして使用されます。

Omar から提供された jsfiddleを変更してオプションを追加しましたが、元のサイトとまったく同じように見えます

<Ignore>Code so I can post link to jsfiddle</ignore>
于 2013-09-21T22:31:21.153 に答える