jQuery Mobile Tabs and Anchors

我想用jQuery Mobile創建一個標籤頁的移動頁面。我已經掌握了創建選項卡的基礎知識（例如Tab1，Tab2，Tab3，Tab4），並讓每個選項卡加載一個新的內容頁面。 我的問題是我將如何去使用特定標籤內的錨點？因此，例如，如果有人想將鏈接添加到Tab4 Anchor1的鏈接。jQuery Mobile Tabs and Anchors

我是JavaScript和jQuery的新手。任何幫助，將不勝感激。

感謝

下面的代碼：

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>test</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"> 
<!-- JavaScript HTML requirements --> 
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> 
</head> 

<body> 
<div data-role="page" data-theme="d" id="home" data-id="nav"> 
    <header data-role="header" > 
    <h1>TEST</h1> 
    <div data-role="navbar" data-id="nav"> 
     <ul> 
     <li><a href="#home" data-icon="home" data-theme="d" class="ui-btn-active ui-state-persist" >Home</a></li> 
     <li><a href="#speakers" data-icon="star" data-theme="d">Speakers</a></li> 
     <li><a href="#" data-icon="grid" data-theme="d">News</a></li> 
     </ul> 
    </div> 
    </header> 
    <section data-role="content"> Home </section> 
    <footer data-role="footer" class="ui-bar"> <a href="" data-icon="gear" class="ui-btn-right">Buy Tickets</a> </footer> 
</div> 
<div data-role="page" data-theme="d" id="speakers"> 
    <header data-role="header" data-id="nav" > 
    <h1>TEST</h1> 
    <div data-role="navbar" > 
     <ul> 
     <li><a href="#home" data-icon="home" data-theme="d">Home</a></li> 
     <li><a href="#speakers" data-icon="star" data-theme="d" 
     class="ui-btn-active ui-state-persist">Speakers</a></li> 
     <li><a href="#" data-icon="grid" data-theme="d">News</a></li> 
     </ul> 
    </div> 
    </header> 
    <section data-role="content">The name attribute specifies the name of an anchor. 

The name <a href="#jib">attribute</a> is used to create a bookmark inside an HTML document. 

Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers. 

Bookmarks are not displayed in any special way. They are invisible to the reader. <a name="jib"></a> Speakers </section> 
    <footer data-role="footer" class="ui-bar"> <a href="" data-icon="gear" class="ui-btn-right">Buy Tickets</a> </footer> 
</div> 
</body> 
</html>

來源

2012-08-29 Arnab C.

你現在不能書籤？當我們說一個#jib鏈接被選中並且標籤被顯示時，所提供的Jib頁面的書籤應該是可能的。 – Shenaniganz

從我對jQuery Mobile有限的認識看來，＃----指的是將要加載的頁面。例如http：www.url.com/#page1，但問題是我如何直接轉到頁面中間的嵌入式錨點1.是否合理？ –

我想我明白，但隨意評論，如果我誤解你的問題。

我相信你誤解了內部JQuery鏈接的工作方式。首先要看看JQuery Mobile頁面解剖結構，尤其是在您的案例中的「多頁面模板結構」： http://jquerymobile.com/test/docs/pages/page-anatomy.html

基本上，頁面中的每個「嵌入頁面中間」部分都需要成爲標有data-role="page"標籤的獨立標誌。它的ID將成爲你將要指向的錨點。

因此，爲了使您的內部<a href="#jib">工作，你必須有一個內置了ID =「臂」

修訂ANSWER評論

後，你在找什麼DIV是$.mobile.silentScroll。你想得到你的錨鏈接的Y位置，然後讓頁面滾動到它。雖然有一點小問題。在滾動發生之前，您需要添加一點暫停，因爲在頁面轉換時發生了JQuery Mobile動畫。

function loadJib() 
{ 
    $.mobile.changePage('#jib',{transition:"slide"}); 

    var yPos = $('#mylink').get(0).offsetTop; 

    setTimeout(function(){ 
    $.mobile.silentScroll(yPos); 
    },800);

看看我是如何做到的（0.8秒的延時）：

http://jsbin.com/ahevav/3/edit

來源

2012-08-29 16:53:13 Shenaniganz

是的我得到你在說什麼，你必須用div來包裝它。從你的例子來說，假設你在頁面副臂上有一堆需要你滾動的文本。有沒有什麼辦法讓它如此，當你點擊主頁面上的按鈕時，它會像當前那樣進入頁面副臂，但是也會滾動到你在擴展文本中間某處的錨點？ Thx –

看看編輯的答案 – Shenaniganz

是的，這大概是我想要做的90％。最後一部分是你將如何去解析URL中的#mylink。例如，我希望能夠讓用戶或設備進入。 http://www.site.com/#page_#mylink <=或者在最後一個url路徑中有一個簡單的分隔符，然後讓它跳轉到右邊的頁面並且選擇了正確的選項卡（我可以完成這部分）並且滾動（非常像你所示）到正確的位置。謝謝 –

jQuery Mobile Tabs and Anchors

回答

相關問題