jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers such as iPhone, Nexus One, and Palm Pre. jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. The combination of jQuery and jQTouch allows any web application developer with little experience in jQuery to build mobile applications.
As an example, consider a simple home panel. This is the HTML for Home panel:
<html>
<head>
<title>To-Do</title>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”jqtouch/jqtouch.css”>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”themes/jqt/theme.css”>
<script type=”text/javascript” src=”jqtouch/jquery.js”></script>
<script type=”text/javascript” src=”jqtouch/jqtouch.js”></script>
<script type=”text/javascript”>
var jQT = $.jQTouch({
icon: ‘todo.png’,
statusBar: ‘black’
});
</script>
</head>
<body>
<div id=”home”>
<div class=”toolbar”>
<h1>To-do</h1>
</div>
<ul class=”edgetoedge”>
<li class=”arrow”><a href=”#about”>About To-Do</a></li>
</ul>
</div>
<div id=”about”>
<div class=”toolbar”>
<h1>About To-Do</h1>
<a class=”back” href=”#”>Back</a>
</div>
</div>
</body>
</html>
The HTML is simple, its body composed of two divs as children. The integration with jQuery and jQTouch is in the HTML head. An analysis of the HTML document head:
• jqtouch.css is a required file, defining structural design rules specific to mobile devices, including animation handling, and orientation.
• theme.css is a CSS theme included with jQTouch.
• jquery.js is the core file of jQuery framework. jQTouch requires jQuery, and it comes with its own copy of jQuery.
• jqtouch.js is the core file of jQTouch.
• variable jQT is the jQTouch initiated object. Two properties are defined in the Home panel: icon and statusBar.
jQTouch has several properties that allow users to customize the behavior and look of their apps. In this case, icon indicated the custom Web Clip icon, and statusBar controls the color of the strip at the top of the app in full screen mode.
All in all, jQTouch is a framework that facilitates developers to add native-looking animations to a web app. read more »
