如何在jquery mobile中使用右侧和侧面按钮使标题左侧

Question

请告诉我如何在右侧按钮标题标签的左侧。

我发现了这样的

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

但我需要这样

左侧是我的案例标签，右侧是按钮

Answer 1

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

JQM DOC：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>

Answer 2

您可以这样做，覆盖ui-title和ui-btn-right样式。但是，对于第二个按钮，请为其指定一个自定义类，以便不使用ui-btn-right覆盖这两个按钮。我使用自定义类.second作为第二个按钮。

  

<强> Demo

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>