“jQuery”:http://jquery.com/ to the rescue again! “jQuery Mobile”:http://jquerymobile.com is built on jQuery and helps ease work on mobile based web applications. The framework gives a great start to a mobile site with very little effort making a custom mobile interface. The examples below are also found on “github”:https://github.com/JaredSartin/jQuery-Mobile-Demo.
jQuery Mobile Basics
All “pages” should live in the body of one html page (with minor exceptions). Here is a gist of the basics of a “page” in jQuery Mobile:
The gist is missing the valid html (body,head, etc), it is just to show how simple a “page” is.
You will see four main parts, the “page” div, containing the other three elements. The important parts of this element are the data-role being page and the ID. The ID on the page div will be used for linking between “pages”. The other three parts contained in the page should be self explanatory by their data-roles. It is suggested to have the header in every “page”, the footer is not necessarily required. To add another page, use the same template and make sure its a sibling element of other pages in the body, changing the id to fit.
jQuery Mobile, by including the css and js, will style many elements to fit a mobile device (headers, paragraphs, lists, etc.). With some additional attributes, there is even more options that are available for making your content appear more like a native mobile app. You will notice that there is no additional css or js written for the example in the github repository.
Lists, Links, and Buttons
Lists are great ways to provide functionality to your “app”, there is a lot you can do to make them look good. In order to give your lists the “native app” treatment, you need to add a couple attributes to the elements, and off you go. Be sure to wrap the text in links if you plan on using your lists as navigation menus.
The image to the left is a visual representation of the code below. The code below is in the same order as the image example:
With the basics out of the way, you can easily begin incorporating dynamic page building with “templating engines”:https://spin.atomicobject.com/2011/07/10/jquery-expand-examples/. If nothing else, you can use jQuery to do some modifications to the content. Once you get the hang of that you can also start working on device detection via JS or serving certain CSS via media queries.