Question

无论如何都要在标题内添加一个选择框吗？

我已使用此代码测试

<div data-role="header" data-position="inline" data-theme="b">
    <h1>My Page</h1>
    <select>
        <option>Option 1</option>
        <option>option 2</option>
    </select>
 </div>

但它不起作用

修改

抱歉，因为问题不是那么清楚。使用上面的代码，我在标题中有一个选择框，但是选择框居中（在页面标题下面）。我想要的是，选择位于右侧（就像标题内的按钮一样）。

| [返回] ---------标题----------- [选择框] |

Answer 1

你看到/看不到什么？我将您的代码放在jQuery Mobile页面中，我在页眉中有一个预期的选择字段。这是我使用的代码片段，它在桌面和移动Safari（iPad）中检查确定：

<body>
  <div data-role="page" id="somepage" data-theme="c">
    <div data-role="header" data-position="inline" data-theme="b">
      <h1>My Page</h1>
      <select>
       <option>Option 1</option>
       <option>option 2</option>
      </select>
    </div>
    <!-- rest of page -->
  </div>
<body>

修改我认为你遇到的问题是h1当然是一个块元素，一旦jQM运行其代码，select字段也是如此。如果在WebKit浏览器中呈现页面后检查字段，您将看到jQM应用了额外的div等，这意味着select字段不能轻易地与标题位于同一行。

根据文档，您需要在标题中尝试自定义标记，方法是将其放在自己的div中（因此jQM不会尝试操作它），然后自己设置样式。你想要实现的外观最好在构建带有两个链接的标题栏时完成，但显然不适合你，因为第二个“按钮”不是链接，它是select字段：

标题插件查找标题容器的直接子项，并自动设置左侧按钮插槽中的第一个链接和右侧的第二个链接。在此示例中，“取消”按钮将显示在左侧插槽中，“保存”将根据其在源顺序中的顺序显示在右侧插槽中。

你可以尝试做这样的事情来捏造它，但是你需要测试你在你的应用程序中支持的设备（显然把这些风格放在一个类中，我只是这样做了示例目的）：

<div data-role="header" data-position="inline" data-theme="b"> <h1>My Page</h1> <div data-role="fieldcontain" style="position: absolute; top: 0; right: 0; margin: 0; padding: 0"> <select> <option>Option 1</option> <option>option 2</option> </select> </div> </div> ...

Answer 2

如果您想使用实际的Select元素，请将其封装在data-role="none"的锚标记中。

e.g。

<div data-role="header">
    <a data-role="none">
        <select>
            <option value="1">Option One</option>
            <option value="2">Option Two</option>
        </select>
    </a>
</div>

Jquery Mobile：在标题中选择Box

2 个答案: