为什么返回和主页按钮默认情况下不会出现在我的jQuery移动页面中？_Jquery_Jquery Mobile

为什么返回和主页按钮默认情况下不会出现在我的jQuery移动页面中？

jquery jquery-mobile

为什么返回和主页按钮默认情况下不会出现在我的jQuery移动页面中？,jquery,jquery-mobile,Jquery,Jquery Mobile,返回和主页按钮没有出现在jQuery移动应用程序的标题中，即使我没有抑制它们。为什么？下面是我的应用程序中页面的外观 <!DOCTYPE html> <html> <head> <title>My jQuery Mobile App</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-widt

返回和主页按钮没有出现在jQuery移动应用程序的标题中，即使我没有抑制它们。为什么？下面是我的应用程序中页面的外观

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


我的jQuery移动应用程序
查股票
查找股票的代码。
&抄袭；2012

添加后退按钮

jquerymobile有一个自动创建“后退”按钮并将其附加到任何标题，尽管它已被禁用默认情况下。这主要适用于无铬安装应用程序，例如在本机应用程序web视图中运行的应用程序。这个当页面插件的addBackBtn选项为true。这也可以通过以下方式设置：如果页面div具有数据添加回btn=“true”属性，则标记

如果在锚点上使用属性data rel=“back”，则单击该锚将模拟后退按钮，返回一个历史条目并忽略锚点的默认href。这尤其有用当链接回命名页面时，例如显示“主页”的链接，或使用JavaScript生成“后退”按钮时，例如关闭一个对话框。在源标记中使用此功能时，请确保提供一个有意义的href，实际指向参考页面（这将允许该功能为中的用户工作） C级浏览器。此外，请记住，如果您只想在不回顾历史的情况下进行反向转换，您应该改为使用data direction=“reverse”属性

资料来源：

这曾经是默认打开的，但是对于更多的人来说，默认关闭它更有意义

您的HTML可能会更改为：

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

下面是一个演示：

资料来源：

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

//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" }));
    }        
});

这是一个演示：

非常感谢！该文档和示例非常有用。我让“后退”按钮正常工作。您对文档中关于在何处添加“主页”按钮（小房子图标）有何想法？没关系，我发现

添加了一个主页按钮。谢谢！@DavidFaux我添加了一个关于如何在每个页面上自动添加主页按钮的更新。

//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" }));
    }        
});

$(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" }));
        }    
    }    
});