Javascript 如何使用 jquery-mobile 添加主页按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4147376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add home button using jquery-mobile?
提问by Ravi Gupta
By default jquery-mobile adds a back button on each page after main page. I wish to know how can I add the home button also ?
Here is an example: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
默认情况下，jquery-mobile 在主页面之后的每个页面上添加一个后退按钮。我想知道如何添加主页按钮？
这是一个例子：http: //jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
Note: This link is only good for firefox/chrome
注意：此链接仅适用于 Firefox/chrome
Thanks.
谢谢。
回答by Duncan Smart
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:
有一个更简单的解决方案：只需使用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">
...
(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.)
（显然，将 home href URL 更改为适合您环境的内容，不要只使用“/”，因为它会限制您的应用程序的部署位置。）
回答by superfro
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.
在不修改 jquery-mobile.js 源代码的情况下，我能想到的唯一方法是将您自己的导航链接添加到标题中。添加自己的链接后，自动“返回”按钮将消失，因此我们将创建 2 个链接，一个用于返回，一个用于主页。
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.
您会注意到第 2 页和第 3 页都有返回按钮和主页按钮，您可以返回或直接跳转到主页。这需要您修改每个页面的“标题”部分，但这没什么大不了的，因为它总是相同的（复制和粘贴），每个实例都不需要修改。
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...
如果你想让它自动完成，你也可以破解 js ......
Right after this piece of code (around line 1084 of the non minified jquery.mobile-1.0a2.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 );
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
添加这样的一行，其中#firstpage 是您主页的 id，我找不到一种方法来引用主页而不按名称调用它，请随时改进.. 我不想做 / 或只是 # 行不通...但这种方法有效
$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );
回答by thomas
<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=externalin you hreftag. This will open the homepage without a back button.
你可以rel=external在你的href标签中使用。这将打开没有后退按钮的主页。
回答by Nem Le
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.
刚开始用jqm开发应用的时候，我希望顶部header同时有home和back两个按钮，因为导航树很深。使用诸如“ui-btn-right”或“ui-btn-left”之类的核心按钮类效果很好——如果您只需要每侧一个按钮。
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.
但是如果你像我一样想要左边的两个按钮，你可以使用一些自定义的 CSS 和定位来把它放在你想要的地方。我还将按钮包装在自定义标题类中，并使用 CSS 来控制标题中的标题。您需要将每个按钮放在不同的 z-index 上，否则每个按钮都会相互冲突。
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:
这是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.
希望这能给你更多的选择。
