Create mobile applications with jQTouch

In this article I want to introduce jQTouch, which is a jQuery plugin that allows you to develop applications for mobile browsers based on WebKit, so compatible with iPhone OS systems (iPhone and iPad) and Android.

All the work is based on simple HTML, CSS and JavaScript, but applications are made to be very similar to native applications for iPhone OS as they are modeled on the style and functioning perfectly.

First we mark the official website of jQTouch suffered from which you can download the plugin that is referenced by this brief introductory article.

Once downloaded you can just unzip the archive and you'll have everything you need:

• jQTouch: in this folder are jQuery plugin jQTouch and the CSS file;
• themes: Contains the CSS of the themes that you can use in our applications;
• extensions: there are some extensions (including a very interesting application that allows you to create usable off-line);
• demos, examples from which to take inspiration.

The first application jQTouch

The example that I propose in this article is to create a simple menu navigation style "iPhone", in which the screens of our page / application is loaded without refreshing pagaina and attractive transition effects (for each item use a menu dioverso effect so that you can test the feature).
To create this example, I was inspired by a code in the demos folder in the archive of the plugin.

Insert in the header of our website, first of all, the details of the jQuery library and plugin jQTouch:

 <style type="text/css" media="screen"> @ import "jQTouch / jqtouch.css" </ style>







 <style type="text/css" media="screen"> @ import "themes / jqt / theme.css" </ style>

Then import the CSS file of the plugin and theme:

 src="qtouch/jquery-1.4.2.js" <script type="text/javascript"> </ script>







 <script src="jqtouch/jqtouch.js" type="application/x-javascript"> </ script>

Fate insert this CSS code necessary to stylize the elements we're going to put in our page:

 <style type="text/css" media="screen">







 # # Jqt.fullscreen home. Info {



  



 display: none;







 }







 div # # about {jqt



  



 padding: 10px 40px 100px;



  



 text-shadow: rgba (255, 255, 255, 0.3) 0px-1px 0;



  



 font-size: 13px;



  



 text-align: center;



  



 background: # 161618;







 }







 div # about p {# jqt



  



 margin-bottom: 8px;







 }







 div # # about a {jqt



  



 color: # fff;



  



 font-weight: bold;



  



 text-decoration: none;







 }







 div # content {



  



 font-size: 1.5em;

 

  



 text-align: center;

 

  



 margin: 90px 0 160px;

 

  



 font-family Marker Felt;







 }







 </ Style>

• <<
• 1
• 2
• >>