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.
Related
Im starting a project from scratch in Worklight. Im using Jquery Mobile and I need to know how Im suppose to do the transition between pages. When I drag and drop a new list view, the following code is generated using Hyperlinks:
<ul data-role="listview" id="listview" data-inset="true">
<li data-role="list-divider" id="divider">Divider</li>
<li id="listitem">Item</li>
<li id="listitem0">Item</li>
<li id="listitem1">Item</li>
</ul>
But if I take into consideration the "building multiple page application" guide, I should not use hyperlinks...How should I do this?
As you rightly so mention, Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.
In order to implement multipage navigation, then, you can use either jQuery Mobile's changePage or jQuery's load functions (or the equivalents in other frameworks...), depending how you'd like your application to behave.
jQuery.mobile.changePage()
http://api.jquerymobile.com/jQuery.mobile.changePage/
.load()
http://api.jquery.com/load/
Here are a couple of Worklight 6.1 projects demonstrating page navigation:
JQM_multipage_load_changePage.zip - uses either .load or .changePage
JQM_multipage_changePage_pageshow.zip - uses .changePage and .pageShow
In both approaches you have 1 HTML file (Worklight's index.html) and multiple other HTML files; you take the contents of these HTML files and replace with it a specific subset of the index.html. This way Worklight's index.html remains intact (the references to the framework's JS, etc), but the app contents is changed.
Taking the above to your particular case, you can add an onclick to your href and use jQuery Mobile "to transition" and display the contents of "another" page.
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
We have an MVC site that has custom formatting throughout. We are using jQuery Mobile and want to use the features in it, but it themes everything. We do not want this.
I found this SO question and I added this Javascript code in the _Layout.cshtml page:
$(function () {
$('html').find('*').attr('data-role', 'none');
});
This works for all of the elements, but sometime after the page loads jQuery inserts a <div> with the attribute data-role="page" which still causes issues.
Can I somehow disable themes altogether?
Try simple add data-ajax=false to the links/buttons who are responsible for the navigation.
Ex:
<a href="#Url.Action("Index", "MyPage")" data-ajax="false">
This will prevent jquery from use ajax for the transitions, you page will reload and the duplicated data-role=page will not be on DOM anymore.
It works for me, maybe can help you too.
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>
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