Let me preface this post by saying that I’m not advocating this approach versus the other. These are just experiments.
In my previous post, I shared a sample Employee Directory application built with jQuery Mobile. In this post, you’ll find another version of the same application: this version uses jQuery core, but not jQuery Mobile.
One of the nice things about jQuery Mobile is that it has built-in support for native-like animated view transitions. To achieve this, jQuery Mobile loads the different pages of your app inside a single document so that it can animate them in and out of the viewport. These animations are nice, however, depending on your application, loading pages into a single document may sometimes make you feel like you are fighting the system. For example, history management, deep linking, same page transitions, and name spaces (unique ids) may be harder to handle.
This version of the application loads pages “the traditional way”. The downside is obviously that you don’t get the animated transitions, but it makes other things easier to manage. Trade offs.
Another key feature of jQuery Mobile is its “progressive enhancement” approach. You annotate HTML elements to indicate their role (page, header, listview, footer, etc). jQuery Mobile then uses these annotations to inject styles and behaviors. With just a few annotations, you have an application that looks and behaves like a native mobile app. Without JQuery Mobile, making the application look good required a lot more CSS work, but in the end you are also in control of every pixel on the screen.
Again, these are just experiments. I’m interested to hear what you think. What has been your experience? How do you handle page loading and transitions?
Run the Application
Click here to run the application.
Download the Source Code
You can download the source code (HTML, JavaScript, CSS, PHP services and SQL script) here.
PhoneGap
You can use PhoneGap to package this application for different platforms. This version of the application doesn’t use any of the PhoneGap native APIs (GPS, camera, accelerometer, notification, etc). In my next blog post, I’ll show the same application getting the data from a local database (using the PhoneGap database API) as opposed to PHP services.
Update
I posted a version of the same application getting data from a local database using the PhoneGap database apihere.
Nice app. I totally agree with your reasons for using standard jquery. I don’t like the depending so much on the framework for how your app will look and feel. I have tried jquery mobile but found undoing some of the built in look and functionality was more difficult than building it from scratch.
You don’t have to use the single document approach if you don’t want to – just use data-ajax=”false” or rel=”external” on your links and they’ll get loaded like a regular page. I started off this way back with some of the earlier alphas when I seemed to have issues with the single page version. Since they got pushState going, things seem much better.
There is an “official” themeroller in the works for some UI variation but I know it can be a pain to modify manually. If you’re a design duffer like me, it’s a good starting point! I think the download builder (when it arrives) will be a big plus so you can pick and choose the bits of the framework you want.
Thanks for posting this great example! When I run the app on the IPhone, the “Home” button overlaps “Employee Directory” on the employee detail screen. Is there any way to make only the IPhone scale down the screen without it also happening on the Android?
Actually, jQueryMobile is seriously flawed as jQueryUI. Sad because jQuery is really the defacto standard and one of the best js lib to date.
I will do post of why jQueryMobile/jQueryUI is flawed, but in short, css/skinning is completely over designed, and the component design are highly inefficient. So, jQueryMobile/jQueryUI are good for quick and dirty (but still good skin) apps, but when you want to create real custom application, use jQuery and go custom on top (and design with delegates for performance, and do not over partition our css)
Doesn’t work on the iphone 4. Getting JS errors.
Thank you all, but I have a question though it may sempbrare stupid, how come when I load the downloaded files and they open the application should not be?, That I only open the html pages without seeing the “employees”.
Why?
thanks
Chris,
Can you do a similar employee directory application using Dojo Mobile? Will be very helpful
Thanks
very thanks
Why i get only a page with title and navbar??
alert(“Error accessing the server”);
i changed config file then also same error displayed?
Did you ever get this resolved? I am having the same issue (Error accessing the server).
Did you figure out to resolve this?
Thanks
How else can you package app without using phonegap as phonegap supports blackberry 5 OS and above. I need to target version 4 as well
hEY HI I WANT TO DO THIS APP IN DOJO PLEASE HELP M
Hi,
Is it poosible to use jquerymobile and my jquery in same application?
If it is possible can you give a sample
Wonderful application and also very useful.
thanks
-
Mani