更新

Question

后台和主页按钮没有出现在我的jQuery Mobile应用程序的标题中，即使我没有压制它们。为什么？以下是我的应用中页面的外观。

<!DOCTYPE html> 
<html> 
<head>
    <title>My jQuery Mobile App</title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head> 
<body> 
    <div data-role="page">
        <div data-role="header">
            <h1>Look Up a Stock</h1>
        </div><!-- /header -->    
        <div data-role="content">
            Code to look up a stock.
        </div><!-- /content -->
        <div data-role="footer">
            <h4>&copy; 2012</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>
</html>

Answer 1

添加后退按钮

jQuery Mobile具有自动功能   创建并将“后退”按钮附加到任何标题，但它已被禁用   默认情况下。这在chromeless安装中非常有用   应用程序，例如在本机应用程序Web视图中运行的应用程序。该   框架自动在标题上生成“后退”按钮   页面插件的addBackBtn选项为true。这也可以通过设置   如果页面div具有data-add-back-btn =“true”属性，则进行标记。

如果您在锚点上使用属性data-rel =“back”，则点击任意内容   该锚将模仿后退按钮，返回一个历史记录条目   并忽略锚点的默认href。这特别有用   链接回命名页面时，例如显示“home”的链接，或者   使用JavaScript生成“后退”按钮时，例如按钮   关闭一个对话框。在源标记中使用此功能时，一定要确定   提供一个有意义的href实际指向的URL   引用页面（这将允许该功能为用户工作   C级浏览器。此外，请记住，如果你只是想要一个   你应该在没有实际回溯历史的情况下进行逆向过渡   改为使用data-direction =“reverse”属性。

来源：http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html

以前默认情况下这是开启的，但默认情况下让更多人关闭它会更有意义。

您的HTML可能会更改为：

<div data-add-back-btn="true" data-role="page">
    ...
</div><!-- /page -->

以下是演示：http://jsfiddle.net/nHgu7/1/

您还可以绑定到mobileinit事件以设置addBackBtn的默认值：

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

以下是演示：http://jsfiddle.net/nHgu7/2/

来源：http://forum.jquery.com/topic/can-t-get-mobile-addbackbtn-to-work

更新

您可以自动为每个页面添加一个主页按钮，如下所示：

//attach an event handler to any `data-role="page"` element at any time for the `pageinit` event
//(the event that fires when the page is about to be initialized)
$(document).delegate('[data-role="page"]', 'pageinit', function () {

    //check for a `data-role="header"` element to add a home button to
    var $header = $(this).children('[data-role="header"]');
    if ($header.length) {

        //create a link with a `href` attribute and a `class` attribute,
        //then turn it into a jQuery Mobile button widget
        $header.append($('<a />', { class : 'ui-btn-right', href : '#zero' }).buttonMarkup({ icon: "home", iconpos : "notext" }));
    }        
});

以下是演示：http://jsfiddle.net/nHgu7/3/

如果您只是添加一个if语句来检查主页的ID，您可以向所有主页添加主页按钮：

$(document).delegate('[data-role="page"]', 'pageinit', function () {

    //check to see if this is the homepage, if so do nothing
    if (this.id != 'home') {
        var $header = $(this).children('[data-role="header"]');
        if ($header.length) {
            $header.append($('<a />', { class : 'ui-btn-right', href : '#zero' }).buttonMarkup({ icon: "home", iconpos : "notext" }));
        }    
    }    
});

以下是演示：http://jsfiddle.net/nHgu7/4/

为什么默认情况下我的jQuery Mobile页面中没有显示后退和主页按钮？

1 个答案:

更新