Pea*_*oon 7 html-select jquery-mobile
无论如何在标题中添加一个选择框？
我已经使用此代码进行了测试
<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>
但它不起作用
编辑:
对不起,因为问题不是那么清楚.使用上面的代码,我在标题中有一个选择框,但是选择框居中(在页面标题下面).我想要的是,选择位于右侧(就像标题内的按钮一样).
| [返回] ---------标题----------- [选择框] |
你到底看到/没有看到什么？我将您的代码放置在 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当然是一个块元素，select一旦 jQM 运行其代码，该字段也是如此。如果在 WebKit 浏览器中呈现页面后检查该字段，您将看到 jQM 应用了额外的 div 等，这意味着选择字段不能轻松地与标头驻留在同一行。
根据文档，您需要在标头中尝试自定义标记，方法是将其放置在自己的标记中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>
...