Im try to inject in my index some other pages like "profile.html" or "contact.html". For some pages i want to keep in memory and user can go back, and some others dont. This pages i want to load in the main index page <\div>.
Can anyone give some code example?
Something like that
What you describe as your problem, is exactly the default way how jquery-mobile loads "pages" into the DOM.
Lets build an example:
index.html
header with all referencesto jquery, jquery-mobile etc.
div with data-role="page" > #index
div with data-role-"page" > #page1
page2.html
div with data-role="page" > #page2
page3.html
header with all references to jQuery, jquery-mobile etc.
div with data-role="page" > #page3
What happen when I link from x to y ?
open index.html
the fist div with the data-role="page" is displayed
in this case #index
Pages inside of the DOM (#index, #page1)
Link from index.html(#index) to #page1
nothing is loaded
the page #page1 is shown
Pages inside of the DOM (#index, #page1)
Link from index.html to page2.html
the first div with the data-role="page" from page2.html is loaded to the DOM
Pages inside of the DOM (#index, #page1, #page2)
if you reload the page, you will see a unstyled html page, because page2.html has no js or css file in the head
you can link to #index, #page1 and #page2 because all of them are inside of the DOM
Link to page3.html with data-ajax="false"
The whole page3.html is loaded.
Pages inside of the DOM (#page3)
a can still link to page2.html
you can also link to the first page of index.html, but not the second page.
You can not load more then the first page of a multipage .html file with ajax. To load a multipage, you always have to load the .html file without ajax (data-ajax="false")
Code index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<!-- Index -->
<div data-role="page" id="index" data-title="index.html">
<!-- Header -->
<div data-role="header" data-position="fixed">
<h1>Index.html(#index)</h1>
</div>
<!-- /Header -->
<!-- Content -->
<div role="main" class="ui-content">
Index.html
Page 1 (intern)
Page 2 (seperate .html file)
Page 3 (seperate .html file - no-ajax)
</div>
<!-- /Content -->
</div>
<!-- /Index -->
<!-- page1 -->
<div data-role="page" id="page1" data-title="index.html#page1">
<!-- Header -->
<div data-role="header" data-position="fixed">
<h1>Index.html#page1</h1>
</div>
<!-- /Header -->
<!-- Content -->
<div role="main" class="ui-content">
Index.html
Page 1 (intern)
Page 2 (seperate .html file)
Page 3 (seperate .html file - no-ajax)
</div>
<!-- /Content -->
</div>
<!-- /page1 -->
</body>
</html>
Code of page2.html
<script>
alert("hello from Page 2");
</script>
<!-- page2 -->
<div data-role="page" id="page2" data-title="page2.html">
<!-- Header -->
<div data-role="header" data-position="fixed">
<h1>page2.html</h1>
</div>
<!-- /Header -->
<!-- Content -->
<div role="main" class="ui-content">
Index.html
Page 1 (inside index.html)
Page 2 (seperate .html file - ajax)
Page 3 (seperate .html file - no-ajax)
</div>
<!-- /Content -->
</div>
<!-- /page2 -->
Code of page3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script>
alert("hello from Page 3");
</script>
</head>
<body>
<!-- page2 -->
<div data-role="page" id="page3" data-title="page3.html">
<!-- Header -->
<div data-role="header" data-position="fixed">
<h1>page3.html</h1>
</div>
<!-- /Header -->
<!-- Content -->
<div role="main" class="ui-content">
Index.html (First page of a Multipage)
Page 1 ((Second page of a Multipage))
Page 2 (seperate .html file - ajax)
Page 3 (seperate .html file - no-ajax)
</div>
<!-- /Content -->
</div>
<!-- /page2 -->
</body>
</html>
Related
I want to build a JQM app of single page app.
I need the menu to be in a separate file and that every "page" will be also in saparate file and all the includes and the template will be in the index.html.
how can I do it?
Thank you
In JQM content visible only data-role='page' and you need to manage each page by id attribute only. And you need to manage menu, header, footer..etc for all common files to be saved in separated files, after you can load using load() function. Inside `$(this).trigger('create');' for applying JQM default styles and attributes. If you have any issues in this structure plz feel free to ask me.
<!DOCTYPE html>
<html>
<head>
<title>your app title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript">
$(document).on('pagecreate', function (event) {
$("[id*=header]").load('header.html', function () {
$(this).trigger('create');
});
});
</script>
</head>
<body>
<div data-role="page" id="pageOne">
<div data-role="header" id="header"></div>
<div data-role="content">
Page one content
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="pageTwo">
<div data-role="header" id="header"></div>
<div data-role="content">
Page two content
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="pageThre">
<div data-role="header" id="header"></div>
<div data-role="content">
Page three content
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
I'm trying to understand how $.mobile.changePage works. I placed the method $.mobile.changePage in an anonymous function after the last element in the DOM and it didnt work but if I was to place it in document.ready it works fine. How come? any advice much appreciated
<!DOCTYPE html>
<html>
<head>
<title>My Page</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.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called bar</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p>Back to foo</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script>
(function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
})();// this doesn't work
$(document).ready(function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
})//this works
</script>
document ready dont work correctly with jQuery Mobile. Usually it will trigger before pages are loaded inside the DOM.
If you want to find more about this take a look at this ARTICLE, to be transparent it is my personal blog. Or find it HERE.
To make it work you need to use correct page event, like this:
$(document).on('pagebeforeshow', '#foo', function(){
$.mobile.changePage($("#bar"), { transition: "slideup"} );
});
At the same time this is not a good solution. You should not change page while first page is loading, mainly because it will cause jQuery Mobile to misbehave. Ether do it after first page is successfully loaded (page #foo) or change page order and let page #bar be the first page.
I am currently doing some development for Windows Phone 7 using phonegap+jquery mobile
For some reason, Windows phone emulator included in the latest Visual Studio express could not render simple multipage app.
Anyone have some pointers on how to solve this? Thank you
below is the code. It is pretty much taken from jquery mobile documentation.
<!DOCTYPE html>
<html>
<head>
<!--
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no;" />
-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8"/>
<title>JQ Tester</title>
<link rel="stylesheet" type="text/css" href="js/jquery/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="js/jquery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/custom-scripting.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" data-title="Page One">
<div data-role="header">
<h1>Multi-page</h1>
</div>
<!-- /header -->
<div data-role="content" >
<h2>One</h2>
<p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<p>
This is a multi-page single page template that has just one page within it.
</p>
<p>Just view the source and copy the code. Remember to include a meta viewport tag in the head to set the zoom level.</p>
<p>
You link to internal For example, to <a href="#two" >link</a> have a <code>href="#two"</code> in the code.
</p>
<h3>Show internal pages:</h3>
<p>
Show page "two"
</p>
<p>
Show page "popup" (as a dialog)
</p>
</div>
<!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a" data-title="Page Two">>
<div data-role="header">
<h1>Two</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>
Notice that the theme is different few <code>data-theme</code> swatch assigments here to show off how flexible it is.
</p>
<p>
Back to page "one"
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>
I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.
</p>
<p>
Back to page "one"
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page popup -->
</body>
</html>
The viewport is the problem here, is not the same on all plataforms and devices, for Windows Phone 7 you can try add this code to the head tag
<!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
Good Luck!
I copied your code into a new Phonegap 1.4.1 project and it worked with both jQuery 1.6.4 and 1.7.1. I'd suggest trying a different version of jQuery and/or re-installing any dependencies for the project such as the Windows Phone SDK and Phonegap template.
Maybe there is something obvious I cannot see but I think that setting data-theme in the div with data-role=page was supposed to set it for everything:
<!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.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
But I still get the default theme A
What am I doing wrong? Or is this a bug?
It was working in 1 alpha 4 but not in 1 final.
Check the docs, http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
it specifically says: "However, headers and footers will default to theme "a". If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify data-theme="b" to the page div as well as the header and footer divs. "
So this is not a bug.
The answer is that it's currently a bug and there's a ticket open about this
Just moved this from the comments for the OP to be able to mark as answer!
Thanks
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link