Beautiful women doing geeky stuff

jQuery Mobile

13/12/2012 Categories: jQuery

JQuery Mobile Scott Allen


Important! --> change a view port in the head -->width:device-width initial-scale=1.0

change from portray to landscape script with "orientationchange"

Media Query (

you can add media query to css to make something run only on a particular device like an img on a big screen (i.e. mmin-width:640px) (part of css3)



Important! when you use id for elements they have to be unique in all pages (normally unique only on a page)
Remember to put all the styles you have on your first page, because while you browse everything that is outside data-role="page" div will not be loaded. It will be loaded only if somebody comes on this page directly
Two different scripts:

  1. If you want to have a pop up only on the first page
  2. Whenever you load any page

you can also enable loading the upper part of every page by using script with "mobileinit"  

  • In the header you don't need data-role="button" to have an icon button with correct bubble size
  • data-inline="true" makes button to take exactly the amount of space it's text need
  • To create a back button: data-role="button" and you establish a relation data-rel="back"


  • To put elements next to each other use "ui-grid-a" 2 columns (b 3 c 4 d 5)

Interesting element:

  • slider ---> useful and effective for weight, height and so...


  • To format click ctrl K ctrl D
  • ctrl K ctrl S surround with... div

Look and design:

  • JQM comes with theme framework (entirely in CSS) supports up to 26 sets of colors for buttons, text, header and so on (5 swatches A B C D E)
  • you can also build your own on (
  • You can also change it directly in CSS file ( look for .ui-bar-a b c...)
    • i.e. in default theme you can change swatch C for text  (or any other element like header, footer, button and so on) by typing in html <div data-role="page" data-theme="b"> which will overwrite text's style (normally inherited from parent-content)
  • Footer: you can tyle it and you can change it's position to "fix" in order to keep it always visible (data-position="fixed")

you can add swipe event ( watch photos) script with swipeleft

12 different page events in the page life (i.e pageload, pagebeforehide, pagehide)