如何使用jquery-mobile添加主页按钮？
如何使用jquery-mobile添加主页按钮？
提问于 2010-11-11 01:46:07
默认情况下，jquery-mobile会在主页后面的每个页面上添加一个后退按钮。我想知道怎样才能添加主页按钮？
下面是一个示例：http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
注意:此链接仅适用于firefox/chrome
谢谢。
回答 3
Stack Overflow用户
发布于 2011-03-04 19:11:57
有一个更简单的解决方案:只需使用class="ui-btn-right"添加一个链接到头文件div。这是必要的，以便jQuery移动后退按钮可以自动添加到左侧。还有一些其他的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更改为适合您的环境的内容，不要只使用"/“，因为它会限制您的应用程序的部署位置。)
Stack Overflow用户
发布于 2011-03-23 00:39:00
<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。这将打开没有后退按钮的主页。
Stack Overflow用户
发布于 2011-08-02 20:59:34
在第一次使用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;
}希望这能给你更多的选择。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4147376
复制相关文章
相似问题
腾讯云开发者
