Rav*_*pta 18 javascript jquery jquery-mobile
默认情况下,jquery-mobile在主页面后的每个页面上添加一个后退按钮.我想知道如何添加主页按钮？
这是一个例子:http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
注意:此链接仅适用于firefox/chrome
谢谢.
Dun*_*art 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">
...
(显然,将家庭href URL更改为适合您环境的内容,不要只使用"/",因为它限制了应用程序的部署位置.)
sup*_*fro 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 );
| 归档时间： |
|
| 查看次数： |
39164 次 |
| 最近记录： |