Experimenting with jquery mobile

I recently checked out jquery mobile, and I was quite impressed. It’s there to help you make a mobile user experience, but what impressed me more was a few things it does in the background, and how easy it is to use.

To begin with, if you just load the jquery mobile CSS and script:




You’re already getting some of its functionality on your website, without doing anything else. For example, if you use links in your website, you will now notice that they will all automatically use AJAX and give the user a sleek loading animation.
Also, some of your elements will be styled, naturally. For example, checkboxes will automagically become mobile-friendly:


As mentioned earlier, the jquery mobile syntax was surprisingly easy to use. Let’s look at some examples:

Dialogs

You can designate any other page to open as a dialog, by giving your link a data-rel=”dialog” attribute. Personally, I think having it in its own page is cleaner, anyway.

Open dialog

What isn’t immediately obvious, though, is that your target page needs some specific HTML markup to work, too. It should look like this:

Dialog Header

Dialog content. Ok Cancel

So, your container has to be data-role=”dialog”, then data-role=”header” and data-role=”content” designate the dialog header and content. data-rel=”back” on a link will make it a close button.
The data-theme=”” attribute is optional, but it can be used to style various components. The themeroller lets you create several “swatches” for your theme, with different colors, but the defaults are mentioned in the documentation.

Collapsibles/Accordions

The way to make a collapsible is straight forward:

Click on me!

Collapsible content.

The only special markup there is data-role=”collapsible”. The heading (which can be any heading from h1 to h6) automatically becomes the collapsible toggle.
If you want to make an accordion instead, just put your collapsible in a parent with data-role=”collapsible-set” like so:

Collapsible 1

Collapsible 1 content.

Collapsible 2

Collapsible 2 content.

That’s all it takes!

Switches

Another thing that you may want to do, is provide switches instead of regular checkboxes. To do this, just make a select with the attribute data-role=”slider”, and give it two options.


I made the default state on, by just giving my on option the selected attribute here.

Headers/footers

You can make a cool header/footer for your page, by using data-role:

Header!

Fixed Footer!

Blah blah

And you can also use data-position=’fixed’ to make them stick in place.

Tables

Tables can either ‘reflow’ or change the number of columns when the screen size changes.

Reflow

Reflow is the default mode for a responsive table. and it means that the table columns will change to a stacked presentation on a small screen.


  
    
      
      
      
      
    
  
  
    
      
      
      
      
    
      
      
      
      
    
  
Student IDStudent NameYearMark
1Errietta Kostala2100%
1Errietta Kostala2100%

data-mode=”reflow” is the key here. ui-responsive changes the table to a normal horizontal column view when the screen beocmes big again, and table-stroke just adds a border in the table.

Column Toggle

Column toggle means certain columns get hidden when the screen becomes small. This is where htis data-priority and ‘persist’ that you saw above is actually used. The one with data-priority=’persist’ will always stay, then columns will stay depending on how big their priority is. So the one with priority = 4 will be the first to go, and the one with 1 will be the last. Just change data-mode in the table above to be columntoggle to do this; Your page will also automatically acquire a button which allows the user to select which columns are displayed in this mode.


  
    
      
      
      
      
    
  
  
    
      
      
      
      
    
      
      
      
      
    
  
Student IDStudent NameYearMark
1Errietta Kostala2100%
1Errietta Kostala2100%

Sliders

Just use the normal <input type=”range”> syntax.



data-highlight can give it a highlight:


Put two sliders within data-role=’rangeslider’ for a range slider.

Overall, jquery mobile is at least a good start for building a mobile gui, if it’s not suitable for a full solution. Also, as said earlier, it can be themed to your application’s needs, so you’re not stuck with the default look!

Until next post, bye bye!