jQuery Mobile Alpha was released last week, and I just had to have a play. In short, it’s really amazing.
I eagerly awaiting this release, in fact I was checking jQueryMobile.com every hour to see if it was online 
. When I finally saw it online, I just had to play with it. It’s very similar to jqTouch, some parts are actually based on the work done in jqTouch, which I’ve used before, but a lot easier too use.
First, you don’t need to use any jQuery to use it. It’s all based on the data attribute. For example to make a toolbar, all you need to do is create a div with the attribute data-role=”header”.
<div data-type="header">
...
</div>
That’s it. No jQuery anywhere. That is nice, and simple, really simple.
To start using it all you need to do is include the CDN hosted JavaScript and CSS files. Remember you are creating a HTML5 document as well, so your header should look like this
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head>
The base HTML code you need to create your page is
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body> </html>
Which will produce a basic web page you can work from.
As you can see so far, its fairly basic and empty. But It doesn’t take a lot to bring it to life.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline" data-theme="b"> <a href="#" data-icon="delete" data-theme="b">Cancel</a> <h1>Super Heroes</h1> <a href="#" data-icon="check" data-theme="b">Save</a> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href="#">Batman</a><span class="ui-li-count">12</span></li> <li><a href="#">Superman</a><span class="ui-li-count">2</span></li> <li><a href="#">Wonder Woman</a><span class="ui-li-count">6</span></li> <li><a href="#">Robin</a><span class="ui-li-count">12</span></li> <li><a href="#">Flash</a><span class="ui-li-count">2</span></li> <li><a href="#">Green Lantern</a><span class="ui-li-count">6</span></li> </ul> </div><!-- /content --> <div data-role="footer" class="ui-bar"> <a href="#" data-role="button" data-icon="delete">Remove</a> <a href="#" data-role="button" data-icon="plus">Add</a> <a href="#" data-role="button" data-icon="arrow-u">Up</a> <a href="#" data-role="button" data-icon="arrow-d">Down</a> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Which will create a basic list with a count bubble and buttons in the header and footer.
And with a little bit more work, it took me about 30 minutes to whip this up (and that included learning time, so once skilled this could take you less than 10 minutes).
<!DOCTYPE html> <html> <head> <title>Demo jQuery Mobile Mail App</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header" data-position="inline" data-nobackbtn="true"> <h1 style="text-align:left;margin-left:20px;">Demo jQuery Mobile Mail App</h1> <div style="width:550px;position:absolute;right:20px;top:4px"> <a href="#" data-icon="new">Compose Mail</a> <a href="index.html" data-icon="refresh">Refresh</a> <a href="index.html" data-icon="gear">Settings</a> <div style="width:220px;float:right;margin-right:10px;"> <input type="search" name="password" id="search" value="" /> </div> </div> </div><!-- /header --> <div class="ui-grid-a" style="position:relative"> <div style="position:absolute;left:0;width:20%;" class="ui-block-a"> <div data-role="header" data-position="inline" data-theme="b"> <h1 style="margin-left:10px;margin-right:10px">Folders</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li> <li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li> <li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li> <li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li> <li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li> </ul> </div> </div> <div class="ui-block-b" style="margin-left:20%;width:80%;border-left:1px solid #c6c6c6"> <div data-role="header" data-position="inline" data-theme="b"> <div data-role="controlgroup" data-type="horizontal" style="position:absolute;top:0px;left:10px;"> <a href="index.html" data-role="button" data-icon="back" data-iconpos="" title="Reply" data-theme="b"> Reply </a> <a href="index.html" data-role="button" data-icon="forward" data-iconpos="" title="Forward" data-theme="b"> Forward </a> <a href="index.html" data-role="button" data-icon="delete" data-iconpos="" title="Delete" data-theme="b"> Delete </a> </div> <h1> </h1> <span style="position:absolute;top:10px;right:70px;text-align:right;width:200px">Message 1 of 12</span> <div data-role="controlgroup" data-type="horizontal" style="position:absolute;top:0px;right:10px;"> <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" title="Up" data-theme="b"> Previous </a> <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" title="Down" data-theme="b"> Next </a> </div> </div> <div data-role="header" data-theme="c"> <h2 style="text-align:left;margin-left:20px;font-size:1.3em;">Message title</h2> <span style="font-weight:bold;margin-left:20px;font-size:0.9em;">October 18, 2010</span> <span style="font-size:0.9em;">11:31 a.m.</span> </div> <div data-role="content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </div> </div> </div><!-- /grid-a --> <div data-role="footer"> <h2>Sample web app, nothing works but looks pretty good
Also the alpha comes with 4 themes, a, b, c, d. Each theme looks the same, exact the colour scheme is different. And all you have to do to use these themes is to add attribute to your html element called data-theme. For example
<div data-role="header" data-position="inline" data-theme="a">
<a href="#" data-icon="delete" data-theme="a">Cancel</a>
<h1>Edit Contact</h1>
<a href="#" data-icon="check" data-theme="a">Save</a>
</div>
<div data-role="header" data-position="inline" data-theme="b">
<a href="#" data-icon="delete" data-theme="b">Cancel</a>
<h1>Edit Contact</h1>
<a href="#" data-icon="check" data-theme="b">Save</a>
</div>
<div data-role="header" data-position="inline" data-theme="c">
<a href="#" data-icon="delete" data-theme="c">Cancel</a>
<h1>Edit Contact</h1>
<a href="#" data-icon="check" data-theme="c">Save</a>
</div>
<div data-role="header" data-position="inline" data-theme="d">
<a href="#" data-icon="delete" data-theme="d">Cancel</a>
<h1>Edit Contact</h1>
<a href="#" data-icon="check" data-theme="d">Save</a>
</div>
Will produce the following
And you can easily mix and match the themes between elements
<div data-role="header" data-position="inline" data-theme="b">
<a href="#" data-icon="delete" data-theme="a">Cancel</a>
<h1>Edit Contact</h1>
<a href="#" data-icon="check" data-theme="c">Save</a>
</div>
Which results in
So although its the first alpha release, its really polished and I’m really impressed by it. It’s missing too many key components for me to start using it, but I suspect the beta will be complete enough to start using.
Can’t wait too see what they bring us next.
10 I like this
Pingback: Tweets that mention jQuery Mobile Alpha Review | reven -- Topsy.com
Preatty nice, thanks for sharing!!
Thank you for an additional excellent article. Exactly where else could anybody get that type of facts in this kind of a perfect way of writing? I have a presentation subsequent week, and I’m around the appear for like details.
I am extremely impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it’s rare to see a great blog like this one today..