In this tutorial, you’ll be introduced to jQuery Mobile Basics and Usage, with the help of a Sample Flight Search and Results Page
About jQuery Mobile
The Objective of jQuery Mobile is to deliver top-of-the-line Javascript in a unified User Interface that works across the most-used Smartphone Web Browsers and Tablet Devices. It does that with Perfection, by letting the Developers deal only with HTML and taking care of the “Heavy Weight Lifting”
Getting Started
jQuery Mobile is very unobstrusive as it doesn’t mandate the inclusion of various Javascript files and also there is no need to use Heavy Javascript Calls to achieve the end results. However, you need to include the Core jQuery Mobile Library and the Minified CSS to start with.
Here is a Boilerplate HTML that we will use to build our Sample Flight Search Application. You can use this for any Web page, you plan to build
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <title>jQuery Flight Search</title><link rel="stylesheet" href="https://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"><script src="https://code.jquery.com/jquery-1.4.3.min.js"></script><script src="https://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script><div data-role="page" id="ui-page-start" class="ui-page ui-body-c ui-page-active"><div data-role="header" class="ui-bar-a ui-header" role="banner"><h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Page Header</h1></div> <!-- /header --><div data-role="content" class="ui-content" role="main"><p>Content</p></div><!-- /content --><div data-role="footer" class="ui-bar-a ui-footer" role="contentinfo"><h4 class="ui-title" tabindex="0" role="heading" aria-level="1">Footer</h4></div> <!-- /footer --></div> |
In the Head section we include the Core jQuery and jQuery Mobile Libraries, to be used by the Rest of the Pages. Also, the Core CSS Library is included for the UI Element Styling. Note all these are minified versions and greatly improve the Page Load Times on Mobile Devices
Within the Body Section of the HTML Document, the Content is essential divided into 1 Main Section and 3 Sub Sections:
-
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927
<divdata-role="page"class="ui-page ui-body-c"><p>All the jQuery UI Elements must be wrapped within this Parent Container. One HTML Page/Document can have a Maximum of “1″ Container of this type</p><li><preclass="brush: html; auto-links: false;"><divdata-role="header"class="ui-bar-a ui-header"role="banner"><ahref="#"class="ui-btn-left ui-btn ui-btn-up-a ui-btn-icon-left ui-btn-corner-all ui-shadow"data-icon="arrow-l"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-icon ui-icon-arrow-l ui-icon-shadow"></span><spanclass="ui-btn-text">Back</span></span></a><p>This Section is the Header Part of the HTML Page, that is Visible at the Top and usually holds the Navigation Buttons. This section is always a “sub-element” of data-role=”page”</p><li><preclass="brush: html; auto-links: false;"><divdata-role="content"class="ui-content"role="main"><p>This Section holds the Primary Content of any HTML Page, where most of the User Interactions happen. This section is always a “sub-element” of data-role=”page”</p><li><preclass="brush: html; auto-links: false;"><divdata-role="footer"class="ui-bar-a ui-footer"role="contentinfo"><p>This Section holds the Footer of any HTML Page, where the Copyright and other relevant Links are usually displayed. This section is always a “sub-element” of data-role=”page”</p><p>All the Magic with jQuery Mobile happens with the “data-role” attribute associated with the containers. HTML Source is parsed at render time by jQuery Libraries and Dynamic HTML/Javascript is displayed on the Browser</p><h2class="ui-title"tabindex="0"role="heading"aria-level="1">For our Tutorial</h2><p>Let us Create 2 HTML Files (PHP in my case, but it doesn’t make a difference as we are not writing any Server-Side Scripts for this tutorial) – <strong>index.php and results.php</strong></p><p>The First Page will be the Search Page, with Form Controls and the Second Page will be the Results Page, with results displayed as Lists</p><p>Let us Copy the HTML Boilerplate code on each of these files – except the</p><preclass="brush: html; auto-links: false;"><title></title></pre><p>is “jQuery Flight Search” for the first and “jQuery Search Results” for the next</p><h2class="ui-title"tabindex="0"role="heading"aria-level="1">Flight Search Page</h2><p>Let’s decide and plug in content for each of the Content Section of the Flight Search Page – the Header, Content and Footer</p><h3class="ui-title"tabindex="0"role="heading"aria-level="1">Header – Flight Search Page</h3><p>I want the Header Section to NOT contain any “Back Navigation Buttons”, as this is always the First Page of my Application. Please note, jQuery automatically adds “Back” Navigation buttons when coming into a Page from another Page. So if you don’t need it, you need to tell jQuery that.</p><p>Also, I want “Search for Flights” appear on my Header Section. And here is the HTML Code for that…</p><preclass="brush: html; auto-links: false;"><divdata-role="header"data-nobackbtn="true"class="ui-bar-a ui-header"role="banner"><h1class="ui-title"tabindex="0"role="heading"aria-level="1">Search for Flights</h1></div><!-- /header --></pre><p>And, this is how it looks on an iPhone</p><p><imgsrc="/wp-content/uploads/2010/11/header_search.png"alt="Search for Flights - Header"></p><p>If not mentioned, jQuery uses the Default Theme and applies it on the HTML Page. You can switch themes by applying “data-theme” attribute on the Containers/Elements. But this is out of scope for this Tutorial and will not be discussed further</p><h3class="ui-title"tabindex="0"role="heading"aria-level="1">Content – Flight Search Page</h3><p>I want the Content Section of the Search Page to contain the following elements, in the exact order specified:</p><ul><li>Text Entry Fields for From Location & To Location</li><li>Text Entry Field for Departure Date (Date Picker coming soon…)</li><li>Conditional Text Entry Field for Return Date, toggled On/Off with a Switch Button</li><li>Slider Element to Choose Number of Travellers</li><li>Select List to Choose the Class of Journey</li><li>A Submit Button</li></ul><p>Note that the code for all these elements must get inside the “data-role=content” section of the HTML Page. Also, I will wrap all elements inside the “form” HTML Tag, though an actual Submit will not happen in this Tutorial</p><p>Here is how I introduce the Text Entry Fields for From & To Locations</p><preclass="brush: html; auto-links: false;"></pre><formaction="results.php"method="post"><divdata-role="fieldcontain"class="ui-field-contain ui-body ui-br"><labelfor="name"class="ui-input-text">From</label><inputtype="text"name="name"id="name"value=""class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"></div><divdata-role="fieldcontain"class="ui-field-contain ui-body ui-br"><labelfor="name"class="ui-input-text">To</label><inputtype="text"name="name"id="name"value=""class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"></div>....</form><p>Each Form Element must have the “data-role=fieldcontain” and jQuery Framework takes care of the rest.</p><p>The Same way I introduce the Text Entry fields for Departure and Return Dates. The Date Picker is coming soon in the next release…</p><preclass="brush: html; auto-links: false;"><divdata-role="fieldcontain"class="ui-field-contain ui-body ui-br"><labelfor="name"class="ui-input-text">Start Date</label><inputtype="text"name="name"id="name"value=""class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"></div><divdata-role="fieldcontain"class="ui-field-contain ui-body ui-br"><fieldsetdata-role="controlgroup"data-type="horizontal"class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal"><divclass="ui-radio"><inputtype="radio"name="radio-choice-1"id="radio-choice-1"value="choice-1"checked=""><labelfor="radio-choice-1"data-theme="c"class="ui-btn ui-btn-up-c ui-btn-active ui-corner-left"><spanclass="ui-btn-inner ui-corner-left"><spanclass="ui-btn-text">One Way</span></span></label></div><divclass="ui-radio"><inputtype="radio"name="radio-choice-1"id="radio-choice-2"value="choice-2"><labelfor="radio-choice-2"data-theme="c"class="ui-btn ui-btn-up-c ui-corner-right ui-controlgroup-last"><spanclass="ui-btn-inner ui-corner-right ui-controlgroup-last"><spanclass="ui-btn-text">Return</span></span></label></div></fieldset></div><divdata-role="fieldcontain"id="return"class="ui-field-contain ui-body ui-br"style="display: none;"><labelfor="name"class="ui-input-text">Return Date</label><inputtype="text"name="name"id="name"value=""class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"></div></pre><p>The Form Element with “data-role=controlgroup” and “data-type=horizontal” with Radio Buttons under it, provides the Switcher Control that can be toggled On/Off. It’s purpose is to Show the “Return Date” if toggled On and Hide it otherwise. We will wait a moment before making it functional (Note I have assigned an <strong>id=”return”</strong> to the Return Date field, which we will use)</p><p>Next I will introduce a Slider Element to select the Number of Travellers and the upper limit will be “10″</p><preclass="brush: html; auto-links: false;"><divdata-role="fieldcontain"class="ui-field-contain ui-body ui-br"><labelfor="slider"class="ui-input-text ui-slider"id="slider-label">Travellers</label><inputdata-type="range"name="slider"id="slider"value="0"min="0"max="10"class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-slider-input"><divclass="ui-slider ui-btn-down-c ui-btn-corner-all"role="application"><ahref="#"class="ui-slider-handle ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow"data-theme="c"role="slider"aria-valuemin="0"aria-valuemax="10"aria-valuenow="0"aria-valuetext="0"title="0"aria-labelledby="slider-label"style="left: 0%;"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text"></span></span></a></div></div></pre><p>Note the <strong>min and max</strong> attributes of the Slider Elements, that makes things very simple for the Web Developer.</p><p>Next I will add a Select List to choose the Class of Travel</p><preclass="brush: html; auto-links: false;"><divdata-role="fieldcontain"class="ui-field-contain ui-body ui-br"><labelfor="select-choice-1"class="select ui-select">Flight Class</label><divclass="ui-select"><ahref="#"role="button"title="select menu"id="select-choice-1-button"aria-haspopup="true"aria-owns="select-choice-1-menu"data-theme="d"class="ui-btn ui-btn-up-d ui-btn-icon-right ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-icon ui-icon-arrow-d ui-icon-shadow"></span><spanclass="ui-btn-text">Economy</span></span></a><selectname="select-choice-1"id="select-choice-1"data-theme="d"tabindex="-1"><optionvalue="economy">Economy</option><optionvalue="business">Business</option><optionvalue="first">First</option></select></div></div></pre><p>For illustration purposes, I use 3 Class types – Economy, Business and First</p><p>Finally, I will add a Submit button. Submit Button doesn’t need any wrapper around it and automatically processed by jQuery</p><preclass="brush: html; auto-links: false;"><ahref="#"role="button"data-theme="c"class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Search your Flights</span></span></a><inputtype="submit"value="Search your Flights"class="ui-btn-hidden"tabindex="-1"></pre><p>I will use a small piece of jQuery Code, to Show/Hide Return Date field on using the Toggle Switch</p><p>Add this jQuery Script to the Top of the HTML Page, within the </p> section, to Hide the Return Date on Page load<preclass="brush: html; auto-links: false;"><scripttype="text/javascript">$(document).ready(function() {$('#return').hide();});</script></pre><p>Add this jQuery Script to the Bottom of the HTML Page, before the </p> section ends, to Show/Hide the Return Date when Toggle Switch is used<preclass="brush: html; auto-links: false;"><scripttype="text/javascript">$('#radio-choice-1').change(function() {$('#return').hide();});$('#radio-choice-2').change(function() {$('#return').show();});</script></pre><h3class="ui-title"tabindex="0"role="heading"aria-level="1">Footer – Flight Search Page</h3><p>On the Footer, I just need the Copyright Text, Symbol and the logo. The following code does the trick for me</p><preclass="brush: html; auto-links: false;"><divdata-role="footer"class="ui-bar-a ui-footer"role="contentinfo"><h4class="ui-title"tabindex="0"role="heading"aria-level="1">Copyright © 2010</h4></div><!-- /footer --></pre><p>Here’s how the Finished page looks on an iPhone</p><p><imgsrc="/wp-content/uploads/2010/11/search_1.png"alt="Search for Flights - 1"></p><p><imgsrc="/wp-content/uploads/2010/11/search_2.png"alt="Search for Flights - 2"></p><p><imgsrc="/wp-content/uploads/2010/11/search_3.png"alt="Search for Flights - 3"></p><h2class="ui-title"tabindex="0"role="heading"aria-level="1">Search Results Page</h2><p>My Search Results Page essentially will have a List of Flight Search Results and a Navigation back to the Search Page</p><h3class="ui-title"tabindex="0"role="heading"aria-level="1">Header – Search Results Page</h3><p>I want the Header Section to have “Back Navigation Button” to the Search Page. Also, the text on it should read “Search Results”</p><preclass="brush: html; auto-links: false;"><divdata-role="header"class="ui-bar-a ui-header"role="banner"><ahref="#"class="ui-btn-left ui-btn ui-btn-up-a ui-btn-icon-left ui-btn-corner-all ui-shadow"data-icon="arrow-l"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-icon ui-icon-arrow-l ui-icon-shadow"></span><spanclass="ui-btn-text">Back</span></span></a><h1class="ui-title"tabindex="0"role="heading"aria-level="1">Search Results</h1></div><!-- /header --></pre><h3class="ui-title"tabindex="0"role="heading"aria-level="1">Content – Search Results Page</h3><p>jQuery provides you quite a Good Number of List Types like – Basic List, Numbered List, Nested List etc. For our Tutorial, we’ll use a Simple “Inset” List with Multiple Lines</p><p>Here’s the code to be used in the “content” section of the Search Results Page. Note the “data-inset=true” property in the List, that introduces a simple margin around the List Element</p><preclass="brush: html; auto-links: false;"></pre><uldata-role="listview"data-theme="a"data-inset="true"data-dividertheme="c"data-counttheme="e"class="ui-listview ui-listview-inset ui-corner-all ui-controlgroup ui-controlgroup-vertical ui-shadow"role="listbox"><lirole="option"tabindex="0"class="ui-li ui-btn ui-btn-up-a ui-btn-icon-right ui-corner-top"data-theme="a"><divclass="ui-btn-inner ui-corner-top"><spanclass="ui-icon ui-icon-arrow-r"></span><divclass="ui-btn-text"><h3class="ui-li-heading"><ahref=""class="ui-link-inherit ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Paris (CDG) to Munich (MUC)</span></span></a></h3><h4class="ui-li-heading">150 EUR</h4><pclass="ui-li-desc">12:50 to 14:15 (1h25) Direct</p></div></div></li><lirole="option"tabindex="-1"class="ui-li ui-btn ui-btn-up-a ui-btn-icon-right"data-theme="a"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-arrow-r"></span><divclass="ui-btn-text"><h3class="ui-li-heading"><ahref=""class="ui-link-inherit ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Paris (CDG) to Munich (MUC)</span></span></a></h3><h4class="ui-li-heading">175 EUR</h4><pclass="ui-li-desc">15:00 to 16:15 (1h15) Direct</p></div></div></li><lirole="option"tabindex="-1"class="ui-li ui-btn ui-btn-up-a ui-btn-icon-right ui-corner-bottom ui-controlgroup-last"data-theme="a"><divclass="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><spanclass="ui-icon ui-icon-arrow-r"></span><divclass="ui-btn-text"><h3class="ui-li-heading"><ahref=""class="ui-link-inherit ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Paris (CDG) to Munich (MUC)</span></span></a></h3><h4class="ui-li-heading">225 EUR</h4><pclass="ui-li-desc">16:00 to 20:00 (4h) wait 2h Frankfurt, Germany</p></div></div></li></ul><p>Notice the nice way in which the multiple lines appear within the List Element</p><p>Finally, I need a link to go back to the Search Page. A Simple Anchor tag with a “data-role=button” will do the Job and jQuery will style it for me</p><preclass="brush: html; auto-links: false;"><ahref="index.php"data-role="button"rel="external"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Search Again</span></span></a></pre><p>The “rel=external” creates a Direct Link to the Page – otherwise, by default jQuery tries to make an AJAX call to the target, with the “loading” Spinner</p><h3class="ui-title"tabindex="0"role="heading"aria-level="1">Footer – Flight Search Page</h3><p>On the Footer, I just need the Copyright Text, Symbol and the logo. The following code does the trick for me</p><preclass="brush: html; auto-links: false;"><divdata-role="footer"class="ui-bar-a ui-footer"role="contentinfo"><h4class="ui-title"tabindex="0"role="heading"aria-level="1">Copyright © 2010</h4></div><!-- /footer --></pre><p>Here’s how the Finished page looks on an iPhone</p><p><imgsrc="/wp-content/uploads/2010/11/results_1.png"alt="Search Results - 1"></p><p><imgsrc="/wp-content/uploads/2010/11/results_2.png"alt="Search Results - 2"></p><h2class="ui-title"tabindex="0"role="heading"aria-level="1">Conclusion</h2><p>In this tutorial we had a very quick Overview of jQuery Mobile and how it helps Web Developers to create Nice Looking Mobile Pages with Little or No Javascript. For complete details on jQuery Mobile, Demos and Documentation – visit the Official jQuery Mobile Site here</p><p>You can also download the source of the example used here!</p><p><u>Photo Credit:</u> Team Traveller on Flickr</p></div><divclass="ad_banner_container"><scripttype="text/javascript"><!--google_ad_client = "ca-pub-2784402904419175";/* Post Footer Banners */google_ad_slot = "0875353251";google_ad_width = 468;google_ad_height = 60;//--></script></div><divid="social-box"><h5>If you link this entry, please share it</h5><spanclass="st_facebook_hcount"displaytext="Facebook"></span> <spanclass="st_twitter_hcount"displaytext="Tweet"></span> <spanclass="st_email_hcount"displaytext="Email"></span> <spanclass="st_plusone_hcount"displaytext="Google +1"></span> <spanclass="st_sharethis_hcount"displaytext="ShareThis"></span></div><divclass="one-half first"><h5>Related Content</h5><h3class="related_posts">Related posts:</h3><ulclass="related_posts"><li><ahref="/search-box-in-navigation-bar-of-the-thesis-theme/"rel="bookmark"title="Search Box in Navigation Bar of the Thesis Theme"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Search Box in Navigation Bar of the Thesis Theme</span></span></a></li><li><ahref="/starting-with-seo-3-anchor-text-and-images/"rel="bookmark"title="Starting with SEO #3 – Anchor text and Images"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Starting with SEO #3 – Anchor text and Images</span></span></a></li><li><ahref="/wp-membership-softwares/"rel="bookmark"title="Planning to spend $$ on WordPress Membership Software? Read this first"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Planning to spend $$ on WordPress Membership Software? Read this first</span></span></a></li><li><ahref="/control-home-page-post-excerpt-thesis-theme/"rel="bookmark"title="Control Home Page Post Excerpt Content in Thesis Theme"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Control Home Page Post Excerpt Content in Thesis Theme</span></span></a></li><li><ahref="/google-adsense-search-setup-5-minutes/"rel="bookmark"title="Setup Google AdSense for Search for your site in 5 minutes [Blogging]"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Setup Google AdSense for Search for your site in 5 minutes [Blogging]</span></span></a></li></ul></div><divclass="one-half"><h5>We Recommend</h5><imgsrc="http://tracking.hostgator.com/img/Shared_Blue/300x250-animated.gif"border="0"class="banner">Hostgator is our first choice when it comes to Reliable 24x7 Hosting, Affordable Cost, Awesome Support and Great Quality. Click here to explore and get your Own Hosting now!></div><divclass="post-meta"><spanclass="categories">Filed Under: <ahref="/category/best/"title="View all posts in Best"rel="category tag"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Best</span></span></a>, <ahref="/category/mobile/mobile-web/jquery-mobile/"title="View all posts in jQuery Mobile"rel="category tag"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">jQuery Mobile</span></span></a>, <ahref="/category/mobile/mobile-web/"title="View all posts in Mobile Web"rel="category tag"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Mobile Web</span></span></a></span></div></pre></li></div><divid="comments"><h3>Comments</h3><olclass="comment-list"><liclass="comment even thread-even depth-1"id="comment-2206"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/cf70f88f0fd2b78303fe67ac9fb86aca?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">amine</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-2206"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">December 8, 2010 at 6:42 pm</span></span></a></div><divclass="comment-content"><p>Hi<br>Thanks for this good tutorial,<br>can you give me you sample pages ?</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=2206#respond"onclick="return addComment.moveForm("comment-2206", "2206", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div><ulclass="children"><liclass="comment byuser comment-author-ashwin bypostauthor odd alt depth-2"id="comment-2338"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/11873749f10a1c731b967e84d526ae63?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Ashwin</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-2338"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">December 12, 2010 at 9:24 pm</span></span></a></div><divclass="comment-content"><p>I have sent you in the mail. Thanks…</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=2338#respond"onclick="return addComment.moveForm("comment-2338", "2338", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div><ulclass="children"><liclass="comment even depth-3"id="comment-7955"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/43dfe4f3c133ca3d8880894d46cf7d9a?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">michel</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-7955"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">May 28, 2011 at 4:18 pm</span></span></a></div><divclass="comment-content"><p>Hi, can you sender de sample pages for me too ?</p><p><ahref="/intro-to-jquery-mobile/"rel="nofollow"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">https://thoughtsunlimited.net/intro-to-jquery-mobile/</span></span></a></p><p>Many thanks,</p><p>michel</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=7955#respond"onclick="return addComment.moveForm("comment-7955", "7955", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li></ul></li></ul></li><liclass="comment odd alt thread-odd thread-alt depth-1"id="comment-2925"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/fcd5086d070cf9f4b66c095fae0cf1fd?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Savin</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-2925"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">January 3, 2011 at 1:08 pm</span></span></a></div><divclass="comment-content"><p>Hi,</p><p>Could you please send me the sample pages…</p><p>Also I do have developed a jquery cube image which is working fine in desktop,</p><p>I need to make the same thing work in Android and Symbian OS</p><p>Kindly share your idea on that..</p><p>Thank you so much</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=2925#respond"onclick="return addComment.moveForm("comment-2925", "2925", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment even thread-even depth-1"id="comment-5707"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/e9c72c17ed5716b71d216736ad578ff9?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">gowtham</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-5707"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">March 21, 2011 at 3:59 pm</span></span></a></div><divclass="comment-content"><p>Hi</p><p>Good Tutorial . Can you Please send me those sample pages .</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=5707#respond"onclick="return addComment.moveForm("comment-5707", "5707", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment odd alt thread-odd thread-alt depth-1"id="comment-5718"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/a9e196a9f90e607f8e2c1c7bf2647246?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Nithya</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-5718"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">March 21, 2011 at 6:43 pm</span></span></a></div><divclass="comment-content"><p>Hi all.</p><p>I am new to jquery mobile.i have found your post interesting could some one help with this,</p><p>i have a page with id=”createpagediv”</p><p>i have to provide action to the page</p><p>$( ‘createpagediv’ ).live(‘pageshow’, function(event){<br>alert(“page show event executed…”)</p><p>//DO SOMETHING<br>}<br>});</p><p>it is not working.where i am wrong?.please help.</p><p>Regards,<br>Nithya.</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=5718#respond"onclick="return addComment.moveForm("comment-5718", "5718", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment even thread-even depth-1"id="comment-7391"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/e9e1b81829554aea95e3d889c0d27553?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">aruna</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-7391"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">May 5, 2011 at 2:20 pm</span></span></a></div><divclass="comment-content"><p>Hi<br>Thanks for the good tutorial. I like to explore new thing in this so can u please send some sample work….?</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=7391#respond"onclick="return addComment.moveForm("comment-7391", "7391", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment odd alt thread-odd thread-alt depth-1"id="comment-7884"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/c700161819f065c5f53a568afc5c9816?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Maic Miller</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-7884"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">May 25, 2011 at 8:29 pm</span></span></a></div><divclass="comment-content"><p>Hi!</p><p>I wonder, how is the project structure. It used a Framework?</p><p>Could you please send me an email structure already ready for me to get an idea of how I organize and arrange the files.</p><p>I’m starting now in this world of Mobile. <imgsrc="/wp-includes/images/smilies/icon_smile.gif"alt=":)"class="wp-smiley"></p><p>Thanks!</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=7884#respond"onclick="return addComment.moveForm("comment-7884", "7884", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment even thread-even depth-1"id="comment-8693"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/f1bf1c7c0b0d30fb7a9b737ab5b4cad0?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Stephne</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-8693"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">June 28, 2011 at 5:57 pm</span></span></a></div><divclass="comment-content"><p>> i have a page with id=”createpagediv”<br>> i have to provide action to the page<br>> $( ‘createpagediv’ ).live(‘pageshow’,<br>>it is not working.where i am wrong?.please help.</p><p>rookie mistake, bad selector<br>$( #‘createpagediv’ ).live(‘pageshow’,</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=8693#respond"onclick="return addComment.moveForm("comment-8693", "8693", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment odd alt thread-odd thread-alt depth-1"id="comment-8913"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/cf4a81eb9a0c1af8314092fce2a0d3a4?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Ismail</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-8913"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">July 6, 2011 at 5:49 pm</span></span></a></div><divclass="comment-content"><p>Dear Ashwin,<br>Is it possible for you to send me the source code?</p><p>Best regards,<br>Ismail</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=8913#respond"onclick="return addComment.moveForm("comment-8913", "8913", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment even thread-even depth-1"id="comment-8941"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/2d7cfa8a9bd228ad0894d9e4607e8974?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">junmeiZhou</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-8941"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">July 8, 2011 at 7:41 am</span></span></a></div><divclass="comment-content"><p>hi,I am new to jquery mobile, this is a good example,could you send me sample source by Email??<br>Thanks very much!!</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=8941#respond"onclick="return addComment.moveForm("comment-8941", "8941", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment odd alt thread-odd thread-alt depth-1"id="comment-10464"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/d464d5cbf5d82093dc91d7da80aca62b?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">suzane</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-10464"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">September 7, 2011 at 2:41 pm</span></span></a></div><divclass="comment-content"><p>THANKS for the tutorial..it helps me a lot..</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=10464#respond"onclick="return addComment.moveForm("comment-10464", "10464", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment even thread-even depth-1"id="comment-10547"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/fe96ebe89fc2890f733d800d19ddaad9?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">John</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-10547"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">September 12, 2011 at 10:04 pm</span></span></a></div><divclass="comment-content"><p>Awesome article on this very new and strongly upcoming framework. I will borrow the same for my class assignment. <imgsrc="/wp-includes/images/smilies/icon_smile.gif"alt=":)"class="wp-smiley"></p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=10547#respond"onclick="return addComment.moveForm("comment-10547", "10547", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment odd alt thread-odd thread-alt depth-1"id="comment-10556"><divclass="comment-author vcard"><imgalt=""src="http://0.gravatar.com/avatar/ee5cc3919bd23e4b87ca045d6ab95475?d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Prashesh</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-10556"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">September 13, 2011 at 11:04 am</span></span></a></div><divclass="comment-content"><p>Hi Ashwin,</p><p>Good tutorial.<br>I have already developed one site using jquery mobile but I have one problem. I am using jquery mobile slider into my page but I don’t know how to get changed value of slider. Also don’t know how to set default value of slider from database when page load.<br>If you have any idea please help me.<br>Thanks in advance.</p><p>Prashesh</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=10556#respond"onclick="return addComment.moveForm("comment-10556", "10556", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment even thread-even depth-1"id="comment-12022"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/bb27268a386c0e8fcf7e6b76204b992b?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">jk</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-12022"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">November 10, 2011 at 4:11 pm</span></span></a></div><divclass="comment-content"><p>Hi,</p><p>I am newbie, but like to learn from samples. Please send the sample source code if possible and it is more helpful to follow your article and do my own development.</p><p>Thanks</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=12022#respond"onclick="return addComment.moveForm("comment-12022", "12022", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li><liclass="comment odd alt thread-odd thread-alt depth-1"id="comment-12476"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/986706df184fc7f5212134eaecd1f7e3?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Willem</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-12476"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">November 21, 2011 at 5:42 am</span></span></a></div><divclass="comment-content"><p>hi Ashwin,</p><p>I was writing a blog today (http://www.i-am.ws/entry/jquery_mobile_on_android) about embedding a jQuery Mobile app in an Android app. And I needed a simple jQM app to demo it. That’s how I stumbled on your flight reservation app. Which didn’t contain a link to your code, but I saw you posted it to others by email.</p><p>I settled for some other sample code, an ice cream order form <imgsrc="/wp-includes/images/smilies/icon_smile.gif"alt=":-)"class="wp-smiley"> , but I’m still intreaged by your app. Therefore the usual request, could you email me a copy of your code. There is always something more to learn.</p><p>Willem</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=12476#respond"onclick="return addComment.moveForm("comment-12476", "12476", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div><ulclass="children"><liclass="comment byuser comment-author-ashwin bypostauthor even depth-2"id="comment-12790"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/11873749f10a1c731b967e84d526ae63?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Ashwin</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-12790"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">November 27, 2011 at 9:53 pm</span></span></a></div><divclass="comment-content"><p>Hello,</p><p>You can grab the source here – https://thoughtsunlimited.net/share/jquerytut</p><p>Thanks,<br>Ashwin</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=12790#respond"onclick="return addComment.moveForm("comment-12790", "12790", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li></ul></li><liclass="comment odd alt thread-even depth-1"id="comment-12616"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/56f764a267e820234690ae86bb235d26?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">neggae</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-12616"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">November 24, 2011 at 4:40 am</span></span></a></div><divclass="comment-content"><p>I have a mobile site and I need to include flight searching script and I like your tutorial, I appreciate if you could please send me the sample source code?</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=12616#respond"onclick="return addComment.moveForm("comment-12616", "12616", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div><ulclass="children"><liclass="comment byuser comment-author-ashwin bypostauthor even depth-2"id="comment-12789"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/11873749f10a1c731b967e84d526ae63?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Ashwin</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-12789"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">November 27, 2011 at 9:53 pm</span></span></a></div><divclass="comment-content"><p>Hello,</p><p>You can grab the source here – https://thoughtsunlimited.net/share/jquerytut</p><p>Thanks,<br>Ashwin</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=12789#respond"onclick="return addComment.moveForm("comment-12789", "12789", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li></ul></li><liclass="comment odd alt thread-odd thread-alt depth-1"id="comment-14344"><divclass="comment-author vcard"><imgalt=""src="http://1.gravatar.com/avatar/b94cbe51a07eadf82696d7a6e1d01ac0?d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G"class="avatar avatar-48 photo"height="48"width="48"> <citeclass="fn">Jigar</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-14344"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">March 3, 2012 at 12:32 pm</span></span></a></div><divclass="comment-content"><p>Hey Ashwin,</p><p>I tried multiline stuff using your above tip and stuck <imgsrc="/wp-includes/images/smilies/icon_sad.gif"alt=":("class="wp-smiley"> , Can you please check my question on stackoverflow and help me to resolve.</p><p>Thanks,<br>Jigar</p><p>http://stackoverflow.com/questions/9544165/list-with-multiple-lines-with-multiple-level</p></div><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=14344#respond"onclick="return addComment.moveForm("comment-14344", "14344", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></li></ol><divclass="navigation"><divclass="alignleft"></div><divclass="alignright"></div></div></div><divid="pings"><h3>Trackbacks</h3><olclass="ping-list"><liclass="pingback even thread-even depth-1"id="comment-6027"><divid="div-comment-6027"class="comment-body"><divclass="comment-author vcard"><citeclass="fn">jQuery Mobile tutorials « turtle9</cite> <spanclass="says">says:</span></div><divclass="comment-meta commentmetadata"><ahref="/intro-to-jquery-mobile/#comment-6027"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">March 27, 2011 at 2:18 pm</span></span></a></div><p>[...] An Introduction to jQuery Mobile [...]</p><divclass="reply"><aclass="comment-reply-link ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"href="/intro-to-jquery-mobile/?replytocom=6027#respond"onclick="return addComment.moveForm("div-comment-6027", "6027", "respond", "2759")"data-theme="a"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Reply</span></span></a></div></div></li></ol></div><divid="respond"><h3id="reply-title">Leave a Reply to <ahref="#comment-12790"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Ashwin</span></span></a> <small><arel="nofollow"id="cancel-comment-reply-link"href="/intro-to-jquery-mobile/#respond"data-theme="a"class="ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Cancel reply</span></span></a></small></h3><formaction="https://thoughtsunlimited.net/wp-comments-post.php"method="post"id="commentform"name="commentform"><pclass="comment-form-author"><inputid="author"name="author"type="text"value=""size="30"tabindex="1"aria-required="true"class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"><labelfor="author"class="ui-input-text">Name</label> <spanclass="required">*</span></p><pclass="comment-form-email"><inputid="email"name="email"type="text"value=""size="30"tabindex="2"aria-required="true"class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"><labelfor="email"class="ui-input-text">Email</label> <spanclass="required">*</span></p><pclass="comment-form-url"><inputid="url"name="url"type="text"value=""size="30"tabindex="3"class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"><labelfor="url"class="ui-input-text">Website</label></p><pclass="comment-form-comment"><textareaid="comment"name="comment"cols="45"rows="8"tabindex="4"aria-required="true"class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"></textarea></p><pclass="form-submit"><ahref="#"role="button"data-theme="c"class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-btn-text">Post Comment</span></span></a><inputname="submit"type="submit"id="submit"value="Post Comment"class="ui-btn-hidden"tabindex="-1"> <inputtype="hidden"name="comment_post_ID"value="2759"id="comment_post_ID"class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"> <inputtype="hidden"name="comment_parent"id="comment_parent"value="12790"class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"></p><pstyle="display: none;"><inputtype="hidden"id="akismet_comment_nonce"name="akismet_comment_nonce"value="0703e9e9f0"class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"></p><pstyle="clear: both;"class="subscribe-to-comments"><divclass="ui-checkbox"><inputtype="checkbox"name="subscribe"id="subscribe"value="subscribe"style="width: auto;"><labelfor="subscribe"data-theme="c"class="ui-btn ui-btn-up-c ui-btn-icon-left ui-btn-corner-all"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-icon ui-icon-ui-icon-checkbox-off ui-icon-checkbox-off"></span><spanclass="ui-btn-text">Notify me of followup comments via e-mail</span></span></label></div> </p></form></div></pre></li></div><divid="sidebar"class="sidebar widget-area"><divid="text-8"class="widget widget_text"><divclass="widget-wrap"><h4class="widgettitle">About</h4><divclass="textwidget"><em>TU is focused on helping Web and Mobile Application Developers to Learn, Improve and Excel in Creating Awesome Applications that are Great to Use.</em> <ahref="/about"class="ui-link">Read more about TU</a><br><br><ahref="/explore"class="button medium green ui-link">Explore TU</a><br><ahref="/advertise"class="button medium orange ui-link">Advertise</a></div></div></div><divid="wppp-5"class="widget widget_wppp"><divclass="widget-wrap"><h4class="widgettitle">Top Posts</h4><ulclass="wppp_list"><li><ahref="/intro-to-jquery-mobile/"title="An Introduction to jQuery Mobile"class="ui-link">An Introduction to jQuery Mobile</a></li><li><ahref="/create-web-questionnaire-google-forms/"title="How to create a Web Questionnaire Form in 5 minutes?"class="ui-link">How to create a Web Questionnaire Form in 5 minutes?</a></li><li><ahref="/full-height-sidebar-thesis-theme/"title="Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme"class="ui-link">Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme</a></li><li><ahref="/html5-and-css3-resources/"title="Looking to learn HTML5 and CSS3 ?"class="ui-link">Looking to learn HTML5 and CSS3 ?</a></li></ul></div></div><divid="archives-3"class="widget widget_archive"><divclass="widget-wrap"><h4class="widgettitle">Blog Archives</h4><divclass="ui-select"><ahref="#"role="button"title="select menu"id="-button"aria-haspopup="true"aria-owns="-menu"data-theme="c"class="ui-btn ui-btn-up-c ui-btn-icon-right ui-btn-corner-all ui-shadow"><spanclass="ui-btn-inner ui-btn-corner-all"><spanclass="ui-icon ui-icon-arrow-d ui-icon-shadow"></span><spanclass="ui-btn-text">Select Month</span></span></a><selectname="archive-dropdown"onchange="document.location.href=this.options[this.selectedIndex].value;"tabindex="-1"><optionvalue="">Select Month</option><optionvalue="https://thoughtsunlimited.net/2012/03/">March 2012 (5)</option><optionvalue="https://thoughtsunlimited.net/2012/02/">February 2012 (2)</option><optionvalue="https://thoughtsunlimited.net/2012/01/">January 2012 (3)</option><optionvalue="https://thoughtsunlimited.net/2011/12/">December 2011 (2)</option><optionvalue="https://thoughtsunlimited.net/2011/11/">November 2011 (2)</option><optionvalue="https://thoughtsunlimited.net/2011/10/">October 2011 (2)</option><optionvalue="https://thoughtsunlimited.net/2011/09/">September 2011 (1)</option><optionvalue="https://thoughtsunlimited.net/2011/08/">August 2011 (4)</option><optionvalue="https://thoughtsunlimited.net/2011/07/">July 2011 (1)</option><optionvalue="https://thoughtsunlimited.net/2011/04/">April 2011 (1)</option><optionvalue="https://thoughtsunlimited.net/2011/03/">March 2011 (1)</option><optionvalue="https://thoughtsunlimited.net/2011/02/">February 2011 (1)</option><optionvalue="https://thoughtsunlimited.net/2011/01/">January 2011 (3)</option><optionvalue="https://thoughtsunlimited.net/2010/12/">December 2010 (1)</option><optionvalue="https://thoughtsunlimited.net/2010/11/">November 2010 (3)</option><optionvalue="https://thoughtsunlimited.net/2010/10/">October 2010 (5)</option><optionvalue="https://thoughtsunlimited.net/2010/09/">September 2010 (5)</option><optionvalue="https://thoughtsunlimited.net/2010/08/">August 2010 (4)</option><optionvalue="https://thoughtsunlimited.net/2010/07/">July 2010 (1)</option><optionvalue="https://thoughtsunlimited.net/2010/06/">June 2010 (2)</option><optionvalue="https://thoughtsunlimited.net/2010/05/">May 2010 (3)</option><optionvalue="https://thoughtsunlimited.net/2010/03/">March 2010 (3)</option><optionvalue="https://thoughtsunlimited.net/2010/02/">February 2010 (2)</option><optionvalue="https://thoughtsunlimited.net/2010/01/">January 2010 (4)</option><optionvalue="https://thoughtsunlimited.net/2009/12/">December 2009 (2)</option><optionvalue="https://thoughtsunlimited.net/2009/11/">November 2009 (1)</option><optionvalue="https://thoughtsunlimited.net/2009/10/">October 2009 (6)</option><optionvalue="https://thoughtsunlimited.net/2009/09/">September 2009 (11)</option><optionvalue="https://thoughtsunlimited.net/2009/08/">August 2009 (11)</option><optionvalue="https://thoughtsunlimited.net/2009/07/">July 2009 (4)</option><optionvalue="https://thoughtsunlimited.net/2009/06/">June 2009 (1)</option><optionvalue="https://thoughtsunlimited.net/2009/03/">March 2009 (3)</option><optionvalue="https://thoughtsunlimited.net/2009/02/">February 2009 (4)</option><optionvalue="https://thoughtsunlimited.net/2009/01/">January 2009 (3)</option><optionvalue="https://thoughtsunlimited.net/2008/12/">December 2008 (7)</option><optionvalue="https://thoughtsunlimited.net/2008/11/">November 2008 (3)</option></select></div></div></div><divid="text-21"class="widget widget_text"><divclass="widget-wrap"><divclass="textwidget"><imgsrc="/wp-content/uploads/2012/03/genesis_250250.jpg"alt="Genesis Theme"> <spanclass="side_ad">Looking for a SEO Rich Customizable Theme for your Wordpress Site? Head here...</span></div></div></div><divclass="widget widget_text"><divclass="widget-wrap"><h4class="widgettitle">Secondary Sidebar Widget Area</h4><divclass="textwidget"><p>This is the Secondary Sidebar Widget Area. You can add content to this area by visiting your Widgets Panel and adding new widgets to this area.</p></div></div></div></div></pre></li><divclass="ui-listbox-screen ui-overlay ui-screen-hidden fade"></div><divclass="ui-listbox ui-listbox-hidden ui-body-a ui-overlay-shadow ui-corner-all pop"><ulclass="ui-listbox-list ui-listview"id="select-choice-1-menu"role="listbox"aria-labelledby="select-choice-1-button"><liclass="ui-btn-active ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="0"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="true"role="option"href="#"class="ui-link-inherit">Economy</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">Business</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">First</a></div></div></li></ul></div><divclass="ui-listbox-screen ui-overlay ui-screen-hidden fade"></div><divclass="ui-listbox ui-listbox-hidden ui-body-a ui-overlay-shadow ui-corner-all pop"><ulclass="ui-listbox-list ui-listview"id="-menu"role="listbox"aria-labelledby="-button"><liclass="ui-btn-active ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="0"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="true"role="option"href="#"class="ui-link-inherit">Select Month</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">March 2012 (5)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">February 2012 (2)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">January 2012 (3)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">December 2011 (2)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">November 2011 (2)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">October 2011 (2)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">September 2011 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">August 2011 (4)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">July 2011 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">April 2011 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">March 2011 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">February 2011 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">January 2011 (3)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">December 2010 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">November 2010 (3)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">October 2010 (5)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">September 2010 (5)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">August 2010 (4)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">July 2010 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">June 2010 (2)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">May 2010 (3)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">March 2010 (3)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">February 2010 (2)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">January 2010 (4)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">December 2009 (2)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">November 2009 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">October 2009 (6)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">September 2009 (11)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">August 2009 (11)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">July 2009 (4)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">June 2009 (1)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">March 2009 (3)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">February 2009 (4)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">January 2009 (3)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">December 2008 (7)</a></div></div></li><liclass="ui-li ui-btn ui-btn-up-c ui-btn-icon-right"data-icon="checkbox-on"role="option"tabindex="-1"data-theme="c"><divclass="ui-btn-inner"><spanclass="ui-icon ui-icon-checkbox-on"></span><divclass="ui-btn-text"><aaria-selected="false"role="option"href="#"class="ui-link-inherit">November 2008 (3)</a></div></div></li></ul></div></div>
Comments