Question

默认情况下，jquery-mobile会在主页后面的每个页面上添加一个后退按钮。我想知道如何添加主页按钮？
以下是一个示例：http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html

注意：此链接仅适用于firefox / chrome

感谢。

Answer 1

有一个更简单的解决方案：只需使用class="ui-btn-right"添加指向标题div的链接即可。这是必不可少的，以便jQuery Mobile后退按钮可以自动添加到左侧。您还可以使用其他一些data- *属性，以便您可以使用内置主题图标等，如下所示：

<div data-role="page">
    <div data-role="header">
        <h1>Title</h1>
        <a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext" 
           data-direction="reverse">Home</a> 
    </div>
    <div data-role="content">
        ...

（显然将家庭href网址更改为适合您环境的内容，不要只使用“/”，因为它会限制您的应用的部署位置。）

Answer 2

如果不修改jquery-mobile.js源代码，我能想到的唯一方法是将自己的导航链接添加到标题中。添加自己的链接后，自动“后退”按钮将消失，因此我们将创建2个链接，一个用于后面，一个用于家庭。

您会注意到第2页和第3页都有后退按钮和主页按钮，您可以返回或直接跳到家中。这要求您修改每个页面的“标题”部分，但它不是那么大，因为它总是相同（复制和粘贴），每个实例不需要修改。

“主页”链接将位于右上角（根据第二个链接的默认行为，将其置于右上角）。

以下是示例：

<!DOCTYPE html>
<html>
        <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>


<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.</p>
                <p>View internal page called <a href="#secondpage">second page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                <p><a href="#thirdpage">Go to third page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

<div data-role="page" id="thirdpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page.  (this is thirdpage)</p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

</body>
</html>

如果你想让它自动完成，你也可以破解js ......

在这段代码之后（非缩小的jquery.mobile-1.0a2.js的第1084行）

$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
                                                .click(function() {
                                                        history.back();
                                                        return false;
                                                })
                                                .prependTo( $this );

添加这样一行，其中#firstpage是你主页的id，我找不到引用主页的方法而不用名字来调用它，随时改进..我不想做/或只是＃将无效......但这种方法有效

$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );

Answer 3

<div data-role="footer" class="ui-bar">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
            <a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
        </div>
    </div>

您可以在rel=external标记中使用href。这将打开主页，没有后退按钮。

Answer 4

当第一次使用jqm开发应用程序时，我想在顶部标题上设置主页和后退按钮，因为导航树很深。使用诸如“ui-btn-right”或“ui-btn-left”之类的核心按钮类可以很好地工作 - 如果你只想在每一侧都有一个按钮。

但是如果你像我一样想要左边的两个按钮，你可以使用一些自定义CSS和定位来获得你想要的地方。我还将按钮包装在自定义标头类中，并使用CSS来控制标题中的标题。你需要将每个按钮放在不同的z-index上，否则每个按钮都会与另一个按钮发生冲突。

这是标题：

    <div id="home-btn" class="header-btn-left-pos1">
        <a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
    </div><!-- /home-btn -->

    <div id="back-btn" class="header-btn-left-pos2">
        <a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
    </div><!-- /back-btn -->

    <div class="header-title" align="center">
        <h4>Business Locations</h4>
    </div><!-- /header-title -->

</div><!-- /custom header -->

这是CSS：

.custom-header
{
    height:18px;
}
.header-title
{
    position:relative;
    top:-10px;
}
.header-btn-left-pos1
{
    position:absolute;
    left:25px;
    top:5px;
    z-index:1;
}
.header-btn-left-pos2
{
    position:absolute;
    left:105px;
    top:5px;
    z-index:2;
}

希望这能为您提供更多选择。

如何使用jquery-mobile添加主页按钮？

4 个答案: