【问题标题】:Jquery Mobile: Select Box in headerJquery Mobile:在标题中选择框
【发布时间】:2011-07-04 08:47:00
【问题描述】:

是否要在标题中添加一个选择框?

我已经用这段代码测试过

<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 html-select


    【解决方案1】:

    您看到/不完全看到什么?我将您的代码放置在 jQuery Mobile 页面中,并且在页面标题中得到了预期的选择字段。这是我使用的代码 sn-p,它在桌面和移动 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 等,这意味着选择字段不能轻松地与您的标题位于同一行。

    根据文档,您需要通过将其放在自己的 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>
    ...
    

    【讨论】:

    • 很棒,我在 android 模拟器和 android 设备上进行了测试,它看起来如我所愿。谢谢
    【解决方案2】:

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

    例如

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

    【讨论】:

    • Rahhhhhhh,这对我的选择没有帮助,但它让我发现了 data-role="none"。我非常愤怒,以至于 jquerymobile 试图调整我的代码,而我却没有要求任何地方添加类!!!谢谢大佬!!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多