gpt4 book ai didi

jquery-mobile - jQuery Mobile : Select Box in header

转载 作者:行者123 更新时间:2023-12-04 03:46:49 24 4
gpt4 key购买 nike

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

我已经用这段代码测试过

<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当然是 block 元素, select 也是jQM 运行其代码后的字段。如果您在 WebKit 浏览器中呈现页面后检查该字段,您将看到 jQM 应用了额外的 div 等,这意味着选择字段不能轻松地与您的标题位于同一行。

根据文档,您需要通过将其放在自己的 div 中来试验标题中的自定义标记。 (所以 jQM 不会尝试操纵它)然后自己设置样式。您想要实现的外观最好在构建带有两个链接的标题栏时完成,但显然这不适用于您,因为第二个“按钮”不是链接,它是 select field :

The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order.



您可以尝试做这样的事情来伪造它,但是您需要在您的应用程序中支持的设备上进行测试(并且显然将样式放在一个类中,我只是出于示例目的这样做) :
<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>
...

关于jquery-mobile - jQuery Mobile : Select Box in header,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6569179/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com