18

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

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

谢谢。

4

4 回答 4

23

有一个更简单的解决方案：只需将链接添加到您的标题 div 与class="ui-btn-right". 这是必不可少的，以便 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">
        ...

（显然，将 home href URL 更改为适合您环境的内容，不要只使用“/”，因为它限制了您的应用程序可以部署的位置。）

于 2011-03-04T11:11:56.920 回答
22

在不修改 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 );
于 2010-11-16T15:27:45.693 回答
1 
<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标签中使用。这将打开没有后退按钮的主页。

于 2011-03-22T16:38:59.880 回答
1

当第一次使用 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;
}

希望这能给你更多的选择。

于 2011-08-02T12:59:33.797 回答