Question

我正在研究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甚至还不知道如何正确地提出这个问题......但是任何有助于此工作的帮助都将不胜感激！

Answer 1

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

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

由Omar提供的modified the jsfiddle添加更多选项，它看起来与原始网站完全相同

<Ignore>Code so I can post link to jsfiddle</ignore>

自定义jQuery Mobile Select菜单

1 个答案: