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");
});
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
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/
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>
I'm getting white space at bottom of the page in iPad and I use jQuery mobile beta2. I'm splitting the UI as primary and secondary page.
when I move from first page to second page I'm getting white space in bottom of the iPad. Can any one help me?
Thanks in advance.
code:
<div data-role="page" class="type-interior" id="homePage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="contentHomePage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
//page:2
<div data-role="page" class="type-interior" id="resultPage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="resultPage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
Her I found solution for this problem. I set content height.
.ui-content {
min-height: 775px;
}
It's because your 'content-primary' does not take too much space. You can solve it in few ways, but I guess that the most logic one will be to use media queries (CSS) and to set the div dimensions in your CSS file. For more info: http://jquerymobile.com/demos/1.0b3/docs/api/mediahelpers.html
BTW, You might want to use jQuery mobile Beta 3