I tried to implement external panel on JQM 1.4.5 but I did'nt success to display it correctly on my web app. JQM 1.4.5 doc about external panel
My code is written below.
Thanks for helping,
Clément
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some content
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some other content
</div>
</div>
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
<div class="ui-panel-inner">
<ul data-role="listview">
<li data-icon="home">
<a id="menu-home" href="index.php#home">Home</a>
</li>
<li data-icon="user">
<a id="menu-account" href="#">Account</a>
</li>
<li data-icon="gear">
<a id="menu-settings" href="#">Settings</a>
</li>
<li data-icon="mail">
<a id="menu-contact" href="#contact">Contact</a>
</li>
</ul>
</div>
</div><!-- /mypanel -->
</body>
</html>
You need to enhance the panel in java-script. In $(document).ready write the following code:
$('#mypanel').enhanceWithin().panel();
Related
jquerymobile panel cross page
I wanna make a same panel menu for every page.
because the panel menu is the same content for every page.
How do I do? or any suggest?
My sample code is by following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div data-role="page" id="status">
<div data-role="header" data-theme="b">
<h1>Access Point Status</h1>
<a class="ui-btn" data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-menu">menu</a>
</div>
<div id="left-menu" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
</div>
<div data-role="page" id="A">
<div data-role="header" data-theme="b">
<h1>PAGE A</h1>
<a class="ui-btn " data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-a">menu</a>
</div>
<div id="left-a" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</html>
create a panel in body tag and outside page div like following
<body>
<div data-role="panel" id="myPanel" data-display="overlay" data-position="right" data-theme="b">
<ul data-role="listview">
<li data-icon="false">
<a href="#" data-transition="pop" data-rel="close">
Home
</a>
</li>
<li data-icon="false">
Logout
</li>
</ul>
</div>
<div data-role="page" id="login">
..... page ....
</div>
.... other pages ....
</body>
then in pagecreate event of first page add this
$(document).on("pagecreate", "#firstPage", function () {
$("body>[data-role='panel']").panel().enhanceWithin(); //you can put this in document.ready but its not preferable
}
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 am trying to add a 2 selection list view to the page2 footer below. I have the footer position fixed and the list view and links work just fine. My problem is I can't find a way to size the list view to stretch the screen width other than by adding text. The list view "buttons" in the footer are small and I want to control their width. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer" align="center" data-position="fixed" data-theme="c">
<ul data-role="listview" data-theme="b" data-inset="true">
<li>Page One </li><br>
<li>Page 3</li>
</ul>
</div>
</div>
<div data-role="page" id="page3">
<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>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Page Four</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
I ended up adding a navbar which did what I needed.
I have just started using jquery mobile and got a weird thing happening. When I click the navigation bar quickly(on different item each time) my footer disappears on one of these pages.
Here is my code (that's the main file but all other files are identical with the exception of ui-active class on the nav bar item)
<!DOCTYPE html>
<html>
<head>
<title>Page Title in head</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/lib/jquery.mobile-1.0b1.css" />
<script type="text/javascript" src="js/lib/jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/lib/jquery.mobile-1.0b1.js"></script>
<script>
$.mobile.defaultPageTransition='none';
//$.mobile.useFastClick='false';
</script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<h1>Friends</h1>
Home
</div>
<div data-role="content">
<p>
This is the test
</p>
<ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
<li data-role="list-divider">
A
</li>
<li>
Adam Kinkaid
</li>
<li data-role="list-divider">
B
</li>
<li>
Bob Cabot
</li>
<li data-role="list-divider">
C
</li>
<li>
Caleb Booth
</li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-id="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
<div data-role="navbar">
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /page -->
</body>
</html>
Should I just stop using jquerymobile footers or does anyone know a workaround?
Thank you!
I am running jquery-mobile alpha 1 and I am creating a list with a fixed header. When I view the page the header is on top of the first list item. The only solution I have found so far is to put a hidden list item with enough space at the top for the header to cover. Is there any other solution?
Here is an initial example:
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery Mobile List test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true" id="list">
<div data-role="header" data-position="fixed">
<h1>This is a header</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <div>Item 1</div> </li>
<li> <div>Item 2</div> </li>
<li> <div>Item 3</div> </li>
<li> <div>Item 4</div> </li>
<li> <div>Item 5</div> </li>
<li> <div>Item 6</div> </li>
<li> <div>Item 7</div> </li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
For the record the problem was that the header had 'data-fullscreen="true".
<header data-fullscreen="true>
After removing this attribute the list is placed below the header.