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:

<link rel="stylesheet" 
href="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></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:

<label>
    <input type="checkbox" /> I'm a checkbox!
 </label>

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.

<a href="/page" data-rel="dialog">Open dialog</a>

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

<div data-role="dialog">
    <div data-role="header" data-theme="d">
        <h1>Dialog Header</h1>
    </div>

    <div data-role="content">
        Dialog content.
        <a href="dialog/index.html" data-role="button" data-rel="back" data-theme="b">
        Ok
        </a>
        <a href="dialog/index.html" data-role="button" data-rel="back" data-theme="c">
        Cancel
        </a>
    </div>
</div>

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:

<div data-role="collapsible">
    <h1>Click on me!</h1>
    <p>
        Collapsible content.
    </p>
</div>

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:

<div data-role="collapsible-set">
        <div data-role="collapsible">
            <h1>Collapsible 1</h1>
            <p>
                Collapsible 1 content.
            </p>
        </div>

        <div data-role="collapsible">
            <h1>Collapsible 2</h1>
            <p>
                Collapsible 2 content.
            </p>
        </div>
    </div>
</div>

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.

<label>
    <p>
        Turn notifications:
    </p>
    <select  data-role="slider">
        <option value="off">Off</option>
        <option value="on" selected>On</option>
    </select>
</label>

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:

<div data-role="header" >
  <h1>Header!</h1>
</div>
<div data-role="footer" >
    <h1>Fixed Footer!</h1>
    Blah blah
</div>

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.

<table data-role="table" id="movie-table" 
data-mode="reflow" class="ui-responsive table-stroke">
  <thead>
    <tr>
      <th data-priority="1">Student ID</th>
      <th data-priority="persist">Student Name</th>
      <th data-priority="2">Year</th>
      <th data-priority="3">Mark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Errietta Kostala</td>
      <td>2</td>
      <td>100%</td>
    </tr>
    <tr>
      <th>1</th>
      <td>Errietta Kostala</td>
      <td>2</td>
      <td>100%</td>
    </tr>
  </tbody>
</table>

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.

<table data-role="table" id="movie-table"
data-mode="columntoggle" class="ui-responsive table-stroke">
  <thead>
    <tr>
      <th data-priority="2">Student ID</th>
      <th data-priority="persist">Student Name</th>
      <th data-priority="3">Year</th>
      <th data-priority="1">Mark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Errietta Kostala</td>
      <td>2</td>
      <td>100%</td>
    </tr>
    <tr>
      <th>1</th>
      <td>Errietta Kostala</td>
      <td>2</td>
      <td>100%</td>
    </tr>
  </tbody>
</table>

Sliders

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


<label >Slider:
  <input type="range" data-highlight="true" min="0" max="10" step=".1" value="5">
</label>

data-highlight can give it a highlight:

<label >Slider:
    <input type="range" data-highlight="true" min="0" max="10" step=".1" value="5">
</label>

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

<div data-role="rangeslider">
    <label for="range-1a">Rangeslider:</label>
    <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
    <label for="range-1b">Rangeslider:</label>
    <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>

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!

Leave a Comment

Your email address will not be published. Required fields are marked *