Ubuntu touch HTML 5 如何创建复杂的标题？

Question

我正在尝试为 Ubuntu touch 构建一个小型 html5 应用程序。通常，处理 html5 代码相当困难。设计指南给出了许多有关如何构建应用程序的建议，但文档和教程都没有描述如何实现这些元素。

目前，我只想按照设计指南中的建议向标题添加一个搜索组件：

我的标题使用标签导航：

    <header data-role="header" id="xxx">
  <ul data-role="tabs">
    <li data-role="tabitem" data-page="maintab">Main     </li>
    <li data-role="tabitem" data-page="anotherpage">Favorites</li>
  </ul>
</header>

我的问题是，当标题仅定义为列表时，如何向标题添加搜索字段？