自定义 jQuery Mobile 选择菜单答案

【问题标题】：Custom jQuery Mobile Select menu自定义 jQuery Mobile 选择菜单
【发布时间】：2013-09-22 06:31:21
【问题描述】：

我正在开发我在 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 的了解还不够多，甚至不知道如何正确地提出这个问题......但是如果能帮助我解决这个问题，我们将不胜感激！

【问题讨论】：

这里可以正常使用，自定义菜单应该jsfiddle.net/Palestinian/mBuQU
好的，我确实看到 html 可以正常工作，所有这些都...但是为什么当我从 jquery 函数加载菜单时它会中断？ jsfiddle.net/w55ec
你的意思是像this jsfiddle？ 1）呼叫增强.selectmenu() 2）你应该在jquery mobile之前加载jquery。 3) 使用.append 或.appendTo 以免删除目标元素的内容。

标签： jquery-mobile

【解决方案1】：

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

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

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

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

【讨论】：

好的，我确实看到 html 可以正常工作，所有这些都...但是为什么当我从 jquery 函数加载菜单时它会中断？ jsfiddle.net/w55ec