Thoughts Unlimited – Helping Web and Mobile Developers to Create Awesome Applications

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








jQuery Flight Search















Page Header

 



Content






Footer

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:


                    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
                  
                  
                    
                    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”
                  
                  
                    
                    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”
                  
                  
                    
                    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”
                  
                
                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
                For our Tutorial
                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) – index.php and results.php
                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
                Let us Copy the HTML Boilerplate code on each of these files – except the
                
                is “jQuery Flight Search” for the first and “jQuery Search Results” for the next
                Flight Search Page
                Let’s decide and plug in content for each of the Content Section of the Flight Search Page – the Header, Content and Footer
                Header – Flight Search Page
                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.
                Also, I want “Search for Flights” appear on my Header Section. And here is the HTML Code for that…
                

Search for Flights

 

                And, this is how it looks on an iPhone
                
                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
                Content – Flight Search Page
                I want the Content Section of the Search Page to contain the following elements, in the exact order specified:
                
                  Text Entry Fields for From Location & To Location
                  Text Entry Field for Departure Date (Date Picker coming soon…)
                  Conditional Text Entry Field for Return Date, toggled On/Off with a Switch Button
                  Slider Element to Choose Number of Travellers
                  Select List to Choose the Class of Journey
                  A Submit Button
                
                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
                Here is how I introduce the Text Entry Fields for From & To Locations
                





From







To





....



                Each Form Element must have the “data-role=fieldcontain” and jQuery Framework takes care of the rest.
                The Same way I introduce the Text Entry fields for Departure and Return Dates. The Date Picker is coming soon in the next release…
                


Start Date











One Way



Return







Return Date





                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 id=”return” to the Return Date field, which we will use)
                Next I will introduce a Slider Element to select the Number of Travellers and the upper limit will be “10″
                


Travellers





                Note the min and max attributes of the Slider Elements, that makes things very simple for the Web Developer.
                Next I will add a Select List to choose the Class of Travel
                


Flight Class





                For illustration purposes, I use 3 Class types – Economy, Business and First
                Finally, I will add a Submit button. Submit Button doesn’t need any wrapper around it and automatically processed by jQuery
                


                I will use a small piece of jQuery Code, to Show/Hide Return Date field on using the Toggle Switch
                Add this jQuery Script to the Top of the HTML Page, within the  section, to Hide the Return Date on Page load
                


                Add this jQuery Script to the Bottom of the HTML Page, before the  section ends, to Show/Hide the Return Date when Toggle Switch is used
                


                Footer – Flight Search Page
                On the Footer, I just need the Copyright Text, Symbol and the logo. The following code does the trick for me
                


Copyright © 2010

 

                Here’s how the Finished page looks on an iPhone
                
                
                
                Search Results Page
                My Search Results Page essentially will have a List of Flight Search Results and a Navigation back to the Search Page
                Header – Search Results Page
                I want the Header Section to have “Back Navigation Button” to the Search Page. Also, the text on it should read “Search Results”
                


Search Results

 

                Content – Search Results Page
                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
                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
                




Paris (CDG) to Munich (MUC)
150 EUR
12:50 to 14:15 (1h25) Direct



Paris (CDG) to Munich (MUC)
175 EUR
15:00 to 16:15 (1h15) Direct



Paris (CDG) to Munich (MUC)
225 EUR
16:00 to 20:00 (4h) wait 2h Frankfurt, Germany




                Notice the nice way in which the multiple lines appear within the List Element
                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
                
Search Again

                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
                Footer – Flight Search Page
                On the Footer, I just need the Copyright Text, Symbol and the logo. The following code does the trick for me
                


