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

发布于 2024-10-01 18:53:35 字数 275 浏览 7 评论 0原文

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

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

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

〃温暖了心ぐ 2024-10-08 18:53:35

有一个更简单的解决方案：只需使用 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">
        ...

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

There's a simpler solution: just add a link to your header div with class="ui-btn-right". This is essential so that the jQuery Mobile back button can be automatically added to the left. There's also a few other data-* attributes that you can use so you can use the built-in theme icon etc, as shown:

<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">
        ...

(Obviously change the home href URL to something sensible for your environment, don't just use "/" because it limits where your app can be deployed.)

回复收藏 0 原文

别闹i 2024-10-08 18:53:35

在不修改 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 );

Without modifying the jquery-mobile.js source code, the only way I can think to do it, is to add your own navigation links to the header. Once you add your own link, the automatic 'Back' button will disappear, so we will create 2 links, one for back, and one for home.

You will notice page 2 and 3 both have back buttons and a home button and you can either go back or jump directly to home. This requires you to modify the 'header' section for each page, but its not that big of a deal since its always the same (copy and paste) no modification needed per instance.

The 'home' link will be in the top right (as per the default behavior of a second link it to put it top right).

Here is the example:

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

If you wanted to make it do it automatically, you could also just hack the js...

Right after this piece of code (around line 1084 of the non minified jquery.mobile-1.0a2.js)

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

Add a line like this, where #firstpage is the id of your home page, I couldn't find a way to reference the home page without calling it by name, feel free to improve.. I didn't want to do / or just # won't work... but this method works

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

回复收藏 0 原文

烟酉 2024-10-08 18:53:35

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

希望这能给您更多选择。

When first using jqm to develop an application, I wanted both home and back buttons on the top header because the navigation tree is deep. Using the core button classes such as "ui-btn-right" or "ui-btn-left" work great-- IF you only want one button on each side.

But if you are like me and want two buttons on the left, you can use a little custom CSS and positioning to get it where you want. I also wrapped the buttons in a custom-header class, as well as use CSS to control the title in the header. You will need the place each button on a different z-index, otherwise each button will conflict with the other.

This is the header:

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

This is the 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;
}

Hope this gives you more options.

回复收藏 0 原文

天煞孤星 2024-10-08 18:53:35

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

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

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

You could use rel=external in you href tag. This will open the homepage without a back button.

回复收藏 0 原文

~没有更多了~