Per the JQuery Mobile documentation ...
To enable animated page transitions, all links that point to an
external page (ex. products.html) will be loaded via Ajax
How, if it is even possible, can one enable page transitions when building a Phonegap application where all the pages are local rather than sitting on a web server?
There isn't a difference if AJAX is loading from local file or web (except if web you need to whitelist the domains).
By default Phonegap/Cordova for iOS loads from www/index.html.
Here is an example with 2 pages, with in-line data attributes for the transitions.
First page, page1.html
<!-- page1.html -->
...
<div id="page1" data-role="page">
Local on same page<br/>
same page
Local in another page<br/>
new page
</div>
<div id="samePage" data-role="page">
Same Page
</div>
...
A separate file page2.html.
<!-- page2.html -->
<div id="page2" data-role="page">
Page 2
</div>
Related
I started working with JqueryMobile a little time ago and I'm trying to adapt my website for mobile devices.
I'm using ASP.NET Mvc and the structure of my page is this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jquerymobile")
#Scripts.Render("~/bundles/jqueryflexslider")
</head>
<body>
<div data-role="page" data-theme="a">
#RenderBody()
</div>
</body>
</html>
The thing is that inside my layout page I have a partial view with a simple jquery function that animate my menu, slideup/down on click. When I reaload the page it works fine, but when i hit the back button it simple doesn't work anymore, but if i hit refresh again voialaaa, it's works.
I read the jquery mobile documentation about "Scripts & styles in the head" and it says that
..The default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element (or more specifically the data-role="page" element, if it's provided)
My question is how do i reload the content and get my scripts working (presuming that the problem is the reload thing) if not, someone could point me a direction or what is the best structure for this case?
I finally got it working!
My problem was that everytime I navigate from page to page, my <div id="page" data-role="page"> was duplicated. Since I got two pages on DOM and two IDS of the same menu, the click simple didn't work anymore. Once I add the data-ajax='false' on the links who were responsible for redirect me for another page, my page reloaded as usual and finally i got no more duplicated divs, IDS and everything runs flawless now.
JQuery Mobile uses AJAX navigation unless you tell it otherwise. The ASP.NET redirects have no problem to normal requests, but cause issues with AJAX. So the my answer is to turn off AJAX. For that, all you have to do is add the attribute data-ajax='false' to the tag.
In my case, an easy solution could be (as changing each Html.ActionLink/Url.Action is time consuming), adding this at the end of the _Layout.cshtml (just before closing of the 'body' tag).
$(document).on('pageinit', function() {
$('a').each(function() {
$(this).attr("data-ajax", "false");
});
});
That would be fine assuming you don't want jQuery mobile to use any Ajax with links too. I am happy to let it go ahead and use Ajax in most circumstances, so I only turn it off selectively where it can cause a problem.
To link a page which is within the same page or else outside the html page it may redirects
to the particular link based on <a> link
Here is the code for the html:
<div data-role="page" id="main">
page1
page2
</div>
<div data-role="page" id="page2">
this is page2
</div>
Here the page1 is external html file if we click that it is showing as Loading Error page
while page2 is in the same page so it redirects to it . Please give suggestions for this how to link a html which is external.
From JQM Docs:
Linking without Ajax
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
I have created html5 screens for Mobile web app. I want to add actions to the pages. I means I tap on any button, the related html page should come like the below example.
http://elsies.appclerk.com/
The flow of the navigation I need to show for demo before development. Is there any way of easy process? Please suggest me.
EDIT:
Please check the [jsfiddle](http://jsfiddle.net/4cKhC/">html code).
There, when I tap on the back button the new page or another page should come like the above url (sliders effect).
If you interested only in prototyping you can easily (to a certain degree) achieve this using just jQuery Mobile markup.
You can declare a jQM pages like this:
<div id="contacts" data-role="page">
<div data-role="header">
<h1>Contacts</h1>
Back
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">Colleagues</li>
<li><a href="#alan" data-transition="slide">
<img src="images/person.png">
<h1>Alan Ayckbourn</h1>
<p>Available</p>
</a></li>
</ul>
</div>
Add javascript and(or) server side scripting (e.g. php) and you can turn it into a real application.
Here is a three page mock-up for you.
First item in the list Alan Ayckbourn is clickable.
I'm developing an app where the client has a container div on their site and they use jQuery to retrieve my app and inject it into the container. My app is self contained as the html and javascript are all injected into client container. Each client has it's own css file so look and feel can change as needed by client. My app is ASP.Net MVC 4 and can be injected into a web page or a mobile app. I'm using HTML 5, css 3. I'm using ASP.Net MVC 4 to determine if the client is mobile or web and am loading jQuery Mobile if client is mobile.
So, since the app is self contained and I'm using jquery to load subsequent pages into a div as the user interacts with the app, how do i take advantage of jQuery Mobile's page transitions? I have to load subsequent content into a div using jQuery. I cannot do a complete page postback. I can't figure out how to do page transitions.
Thanks for your time.
Try multi-page apps: your file can contain multiple pages:
<div data-role="page" id="first">
...
</div>
<div data-role="page" id="second">
...
</div>
After you load additional pages and add them to DOM, then you call
$.mobile.changePage($("#third"));
More details about multi-page apps here:
http://jquerymobile.com/test/docs/pages/multipage-template.html
Info:
I am using JQuery Mobile (in Phonegap) for building pages and navigating via them by $.mobile.changePage() or hash.
This is JQuery Mobile page anatomy:
<div id="foo" data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Problem:
I am looking for XUI.js page anatomy, because there is really poor documentation about this library.
As Phill said, XUI isn't designed for managing DIVs as "pages", but it can be done. Andrew Lunny has built a lightweight page control in his starter application. You can inspect the source on Github and see how he converts the DIVs to pages. It requires a combination of CSS and setting classes on the DIVs in question.
Again; jQueryMobile is designed very specifically to do this all for you. XUI is not.