Copyright © 2010

 

                Here’s how the Finished page looks on an iPhone
                
                
                Conclusion
                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
                You can also download the source of the example used here!
              
              
                Filed Under: jQuery Mobile, Mobile Web
              
            


          


          
            
              → November 21, 2010

              → By Ashwin

              → Leave a Comment
            
            
              Weekend Wrapup: Interesting Reads for the Weekend 11/21
              
                Here is a wrap up of all interesting reads I had during the week ending 11/20.
                I am gathering all of them in a single place, for you to Read and Enjoy them during the Weekend!  Happy Reading!
                Tech and Mobile
                Irrationality, Welcome Back to Silicon Valley http://wp.me/p10LZV-15nJ
                Boxcar 4.0 Pushes iPhone Notifications To The Next Level http://tcrn.ch/btTRwy
                Is the new MacBook Air eating into iPad sales? http://t.co/L92EYEY
                Sencha Launches Touch 1.0 with A New Price-Point: Free http://t.co/3cGzHuS
                Wozniak: Android Will Dominate iOS http://bit.ly/cCvbIr
                HTML5 vs Native Apps http://t.co/Go0u1yG
                Why Samsung’s Bada Could Win Big http://t.co/Ww45fDn
                Google Engineer Wants You to Hack Microsoft’s Kinect http://t.co/a7XJcLa
                How to Install Android on an iPhone in Six Easy Steps http://t.co/4mxwW7v
                Internet and Social Media
                New Twitter Now Showing Full Conversations In The Side Pane http://t.co/FNwCzTY
                The Truth About Getting Rich Quick http://bit.ly/9A9Is4
                Meet The New New Facebook http://t.co/ntlBjfP
                The Social Media Method for Diabetes Care http://t.co/OGSeCWZ
                Social & Others
                See how 10 social investors from across the world are helping Reena in her business http://goo.gl/8vDBk Discover social investing on Rang De
                The Future of Indian Technology http://t.co/1e79Mhp
                GiveIndia Blog – Confessions of a donor http://bit.ly/auECtw
                Gaon Ki Awaaz: News in your Hands http://goo.gl/fb/ch3Fu
                How Defining Your Ideal Project Can Improve Your Freelancing Business http://bit.ly/9JMIzB
              
              
                Filed Under: Weekend Wrapup
              
            
          
          
            
              → November 20, 2010

              → By Ashwin

              → Leave a Comment
            
            
              I’m Back to Thoughts Unlimited!
              
                If you have been following my Blog recently, you must have noticed that I switched the Brand to – Big Sales Coach.  I was on an experimentation mode, trying out a different niche.
                But here I am – Back to Thoughts Unlimited (my older brand) and my Older Niche. I will discuss in a dedicated post, on the reasons for the switch and the urge to “switch back”.
                Here is a brief on the Topic of Posts, you will find going forward on Thoughts Unlimited:
                
                  Unlimited Thoughts and Viewpoints on Modern Internet, Social Media, Mobile Technologies, Blogging and the related stuff.
                
                Essentially, you can expect posts around:
                
                  Views on Modern Internet
                  Social Media (Twitter, Facebook, Blogging) and How can you use them effectively
                  News and Strategies on Mobile Technologies
                  Tips on WordPress, Thesis Theme…
                  Blogging Strategies and Ideas (occasionally)
                  And the like…
                
                Will be catching up with you regularly, from here on… Have a great weekend!
              
              
                Filed Under: TU Updates
              
            
          
          
            
              → October 31, 2010

              → By Ashwin

              → 3 Comments
            
            
              Blog Achievers : Pradeep of HellBoundBloggers
              
                Here I am with another edition of the Blog Achievers Series!  I am happy to interview Pradeep of HellBoundBloggers.com, who is in College pursuing his Degree and running a Highly Successful Blog.  In addition, he also runs a WordPress Freelancing Business and I am sure his Blog has helped him make a Good Money!
                He is definitely an inspiration to all those budding Bloggers out there, who are looking to Start and Blog in a Big Way.  I enjoyed Interviewing him and I hope you find it interesting to know about his Journey so far!
                The Interview
                Ashwin: Hello Pradeep! Nice to have you here at BigSalesCoach. Can you Introduce yourself and your Blog to our readers?
                Pradeep: I am S.Pradeep Kumar, Founder and CEO of HellBound Bloggers (HBB). Am a part time blogger, freelancer, consultant, typical engineering student and a recent Open Source Addict.
                HBB is about Technology, Blogging, Product/Website Reviews, Social Media and Tutorials. Almost covers all the major technical topics on the web.
                Ashwin: What are 3 Key Techniques you use to attract Quality Traffic to your Blog?
                Pradeep: Unfortunately I learned how to treat my blog properly only after 5-6 months after launching my blog. The techniques am using till now are :
                1. Commenting : Normally branded comments on branded blogs/websites brings good no. of visitors. I tried this trick, and worked fantastic.
                2. Guest Articles : Backlinks + Targeted Traffic. What else you can expect? 
                3. Social Media : Even for Social Media, I came to know the power of it after several months. Facebook and Twitter are the top referral sites for me.
                Ashwin: That’s great to know. Can you Share when and how did Your Blog Start Making Money?

                Pradeep: Since I didn’t know the fact that I can earn some hard bucks through my blog, I didn’t care about it. But all of a sudden, I got an Email from a lady, requesting me to do a sponsored review.
                That was the beginning, I even have that Email safe with me.. 
                And after that I monetized my blog with some direct ads, Adsense, TechnoratiMedia and others.
                Ashwin: What are the Additional Channels or Prospects that Your Blog opened up for You?
                Pradeep: I started HBB at the age of 17 I believe and I had no intention, no aim, nothing on my mind. Just wanted to share something I know, and it later developed into a web community.
                Ashwin: What are your 3 Tips to anyone Starting with Professional Blogging and looking to Make Money?
                Pradeep: #1 – Forget the money factor – Just blog and do your best, and then money flows.
                #2 – Choose the right niche – Think twice and decide which platform you are talented in.
                #3 – Encourage others to blog – Maybe your school or college mates.
                Ashwin: Great! Thanks Pradeep for all your time and I am sure our Readers will benefit from your Blogging Tips and Experience
                Hey Reader, I am sure you must have enjoyed this Interview. Young Bloggers achieving a Lot, is a Great Motivation for all of us and we should learn some good lessons from these Blog Achievers! Signing off, until I see you in another Edition of the Blog Achievers!
              
              
                Filed Under: Blog Achievers, Post Series
              
            
          
          
            
              → October 25, 2010

              → By Ashwin

              → Leave a Comment
            
            
              Mastermind Sessions – Worth your Money!
              
                Dave Navarro has done a really great job in his recently launched – More Buyers Mastermind 2010 Course – that includes 14 Incredible “virtual mastermind” sessions, from 14 Incredible Entrepreneurs.
                By Signing up for this course – you’ll receive 2 Strategy Sessions every week – later followed by Action Plans.  If you are an Internet Seller and looking to Grow and Excel in your Online Business, this is a “must signup”!
                So far, 4 Strategy Sessions are up and available – they are awesome and value for Money (already!).
                You can no longer lock-in the Introductory Price – but still the Sessions are worth the Full Price of the Course.
                Click here to Know more and Sign up! (Non-affiliate link, I am recommending because I found it useful and will surely help you Sell more)
              
              
                Filed Under: Promotions & Reviews
              
            
          
          
            
              → October 21, 2010

              → By Ashwin

              → Leave a Comment
            
            
              Beware of these 3 Sales Paralysis!
              
                Do you know that among 100% of the Prospective Internet Marketers, who dream and plan about a Product, just less than 10% Manage to get their First Product out?  This has absolutely nothing to do with their Capabilities or Skills in Building the Product and getting it out.  They are stung by these “3 Sales Paralysis”!
                So what are these “3 Sales Paralysis”, that keeps more than 90% of Internet Marketers in coming out with a Product!
                #1: The “Awesomeness” Paralysis
                Awesome Products Sell.  There is no doubt about that, with anyone among us.  But it’s absolute NOT True, that “Only” Awesome Products Sell.
                Your Product is NOT measured by:
                
                  How Awesome it is?
                
                But, it is measured by:
                
                  The Usefulness.  The Value it adds to the Customer.  The Reliability.  The Stability and so on.
                
                So you get this right?  Awesomeness is “awesome”.  But you don’t have to be Awesome to get your First Product out.
                Get out of the “Awesomeness” Paralysis and start ticking off the Other Values your Product provide.
                #2: The “Comparison” Paralysis
                Whatever Market you are in, it is not the same anymore, as it was a Few Years ago.  There are many people creating Similar Products, almost every day and there is so much Competition out there.
                It is natural to Compare your Products to that of the Competitors.  But don’t let this “take you down”.
                For example, you come up with an Idea and Start Building your Product.  When you are half way through, an “unknown competitor” shelves out a Similar Product that attracts instant Buyers (at least you see the traction!).  It is possible, that you Start Comparing the Product with yours, try to get in Similar Features and sometimes, Start losing Motivation.
                Never let this happen to you.
                
                  Use this Comparison in a Positive Way – to Polish and Fine Tune your Product.
                
                Focus on your Product.  Use the Comparison to Fine Tune your Product.  But never let the “Comparison” Paralysis take you down!
                #3: The “Analysis” Paralysis
                I have this as the last one.  But in fact, this is the most Common Paralysis among the 90% of the “No Starters”.
                You get an Idea.  You Analyze the Market.  You Analyze the Feasibility.  You Analyze the Customers.  Meanwhile, you get another “killer” Idea.  And the whole process starts again!
                Does it sound like you?  Then you are a victim of the “Analysis” Paralysis!
                Analysis is Essential.  But it should not happen for “ever”.  Analyze a few essential factors and then get on with the Next Steps.
                If you are out of “Analysis” Paralysis, then chances are about 50% High that you will get the Product Out!
                A Recap
                Here are 3 Sales Paralysis that keep more than 90% of Prospective Internet Marketers (yes) out of the Market:
                
                  The “Awesomeness” Paralysis
                  The “Comparison” Paralysis
                  The “Analysis” Paralysis
                
                Make sure not to be paralyzed by any of these!
                What I want you to do?
                
                  Write just “One” thing that Prevents you from Creating your First Product – as a comment to this post
                  Also, write “One” more thing that can help you overcome the Hurdle and create your First Product – in your comment
                
                An Example comment could be, I lack the Skills to Create this Product and an Online Training can solve my Problem
                Looking forward to knowing about it and how I can help you!
                Photo Credit: chego101
              
              
                Filed Under: First Product, Sell Stuff
              
            
          
          
            
              « Older Posts
            
            
              Newer Posts »
            
          
        


        
          
            
              Free Updates
              
                
                  For me to send the New Posts & Updates to your Email Address. I Promise not to Reveal or Misuse it!

                  
                    Enter your email address:

                    

                    Powered by TinyLetter
                  
                
              
            
          
          
            
              The Blog
              
                TU is a site focused on helping Web and Mobile Developers to Learn, Improve and Excel in Creating Awesome Applications that are Great to Use. Read more about the Blog
              
            
          
          
            
              
                
              
            
          
          
            
              The Author
              
                
                I am Ashwin, the owner of this Blog and an ardent Web Application Developer. I have recently ventured into Mobile Web Apps and HTML5, with also interests on Native iPhone and Android Apps.
