使用jQuery Mobile存档标题和“子标题”

Question

我无法通过以下方式正确组织jQuery Mobile组件：

我正在尝试构建这个固定的搜索栏，但经过多次尝试后，我终于来到这里寻求帮助。

<div data-role="header" data-position="fixed" data-theme="b">
        <a data-role="button" class="ui-btn-lft" href="#pgIndex" data-icon="arrow-l" data-theme="b">Back</a>
        <h1>Title</h1>
    </div>
    <div data-role="header" data-theme="b" id="second-header">
        <div style="float:left; width: 75%;">
            <select name="selCombo1" id="selCombo1" data-mini="true">
                <option value="0">Option 0 - All</option>
            </select>
            <span style="margin-bottom: 3px;"></span>
            <select name="selCombo2" id="selCombo2" data-mini="true">
                <option value="0">Option 0 - All</option>
            </select>
        </div>
        <div style="float:right; width: 25%;">
            <a data-role="button" data-mini="true" data-icon="search" data-iconpos="top" data-rel="back">Search</a>     
        </div>
    </div>

有没有一种简单的方法来实现这个目标？

完整的代码在jsFiddle上： http://jsfiddle.net/mbarni/rjdt2/

Answer 1

通过在类中添加div，可以实现与第二个标题级别类似的效果：

class="ui-bar ui-bar-b"

到你的标题。以下是使用代码的简单示例。

JSFiddle Example

For more info, check the bottom of this doc