jquery-mobile - 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/