如何使用jquery-mobile添加主頁按鈕？
[英]How to add home button using jquery-mobile?
問題描述
默認情況下，jquery-mobile在主頁面后的每個頁面上添加一個后退按鈕。 我想知道如何添加主頁按鈕？
這是一個例子： http ： //jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
注意：此鏈接僅適用於firefox / chrome
謝謝。
4 個解決方案
解決方案1
23 2011-03-04 11:11:56
有一個更簡單的解決方案：只需添加一個鏈接到您的標題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更改為適合您環境的內容，不要只使用“/”，因為它限制了應用程序的部署位置。）
解決方案2
22 已采納 2010-11-16 15:27:45
在不修改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 );
解決方案3
1 2011-03-22 16:38:59
<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 。 這將打開主頁，沒有后退按鈕。
解決方案4
1 2011-08-02 12:59:33
當第一次使用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;
}
希望這能為您提供更多選擇。
如何在Jquery-mobile中創建切換按鈕？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.