I want to ba able to disable all ui classes and html formatting on every page and still be able to use transitions, load pages via ajax, etc...
I looked through the Jquery Mobile documentation and $.mobile js object but could not seem to find anything.
If anyone knows would be really helpful :)
Download builder: In the works
Now that we’ve decoupled most of the UI widgets, we’ve set the stage
for there to be a download builder. This will let you build a custom
version of jQuery Mobile to only include the parts you need. For
example, you could just use the core files to add Ajax-based
navigation with pushState and leverage some of the touch events and
other utilities with a very lightweight build (roughly 11k). Or, you
could add in specific UI widgets like form elements, listviews, etc.
to create an optimized build. We’re aiming to have a download builder
tool as part of 1.0.
Source:
http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/
Related
I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.
JQuery demo, three pages, all one source file:
http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html
You can just use normal links with jQuery mobile:
http://demos.jquerymobile.com/1.4.0/navigation/
It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.
Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:
including the header and footer in jquery mobile multiple page site
But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.
I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.
I think my personal API is what you are searching for:
https://github.com/charnekin/api
Demo example:
http://yopo.es/cordovapi/
jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages.
To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.
I am trying to optimize jquery mobile and select only those components I need with the jquery mobile download builder http://jquerymobile.com/download-builder/.
However, I have troubles deciding which components I actually need. The features I need are these:
Navigation from a page to another
Basic form elements
Theming related to the aforementioned features
Form element components I can probably pick up myself but do I for example need 'Global initialization of the library' listed in core components in the download builder page?
i'm totally a beginner of jquery mobile, i'm wondering how does everybody build the UI?
by html markup or writing pure code?
if it's by html markup, then if i have a complex applicaiton , then i'm gonna have a very long html file with a lot of pages, how do you deal with that?
if with pure code, i don't find it easy to create widgets, the only i found it just to put the pure html code into a jquery object wrapper. it's not very object-oreinted, i want some simple ways like: var $aButton = new button( );
i had ios native app development experience, normally i write the ui with pure coding. i'm just wondering if there's way to build ui with pure code?
There's no official way to build the UI in pure code but no one stops you from writing your own "code generator".
Be warned:
Writing HTML is the easier way to do, because JQM will do all of the UI-manip.
I'm working on a UI generator for JQM which
will be released opensource. Still a lot to do but it already works more or less - see http://officejs.com
Check the erp5loader.js file which generates the whole app - there is only an empty index.html.
The factory section contains all methods necessary to generate JQM UI. The JSON files loaded show how to generate static and dynamic widgets as well as how to hook into navigation and global action bindings
Roll your own or wait until we are releasing ours :-)
I'm working on a Meteor project at the moment that utilises Meteor JS & jQuery Mobile. All is going well apart from certain circumstances where Meteor updates an element.
For example, JQM automagically adds a few surrounding divs to a select box for formatting purposes (.ui-select, .ui-btn, .ui-shadow, etc.) but when Meteor updates this element, whether from a remote or local db change, it reverts the element to a standard select box, in effect ruining the UI.
I was just wondering if there is a easy solution to this issue where Meteor calls on jQuery to make changes prior to updating the element?
Dynamically added jQuery Mobile content must be enhanced.
It can be done in few ways, but most common ones are:
In case you want to enhance only content
$('#page-id').trigger('create');
In case you want to enhance full page (content + header + footer)
$('#page-id').trigger('pagecreate');
It is good to know that these method are performance extensive so you can always enhance widgets (buttons, listviews ...) separately. To find out more take a look at my other ARTICLE, to be transparent it is my personal blog, or find it HERE.
A question about jquery UI widgets. Is there a way to get them without all the bloat of CSS that they carry and render out ? I'm having a complete mess with tabs rendering all those jquery-ui-widget, jquery-ui-panel etc. etc. classes.
This guy here does it somehow
http://www.davereederdesign.com/post/2010/04/23/Tabs-with-Memory.aspx
?
He doesn't use the JQuery Tab widget.
I know this as an old post, but I'm having a similar problem applying UI widgets to an already very heavy website. If you inspected the widget in Firebug you might be able to only grab the rules that the widget uses and create a custom CSS file to apply to it. I'm going to try this when I'm back at work tomorrow and I'll report back on my progress.