This code is not producing a Previous button:
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Actually to get the data-add-back-btn="true" work in latest version of jQuery Mobile 1.4, it should be at the header of the second page.
<div data-role="page" id="2ndPage">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous!">
<h1>HEADER</h1>
</div>
<div data-role="content">
hi
</div>
<div data-role="footer">
<p>FOOTER</p>
</div>
</div>
jQuery Mobile >= 1.4: https://stackoverflow.com/a/20065246/1771795
Adding data-add-btn-back to single page won't generate a button as there is no page before it in DOM nor in navigation history.
If you make two pages, it will appear on the next page.
<!-- page -->
<div data-role="page">
<div data-role="header">
<h1>My Header</h1>
</div>
<a href='#p1'>page 2</a>
</div>
<!-- another page -->
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" id='p1'>
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Demo: http://jsfiddle.net/uJz3E/1/
Related
I am trying to use the panel feature from JQuery mobile, and after following some tutorials I cannot make the panel to link the pages within my app to work, and it just stays at the first page The animation works fine tho´. Any suggesting of how to fix this?
This is my code:
<body>
<!--Activity Feed Page-->
<div id="activityFeed" data-role="page">
<!--Panel-->
<div data-role="panel" id="myPanel" data-display="reveal" data-theme="a" class="ui-response">
<div data-role="listview" class="nav-seacrh">
<li>Activity</li>
<li>Messages</li>
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</div>
</div> <!--ends panel-->
<div data-role="header">
<h1>Activity Feed</h1>
Panel
</div>
<p>Activity Feed Page</p>
</div>
<!--End Feed Page-->
<!--Messages Page-->
<div id="messagesPage"data-role="page">
<div data-role="header">
<h1>Messages</h1>
Panel
</div>
<p>Messages Page</p>
</div>
<!--Ends Messages Page-->
<!--Profile Page-->
<div id="profilePage"data-role="page">
<div data-role="header">
<h1>Profile</h1>
Panel
</div>
<div>
<p>Profile Page</p>
</div>
</div>
<!--Ends Settings Page-->
<div id="settingsPage"data-role="page">
<div data-role="header">
<h1>Settings Feed</h1>
Panel
</div>
<div>
<p>Settings Page</p>
</div>
</div>
<!--Ends Settings Page-->
The data-rel="close" inside your page links is causing JQM to override their click handlers to close the panel.
Remove that and it should navigate to page mentioned in href.
I'm trying to make a dialog with jquery.mobile-1.0.min.
But the problem is when I click the button, the dialog is not popping up.
why it is not working this dialog?
Here is the fiddle
http://fiddle.jshell.net/xJ8D3/
You can check it "Page2" on the menu.
main
<nav data-role="navbar" class="menu">
main
Page 2
Page 3
</nav>
<section data-role="content">
main
</section>
<footer data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</footer>
page2
<nav data-role="navbar" class="menu">
main
Page 2
Page 3
</nav>
<section data-role="content">
page2
<br>
**Click Dialog
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
Dialog Content
</div>
</div>**
</section>
<footer data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</footer>
page3
<nav data-role="navbar" class="menu">
main
Page 2
Page 3
</nav>
<section data-role="content">
page3page3
</section>
<footer data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</footer>
Your dialog page has to be on the same node level as the other pages. Corrected your fiddle to open page3:
script:
<div data-role="page" id="main">
...
</div>
<div data-role="page" id="page2">
<section data-role="content">
Click Dialog
</section>
...
</div>
<div data-role="page" id="page3">
...
</div>
jsFiddle:
Fiddle
change
**Click Dialog
to
**Click Dialog
can you please tell me how to show panel with buttons in panel(with slide show) .and display different pages on each Button click?
here is my code.
http://jsfiddle.net/ravi1989/YAA4A/
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
</div>
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
I hope I have understood your question correctly.
Working example: http://jsfiddle.net/TXRjk/1/
HTML:
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
Jump to second page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to second page
</div>
<div data-theme="a" data-role="header">
<h3>
Third Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
Javascript:
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
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>page2</li>
<li>page3</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>
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">
Home
<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>page2</li>
<li>page3</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>About</h1>
Back
</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>page2</li>
<li>page3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.