jquery-mobile - how to make header left side with right and side button in jquery mobile

Question

can you please tell me how to how header label left side with button on right side .

i found like this

<div data-role="header">
    <a href="index.html" data-icon="delete">Cancel</a>
    <h1>Edit Contact</h1>
    <a href="index.html" data-icon="check" data-theme="b">Save</a>

But i need like this

My case label on left side and button on right side

Answer 1

你可以这样做，覆盖ui-title和ui-btn-right样式。但是，对于第二个按钮，给它一个自定义类，以免用ui-btn-right. 我.second为第二个按钮使用了自定义类。

演示

CSS - 我使用.ui-header是为了不改变页脚样式。

.ui-header .ui-title {
   margin-left: 2px !important;
   text-align: left !important;
   width: 150px !important;
}

.second.ui-btn-right {
   right: 80px !important
}

HTML

<div data-role="header">
  <a href="index.html" data-icon="delete" class="second ui-btn-right">Cancel</a>
  <h1>Edit Contact</h1>
  <a href="index.html" data-icon="check" data-theme="b" class="ui-btn-right">Save</a>
</div>

Answer 2

你可以这样做，DEMO http://jsfiddle.net/yeyene/5kfnT/3/

JQM 文档：http: //view.jquerymobile.com/1.3.1/dist/demos/widgets/headers/

自定义标头配置

如果您需要创建不遵循默认配置的标头，只需将自定义样式标记包装在任何容器中，例如 div。该插件不会将自动按钮逻辑应用于标题容器内的包装内容，因此您可以编写自定义样式来布置标题中的内容。

也可以在完全不使用标题数据角色的情况下创建自定义条。例如，从任何容器开始并添加 ui-bar 类以应用标准条形填充，并添加 ui-bar-b 类以从您的主题中分配条形样本样式。（“b”可以是任何样本字母。）

<div data-role="header" data-position="fixed">
    <div class="ui-block-a"><h3>Header</h3></div>
    <div class="ui-block-b">&nbsp;</div>
    <div class="ui-block-c">&nbsp;</div>
    <div class="ui-block-d">
        <a href="#" data-role="button" data-inline="true" data-mini="true">A</a>
        <a href="#" data-role="button" data-inline="true" data-mini="true">B</a>
        <a href="#" data-role="button" data-inline="true" data-mini="true">C</a>
    </div>
</div>