I've developed an app for ios and android using phonegap. It's a dictionary app and it will display result in multiple tab (the tab is a div, every div will display different content). I use my own code so that only one div is shown at any time. Now I want to include jquerymobile so that I can apply a animation/transition when switching to other div.
So I add the data-role="page" to each div, which I assume will work immediately(like sample code below). But something is not right.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<table id="headergroup">
<tr><td>
<input>.........
<img>.......
</table>
<wrapper>
<div data-role="page" id="tab1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
.........other div......
<div data-role="page" id="tabN">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>PageN content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</wrapper>
<div id="footer>
<img .......>
</div>
</body>
</html>
Supposely, my app should display the div(s) in the wrapper only. But the problem is, now my app will display the div with data-role=page in full screen and on top of other element (my app header and footer were not shown).
Is my implementation correct? How do I overcome this problem? Thanks.
You may get by with this on the first page, but on all other pages you are loading in via JQM-Ajax (default), you will only grab what's inside your first(!) div-data-role="page" from the page you are loading. Everything else (table, 2nd, 3rd page-div will not be loaded, because it's outside the page-div.
Have a look at the JQM docs on page anatomy and linking pages.
JQM is based on page-divs, so also in your code the page-div will get most "JQM attention" being set to fullscreen size and of cource hovering above everything else.
To use JQM you will either go with
Single page layout = page by page
Multi pape layout = multiple pages contained in one document.
Since you are using Phonegap, which I think bundles everything into a single file eventually, you may be better off with multipage. There is also a subpage widget or multiview, if you need to load documents with multiple "nested pages" from your initial page.
Related
I have a multiple page jquery mobile app (along with Phonegap). In one of the dynamically loaded pages, I am trying to use iScroll (v5) to let the users scroll through a large image, both horizontally and vertically. Here is the code I am using for this page:
!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="largeimage-viewer" data-role="page" class="backdrop">
<script type="text/javascript" charset="utf-8" src="../common/iscroll.js"></script>
<script type="text/javascript" charset="utf-8">
$("#largeimage-viewer").die('pageinit');
$("#largeimage-viewer").live('pageinit', function (e)
{
var myscroll = new IScroll(document.getElementById('wrapper'),
{
scrollbars: true,
scrollX: true
//freeScroll: true,
//fadeScrollbars: true
});
console.log("Created iScroll object: " + (myscroll != null));
});
</script>
<div data-role="header">
Back
<center>CG</center>
</div><!-- /header -->
<div data-role="content" style="scrolling: scroll">
<div id="wrapper">
<img alt="Floor Plan" src="../common/images/floorplan.jpg" width="1217" height="1699" />
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
When I view the page on my Android (4.1.2), the image shows up but I can't scroll the image at all. There is no scrollbars visible either.
Can anyone suggest what I might be missing? Thanks.
Earlier, I tried the following without using iScroll library:
<div data-role="content" style="scrolling: scroll">
<div style="-webkit-overflow-scrolling: touch; overflow: scroll;">
<img alt="" src="../common/images/floorplan.jpg" />
</div>
</div><!-- /content -->
This code showed the vertical scrollbar, and scrolling worked alright, but the horizontal scrolling was extremely slow and there was no scrollbar either. With all the swiping across the screen, I would get the image moved horizontally by one inch or so!! Any solution on this front would also be appreciated.
I want to open a new page as popup. I google it but not able to find answer.
Is Possible to do like that ??
Any Other Method to like that..I search all the Jquery mobile Doc. but not able to find any thing.
Here is my Code::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Popup</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<h1> Jquery Open Page in PopUp Examples</h1>
Open Page in PopUp
</div>
<div data-role="page">
<div data-role="Header">
<p>
PopUp
</p>
</div>
<div data-role="content">
<h2>
Content Page ??
</h2>
<p>
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
</p>
</div>
<div data-role="Footer">
Sounds Good
Cancel
</div>
</div>
</body>
</html>
Short answer is no, it cant be done, at least in jQuery Mobile versions < 1.4. Popup as it is MUST be part of the page DIV and as such it can't be accessed outside of a page.
There is another solution, you can replace your second page div with data-role="popup" and place it inside a first page DIV, it would look like this:
jsFiddle example: http://jsfiddle.net/Gajotres/PMrDn/103/
HTML :
<div data-role="page">
<h1> Jquery Open Page in PopUp Examples</h1>
Open Page in PopUp
<div data-role="popup" id="popupExample">
<div data-role="header"class="ui-content">
<p>
PopUp
</p>
</div>
<div data-role="content">
<h2>
Content Page ??
</h2>
<p>
This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
</p>
</div>
<div data-role="footer" class="ui-content">
Sounds Good
Cancel
</div>
</div>
</div>
You will need to play with a CSS to make it look nicer.
Other solution would be to wait for jQuery Mobile 1.4 which will allow for popup to be placed outside page DIV, so you can share it among several pages. Unfortunately jQuery Mobile is in alpha state and this feature is still not working correctly.
I have a site built on jQuery Mobile and am trying to get our Terms of Service to open in a dialog.
TOS page is a full page itself (separate URL) and when I link with the dialog reference it simply opens as a new page.
My footer is
<div data-role="footer" data-theme="<?php echo $dataTheme ?>">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
</div>
and my tos.php page is (content stripped for convenience)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="AXCIS Information Network">
<title>TrackMaster Terms of Service</title>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/themes/TrackMasterMobile.min.css" />
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery-current.min.js"></script>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/mobileStyle.css" />
<!-- Make sure there is a back button on each page -->
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.page.prototype.options.addBackBtn= true;
});
</script>
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery.mobile-current.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="main">
<div data-role="header">
<h1 class="headerLink"><span class="tmFirst">Track</span><span class="tmSecond">Master</span> </h1>
Home
</div>
<div data-role="content" data-theme="a">
<div data-role="content" class="informationText">
Blah, Blah, Blah
</div>
</div> <!-- this one closes out the content div set in the section header template -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
<h5 class="copyrightText">© 2013 Axcis Information Network, Inc.</h5>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7303976721498796";
/* Mobile Bottom */
google_ad_slot = "5684536575";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div> <!-- this one closes out the page div set in the header template -->
</body>
</html>
I have tried changing the data role of the TOS page to a dialog but that made no difference.
Am I not understanding the way dialog links can be used (from the docs I thought I could open one from any URL simply by defining the link as a dialog)
Site itself is http://mobiletest.trackmaster.com and it is the Terms link in the footer I am trying to get as a dialog (I don't want to include the content on every page, only when the user asks for it)
Any help appreciated (even pointing out the dumb things I am missing)
You are either missing a <div> or they don't match up; you've got two "content" divs.
EDIT: It's probably OK to have one within another, just noting that the <div data-role="page"> is never closed. Don't know if that makes any difference.
Found the issue.
The line in the header
$.mobile.ajaxEnabled = false;
I commented it out and the dialog link works as expected.
was the problem, I am testing it to see what else gets broken when I pull it out :-).
Data role for the TOS page is NOT relevant as loading it as a dialog automatically assigns the dialog data role
I am using Durandal which is available in the Hot towel template SPA.
The idea is to have a SPA application for a touch based device, and I need to implement swipe feature on some on the divs.
jquery mobile supports swipe feature, but can someone tell me how to use it.
There is a data-bind on the div, where I give the 'swipe: somefuntion' - this does not happen, whereas the same works when I use a click instead of swipe. And somefunction is defined in the view model.
I have included the jquery mobile in the scripts and also in the bundle.
Can someone help me out if this possible?
Here's a working eample: http://jsfiddle.net/Gajotres/pf3kc/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Javascript :
$(document).off('swipeleft').on('swipeleft', '[data-role="page"]', function(event){
alert('swipeleft');
});
$(document).off('swiperight').on('swiperight', '[data-role="page"]', function(event){
alert('swiperight');
});
I would like my header and footer to be accessible when a page has an overlay due to a popup menu (as seen on http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html).
So in a nutshell, only the div with attribute 'data-role=content"' should have the overlay applied.
If possible, this should be achieved using a minimum of extra CSS and/or JavaScript. I've looked through the entire jQuery Mobile docs, but haven't found any reference to my problem.
Some code:
<!DOCTYPE html>
<html>
<head>
<title>Context Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Header</h1>
</div>
<div data-role="content">
Menu
<div data-role="popup" id="popupMenu" data-overlay-theme="b">
<ul data-role="listview" data-inset="true" style="width: 200px">
<li>Add</li>
<li>Edit</li>
<li>Manage</li>
<li>Delete</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
So in this exmaple, the header and footer shouldn't be overlayed when the Menu link is clicked.
The z-index css property allows you to set the way the different "layers" of your page are superposed. A fixed header in jquery mobile has a z-index of 1000.
By setting the z-index of your overlay to a value below 1000, it will be displayed "under" the header.