Read more about Me and the Blog
              
            
          
          
            
              The Best Posts
              
                An Introduction to jQuery Mobile
                Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme
                How to create a Web Questionnaire Form in 5 minutes?
                Looking to learn HTML5 and CSS3 ?
                2 More Yahoo! Services see the End of Light!
                Clean and Simple Javascript Image Slider!
                Setup GoDaddy Nameservers for VPS Hosted Domains [Tutorial]
                How to Install any Thesis Skin on your WordPress Blog?
                Control Home Page Post Excerpt Content in Thesis Theme

About jQuery Mobile

Getting Started

Page Header

Footer

For our Tutorial

Flight Search Page

Header – Flight Search Page

Search for Flights

Content – Flight Search Page

Footer – Flight Search Page

Copyright © 2010

Search Results Page

Header – Search Results Page

Search Results

Content – Search Results Page

150 EUR

175 EUR

225 EUR

Footer – Flight Search Page

Copyright © 2010

Conclusion

Tech and Mobile

Internet and Social Media

Social & Others

The Interview

#1: The “Awesomeness” Paralysis

#2: The “Comparison” Paralysis

#3: The “Analysis” Paralysis

A Recap

What I want you to do?

Free Updates

The Blog

The Author

The Best Posts

Recent Comments

Recent Tweets

From around the Web