1

I'm trying to implement navbar "persistent toolbars" so that I need to define the navigation bar once.

ref: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html

(you need to define data-id="the same" on each page)

First I put straight into my development, did no work and as I see it does not seem to work with simple cases either, I tried all kind of combinations.

What can be wrong width the following code ? Navivagtion leads to the second page but not toolbar there.

CODE: 

<body>
<div data-role="page" id="page" data-id="stHedaer>
    <div data-role="header">
        <h1>Page One</h1>
        <div data-role="navbar"  data-position="fixed">
            <ul>
                <li><a href="#p2">page2</a></li>
                <li><a href="#p3">page3</a></li>
            </ul>
        </div>
    </div>
    <div data-role="content"> Page one </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<div data-role="page" id="p2"  data-id="stHedaer">
    <div data-role="header" >
        <h1>Page Two</h1>
    </div>
    <div data-role="content"> Content </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<div data-role="page" id="p3"  data-id="stHedaer" >
    <div data-role="header">
        <h1>Page Three</h1>
    </div>
    <div data-role="content"> Content </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
</body>
peterm
  • 91,357
  • 15
  • 148
  • 157
Kocsis Zoltán
  • 77
  • 1
  • 7

1 Answers1

0

jQM documentation must be read carefully. If you want navbar on every page you need to put it on every page. With:

...data-position="fixed" data-id="footer"...

in header and footer a like.

Here's a working example: http://jsfiddle.net/Gajotres/Beq4H/

<!DOCTYPE html>
<html>
<head>
  <title>Share QR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>       
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>

  <div data-role="page" id="home">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Share QR</h1>
    </div>
    <div data-role="content">
      <p>Hello world!</p>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#about" data-transition="slide">page2</a></li>
                <li><a href="#about" data-transition="slide">page3</a></li>
            </ul>
        </div>
    </div>
  </div>

  <div data-role="page" id="about">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
      <h1>About</h1>
      <a href="#home" data-icon="arrow-l" data-rel="back">Back</a> 
    </div>
    <div data-role="content">
      <p>Share your favorite URLs with other mobile phone users through QR codes.</p>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#home" data-transition="slide">page2</a></li>
                <li><a href="#home" data-transition="slide">page3</a></li>
            </ul>
        </div>
    </div>
  </div>

</body>
</html>
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    hanks, I'd read again the documentation. indeed, "persistent" refers to transitions, (which is not really interesting for me). So My goal can be reached for example with JavaScript code gen. (As my firs language not English (Hungarian) I must be careful with quick reading.. – Kocsis Zoltán Jan 19 '13 at 19:07