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

如果您的意思是“您的状态”示例看起来像一个对话框，在屏幕上单独显示菜单的内容，您必须向选择元素添加更多选项，如您链接的页面中所述：

当设备屏幕上显示的选项太多时，框架将自动创建一个新的“页面”，其中填充了选项的标准列表视图。这允许我们使用设备中包含的本机滚动来移动长列表。标签内的文本用作此页面的标题。

我修改了 Omar提供的 jsfiddle 以添加更多选项，它看起来与原始站点中的完全一样

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