50 jQuery Mobile Development Tips
We have collected 50 jQuery mobile tips and tutorials, 10 mobile plugins, 10 mobile website demos, 10 free mobile themes, 10 new mobile frameworks, 10 mobile cheat sheets and more stuff to help you get that mobile website started and up and running in no time!
Whats is jQuery Mobile?
jQuery Mobile is a framework for web applications, mobile and mobile web sites in order to provide a unified user interface across multiple platforms like the iPhone mobile device, BlackBerry, Android and Windows Mobile. Stay up to date on the latest jQuery Mobile Developments!
A backbone mobile app running in Safari. A great place to start your mobile development experience is to take a look at the way this is put together. Start by viewing the app in your browser.
You might ask how to target devices in the CSS (based on screen size). Say you want a two-column layout for the iPad and a single column for smartphones. The best way to accomplish this is with media queries. With some simple media queries in place, you can quickly make the CSS target screen sizes.
There are a few font-replacement methods available such as cufon, sIFR, FLIR, @font-face and Google Fonts API. When building a web app using jQuery Mobile, I found that @font-face method is the easiest method to work with and the performance is quite satisfactory.
If you want to modify things on the page before the mobile plug-in was triggered, the recommended solution is to simply put traditional jQuery calls before the reference that loads the mobile plug-in. This way, your jQuery commands have a chance to run prior to the library being loaded.
If you find yourself needing the full mark-up for a basic page over and over again. As such, here is all the code you need to set up a basic single page.
If you wish to optimally structure a single page for multiple devices, you could find yourself combining the media query tricks above with the “columns in any order” technique. Luckily, web developers figured out long ago how to move columns around and by combining this technique with media queries.
Learn how to use Google Analytics with jQuery mobile.
Learn how to submit a jQuery Mobile form via AJAX with PHP.
This tool allows you to easily create mobile websites and web apps. In this tutorial, I’ll show you how to create a mobile-optimized WordPress theme.
In this tutorial I will show you how to build a website with JQuery Mobile. In this first part of the tutorial I will explain the site’s characteristics, and I will implement the home page of the site.
Now it is time to build the Speakers page as a continuation of my series on how to create a Website Using jQuery Mobile.
One handy feature of the library is its built-in pop-up or dialog box feature. To setup this feature is pretty simple. Note: First, the target page must be a full-blown jQuery mobile page, as outlined in tip #1. Secondly, this will only work for external pages; it must be a full separate page to work properly.
Learn how to use the jQuery Mobile framework. This is a basic introduction on how to setup pages, links, navigation and buttons.
This may sound simple but it took me a few minutes to figure out how to apply a background color to a page without having it overwritten by jQuery Mobile CSS. Normally, you’d set a background color to body element but if you are using jQuery Mobile framework, you need to set it to ui-page class.
Find out how the new jQuery Mobile framework can help you build great-looking, cross-device web apps with ease. Lots of code examples and demos included. How to create a Simple jQuery Mobile App
I find the loading pop-up message a bit annoying because it gets triggered every time you load a different page. To disable this: add the following line of code into your JS file. If you find the loading pop-up message a bit annoying already because it gets triggered every time you load a different page. There’s a way to disable it, just add the following line of code into your JS file.
Today, we’ll dive in, and build a simple Tuts+ RSS reader, using PHP and jQuery Mobile. When we’re finished, you’ll have the ability to add this simple project to your iPhone or Android phone with the click of a button, as well as the skills to build your web apps!
This bit of code accommodates two basic needs. The first is to have two buttons next to each other. Fortunately, the library has a built-in column structure that can easily be put to work using a fieldset tag and the proper classes, as seen below. The second is to have two buttons with different themes. This code is directly from the documentation, and I keep it handy for frequent use.
Much as we might want to execute certain CSS for certain devices, we might also want to run jQuery only on specific devices. Here is an adaptation of some code from Snipplr that allows me to easily segment portions of jQuery to run depending on the user’s device.
jQuery Mobile framework comes with 5 themes – Theme A, Theme B, Theme C, Theme D and Theme E. But you can easily create a new theme for your web app.
One feature of the library (or flaw, depending on your needs) is that it intelligently truncates long items to fit into UI elements. There are two situations where this can be annoying. First, in list items, where I prefer to see the full text and the second one is in the footer text.
The first and simplest tip is working with the view port. (You may need to register at Apple in order to view that link. Two points off to Apple to requiring a login for simple docs!) The view port is a simple meta tag. Here is an example:
By default, jQuery Mobile framework adds an arrow next to every list item. To disable this, set data-icon attribute to “false” on the list item that you’d like the arrow to be removed.
Learn jQuery mobile form validation in this tutorial.
26. Using JQuery Mobile with the HTML5 canvas element to listen for touch events on the iPad and Android browsers
Learn how to detect the “tap” touch event on a smart phone device.
As awesome as AJAX navigation is, there are times where you’d just rather disable it. Use this bit of jQuery to tell the mobile library not to use AJAX navigation.
Sometimes, you may not want to have any text for your button but still use the rest of the features that comes with a button element. This is usually the case with a home button or an info button. To hide any text associated with the button, set data-iconpos attribute to “notext”. For example:
Learn how to use the jQuery Mobile toolbars, navigation bars, creating fixed position menus and more!
We can easily create a list that includes a search element through which the user can start entering a text and get all elements that fits this text filtered out from the list.
This mobile development framework is packed with slick features, and allows [mobile] developers to rock some serious jQuery on or in their iOS, Android, BlackBerry, Bada, Windows Mobile, Palm OS, Symbian, and MeeGo applications and web apps. You should see this bad boy in mobile Safari.
To open a link without using AJAX with page transitions (ie: reloading the full page the old-school way), set rel attribute to “external”.
This is a short video clip that explains how internal links work in jQuery Mobile.
Learn how to set a transition when showing a dialog in jQuery Mobile.
Learn how to add driving directions to to a jQuery mobile website.
In this tutorial, we will focus on some basic elements of jQuery Mobile: page structure, forms and Ajax form submission. The tutorial is based on version 1.0 alpha release 2 of the jQuery Mobile framework.
This video clip shows how to create a simple list view in jQuery Mobile.
We can add to each one of the list items a secondary link. It will be displayed together with an icon in the right part of the item.
This is a short video clip that shows the available controls when using the jQuery Mobile library.
This is a short video clip that shows the meaning of setting the fixed positioning both for the header and for the footer (in jQuery Mobile).
We can get a button that its width isn’t the entire width of the screen by adding the data-inline=”true” attribute to it. This video clip shows how to do it.
This is a short video clip that explains how to develop a simple web page that utilizes the jQuery Mobile library.
Learn how to build an office capable mobile web site with jQuery mobile.
This tutorial introduces the jQuery Mobile (JQM) framework for writing mobile web applications targeted at the mobile industry’s leading browsers. JQM is used to provide intuitive and consistent user experience for web-based applications running on mobile devices such as iPhone, iPad, Android, WebOS, BlackBerry Version 6 (Torch, Playbook), and others. The tutorial begins with a high-level look at the JQM project and the relation of JQM to, and dependence on, HTML5. After a brief look at one of the many ways in which you can construct a JQM application and some of the ways in which JQM enhances fundamental web UI elements, the tutorial takes a look at a basic sales force automation requirement.
This post will show you how to create and implement custom icons. In addition I’ll show you how to add high res icon support for iPhone 4’s Retina display and newer high resolution devices.
This application will allow you to create, read, update and delete blog posts from mobile devices.
Learn how to build a Native Android News Reader App using jQuery Mobile.