December 21, 2014
Hot Topics:

Creating a jQTouch Mobile Web App Form, Page 2

  • September 1, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Creating a Mobile Web Application Form

In Figure 1 you might have noticed the Login button located to the top right of the page. Despite their ubiquity, appealing form stylization has always presented a challenge to many developers. Thankfully, jQTouch does a fantastic job of rendering the form in a fashion which suits mobile devices. Let's take a look at these capabilities by creating a page named login, and within it, a login form:

<div id="login" target="_blank">
  <div class="toolbar" target="_blank">
    <h1>Login</h1>
    <a class="button leftButton flip" href="#home" target="_blank">Home</a>
  </div>
  <form id="form-login" enctype="application/x-www-form-urlencoded" method="get" target="_blank">
  <ul class="rounded" target="_blank">
    <li><input type="text" />
    </li><li><input type="password" />
  </li></ul>
  <a id="submit-login" class="whiteButton submit" target="_blank">Login</a>
  </form>
</div>

Navigating to this page produces the form found in Figure 2.


A jQTouch Login Form
Click here for larger image

Figure 2. A jQTouch Login Form

As was done with the home page, you can use several interesting jQTouch-specific CSS classes and attributes to tweak the form. Additionally, I'm using the cool placeholder attribute which was introduced with HTML5.

Of course, it's not possible to process forms using traditional approaches; instead you'll need to process it using Ajax. If you haven't yet explored Ajax-driven forms processing, it's a lot easier than you think. While an explanation is out of the scope of this article, the following snippet demonstrates how to use jQuery-specific syntax to bind an event to the login form's submission button:

google.setOnLoadCallback(function() {
  $(function() {
    $("#submit-login").click(function(e){
      alert("You submitted the form!");
      e.preventDefault();
    });
  });
});

Prompting Users to Add Your Mobile Web App

Of course, we'd like the user to repeatedly return to the mobile Web application. One great way to encourage users to do so is by prompting them to add a link to the iPhone's home screen. In doing so an icon (the image used to represent this icon identified by the icon property which you can set when initializing jQTouch) will be added to the home screen; clicking on the icon will take the user to the mobile Web application. The user can add the mobile Web app by first clicking on the ubiquitous middle icon located on the bottom toolbar, and then pressing the Add to Home Screen button (see Figure 3).


Adding a Mobile Web App to the Home Screen in jQTouch
Click here for larger image

Figure 3. Adding a Mobile Web App to the Home Screen in jQTouch

To clue the user in to this possibility you could use a jQuery notification plugin such as jQuery Grows.

Conclusion

With more than 10 billion App Store apps downloaded, and a staggering 51.9 million Android-powered phones sold in the second quarter alone, the smart phone has quickly transitioned from a luxury item to consumer staple in a strikingly short period of time. Consumers and businesses alike are increasingly reliant on these devices to search the Web, check email, track expenses, keep in touch with friends over Facebook, and carry out any number of myriad daily tasks.

jQTouch is a very slick mobile Web application library well suited to devices such as the iPhone and any Android-based phone. Have you built anything cool using jQTouch? Tell us about it in the comments!

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.


Tags: mobile web development, JQuery Mobile

Originally published on http://www.developer.com.

Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel