代码之家 › 专栏 › 技术社区 › Ravi Gupta

如何使用jquery mobile添加Home按钮?

jquery-mobile jquery javascript

Ravi Gupta · 技术社区 · 14 年前

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

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

谢谢。

4 回复 | 直到 13 年前

superfro 14 年前

在不修改jquery-mobile.js源代码的情况下,我唯一能想到的方法就是将您自己的导航链接添加到头部。一旦你添加了你自己的链接,自动的“后退”按钮将消失,所以我们将创建2个链接,一个用于后退,一个用于家庭。

您会注意到第2页和第3页都有后退按钮和主页按钮,您可以返回或直接跳转到主页。这要求您为每个页面修改“header”部分,但这并不重要,因为它总是相同的(复制和粘贴),每个实例不需要修改。

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

示例如下:

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

Duncan Smart 14 年前

有一个更简单的解决方案:只需添加一个链接到header div class="ui-btn-right" . 这对于jquery移动后退按钮自动添加到左侧非常重要。还有一些其他的数据-*属性可以使用,这样您就可以使用内置的主题图标等,如图所示:

<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更改为对您的环境敏感的内容,不要只使用“/”,因为它限制了应用程序的部署位置。)

Nem Le 14 年前

当第一次使用jqm开发应用程序时,我希望在顶部标题上同时显示Home和Back按钮,因为导航树很深。使用核心按钮类(如“ui-btn-right”或“ui-btn-left”)效果很好——如果每侧只需要一个按钮。

但是,如果你像我一样,想要左边的两个按钮,你可以使用一个小的自定义CSS和定位,把它放在你想要的地方。我还将按钮包装在自定义头类中,并使用CSS控制头中的标题。您将需要将每个按钮放置在不同的Z索引上,否则每个按钮将与其他按钮冲突。

这是标题:

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

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

Jérôme Verstrynge 13 年前

<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 标签。这将打开没有后退按钮的主页。