jQuery Mobile – page structure

A jQuery Mobile site must have an HTML5 doctype.
In the head is a meta viewport tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet.
In the body there is a div with a data-role of page is the wrapper, the header bar (data-role="header"), a content region (data-role="content") and a footer (data-role="footer").
These data- attributes are HTML5 attributes and used through jQuery Mobile to transform basic markup into an enhanced and styled widget.

<!DOCTYPE html>
<html>
  <head>
   <title>My Page</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Header</h1>
      </div>
      <div data-role="content">
        <p>Content</p>
      </div>
      <div data-role="footer">
        Footer
      </div>
    </div>
  </body>
</html>

Adding elements in content

1. Listview
The common listviews in jQuery Mobile are coded as lists with a data-role="listview" added.
In the example bellow a dynamic search filter for the list is added with data-filter="true".

<ul data-role="listview" data-filter="true">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

 

2. Buttons
A simple clickable button is made adding data-role="button" attribute to it. You can add an icon with data-icon attribute, and set its position with data-iconpos.

<a href="#" data-role="button" data-icon="star" data-iconpos="top">Star button</a>

3. Themes
jQuery Mobile has 5 default themes, from a to e. To change the theme add data-theme="d" attribute to any of the widgets on the page.

4. Dialogs
Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link. By default, the dialog will open with a ‘pop’ transition. Like all pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link.

<a href="foo.html" data-rel="dialog" data-transition="slideup">Open dialog</a>

5. Collapsible content blocks
To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.
By default, the content will be collapsed. To expand the content when the page loads, add the data-collapsed="false" attribute to the wrapper.

<div data-role="collapsible" data-collapsed="false">>
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

Structural tags in HTML5

HTML 5 specification added some new tags for the markup that will replace many typical div entries and a new doctype.

First of all, HTML5 uses a new and simple doctype: <!DOCTYPE html>. This indicates that the broswer should use HTML5.

The new tags in the structure are:

<header>
– intended to mark a section of the HTML page as the header.

<section>
– meant to identify significant portions of the content
– sections can be nested inside each other if needed
– can have a header and a footer
– sections are like chapters of a book

<article>
– identifies major sections of content

<aside>
– indicates that the content contained within the tag is related to the main content of the page, but not part of it
– provides additional information

<footer>
– marks the section of the HTML page as the footer
– typically contains information about its section such as who wrote it, copyright data, links to related documents

<nav>
– defines the navigation area, tipically a list of links
– the nav should be a sibling of the main section, header and footer

Example of use:

<!DOCTYPE html>
<html>
  <head>
    <title>Structural tags in HTML5</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Structural tags in HTML5</a></h1>
      <nav>
        <a href="#">Home</a> |
        <a href="#">Link 1</a> |
        <a href="#">Link 2</a> |
      </nav>
    </header>
    <section>
      <article>
        <p>This is an important section of content on the page.</p>
        <aside>
          <p>This is an aside for the first article.</p>
        </aside>
      </article>
      <article>
        <p>This is an important section of content on the page.</p>
      </article>
    </section>
    <footer>This is the footer</footer>
  </body>
</html>

Using HTML5 in all browsers

Because some browsers don’t understand the new HTML5 doctype, they don’t recognize the new tags. All unknown tags have no default style, and are treated as inline tags (and we need to use them as block elements).
We can style them with CSS like this:
header, nav, section, article, aside, footer { display: block; }

Supporting IE
IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. For reparing that, we need to creare a DOM node with JavaScript for each of the new tag, like this:

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

 

5 HTML5 Audio Players

1. Speakker

Comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes.

Demo & Documentation

2. audio.js


audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

Demo & Documentation

3. Sound Manager 2

SoundManager 2 gives you a single, powerful API that supports both new and old, using HTML5 audio where supported and optional Flash-based fallback where needed.

Demo & Documentation

4. jPlayer

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages.

Demo & Documentation

5. Media Element

Instead of offering an HTML5 player to modern browsers and a totally separate Flash player to older browsers, MediaElement.js upgrades them with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API.

Demo & Documentation