jQuery mobile Tabs and Anchors

Question

I would like create a tabbed mobile page using jQuery Mobile. I have got the basics of creating tabs (For Example Tab1, Tab2, Tab3, Tab4) and having each tab load a new page of content. How would I go about using an anchor within a specific tab? So for example if someone wanted to bookmark a link that took them right to Tab4 Anchor1.

I am pretty new to JavaScript and jQuery.

Code below:

<!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>

Are you not able to bookmark now ? When , let's say a #jib link is selected and the tab is presented bookmarking of the presented Jib page should be possible. — InspiredBy, Aug 29 '12 at 16:27
From my limited knowledge of jQuery Mobile it seems the #---- is referring to the page that will be loaded. For example http:www.url.com/#page1, but the problems is how do I go right to an anchor embedded in the middle of page 1. Make sense? — ControlAltDelete, Aug 29 '12 at 16:32

InspiredBy · Accepted Answer · 2012-08-29T18:34:14.813

2

I think I understand but feel free to comment if I'm misunderstanding your question.

I believe you're misunderstanding how internal JQuery linking works. First thing is take a look at the JQuery Mobile page anatomy, especially at the "Multi-page template structure" in your case: http://jquerymobile.com/test/docs/pages/page-anatomy.html

Basically every "embedded in the middle of page" section of your page will need to be a stand alone div marked with the data-role="page" tag. Its ID is going to be what you'll point an anchor to.

So in order for your internal <a href="#jib"> to work you have to have a built in div with ID = "jib"

UPDATED ANSWER AFTER COMMENTS

What you're looking for is $.mobile.silentScroll . You want to get your anchor link's Y-position and then have the page scroll to it. There is a little gotcha though. You'll need to add a little pause before the scroll happens because of the JQuery Mobile animations that happen on page transition.

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

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

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

Take a look how I did it ( .8 second delay ).:

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

edited Aug 29 '12 at 18:34

answered Aug 29 '12 at 16:53

InspiredBy

4,271
6
40
67

Yep I get what you are saying with you have to wrap it with a div. From your example let's say you had a bunch of text on the page jib that required you to scroll. Is there any way to have it so when you click the button on the main page it goes to the page jib as it currently does, but also will scroll to the anchor that you have somewhere in the middle of the extended text? Thx – ControlAltDelete Aug 29 '12 at 17:07
Yep that is about 90% of what I want to do. The last piece would be how would you go about parsing #mylink from the url. For example I would like to be able to have a user or device enter. http://www.site.com/#page_#mylink <= or what ever is an easy delimiter in the last url path and then have it jump to the right page with the right tab selected(I can do this part) and scroll (pretty much like you have shown) to the correct position. Thanks – ControlAltDelete Aug 29 '12 at 19:25
There are many ways how you can mess with this. I believe this will help you: 1) Add #section to URL: http://stackoverflow.com/questions/4282069/add-a-fragment-to-the-url-without-causing-a-redirect 2) Check if URL has #hash section to then silentScroll to a specific location: http://stackoverflow.com/questions/298503/how-can-you-check-for-a-hash-in-a-url-using-javascript Does it help ? – InspiredBy Aug 29 '12 at 21:50

jQuery mobile Tabs and Anchors

1 Answers1

Linked