Introduction to jQueryMobile
Following is an extract from jQueryMobile site -
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. Alpha Release Notes
Seriously cross-platform & cross-device
jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms. Device support grid
iOS
Android
BlackBerry™
Bada
Windows® Phone
Palm webOS™
Symbian
MeeGo™
Touch-optimized layouts & UI widgets
Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs). Demos
Themable designs: Bigger and better
To make building mobile themes easy, we’re dramatically expanding the CSS framework to have the power to design full applications. For more polished visuals without the bloat, we added support for more CSS3 properties liketext-shadow, box-shadow, and gradients.
Demo Video
Getting started with JQueryMobile
There are two parts to jQueryMobile
jQuery - (Event Handling, DOM Manipulation and Ajax)
jQuery Mobile UI
jQuery - ( Event Handling, DOM Manipulation and Ajax)
This is out of scope for this Article. Please refer to w3c Tutorial on jQuery - http://www.w3schools.com/jquery/default.asp
jQuery Mobile UI
jQuery Mobile Declarative UI
This is the best part about jQuery Mobile. The UI is not declared by using HTML 5 style "data-role". This makes the UI development a breeze. Building a prototype of jQuery Mobile UI (wireframe) would not require any coding, but just html tags.
Lets try to build the following Page in Phone Gap
Step 1 - Include needed Javascript and CSS
<head>
<link rel="stylesheet" href="/jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
</head>
Step 2 - Declare different Pages
home is the first screenshot and search is the second screen shot.
<body>
<div data-role="page" id="home">
.....
</div>
<div data-role="page" id="search">
.....
</div>
<div data-role="page" id="recent">
.....
</div>
</body>
Step 3 - Declare Header and Page Navigation
<body>
<div data-role="page" id="home">
<div data-role="header"> <!-- This div with data-role is the header, shown in the black -->
<h1>AlternativeTo Home</h1>
</div>
<div data-role="content"> <!-- This div is the body of the page -->
<p>Find Alternatives To Your favourite Softwares </p>
<p><a href="#search" data-role="button">Search Alternatives</a></p> <!-- navigation button's href points to other page -->
<p><a href="#recent" data-role="button">Recent Alternatives</a></p>
</div>
</div>
<div data-role="page" id="search">
<div data-role="content">
<ul data-role="listview" id="list"> <!-- Special Widget which is List View to show data in a list -->
</ul>
</div>
</div>
</body>
jQuery Mobile API
The jQuery Mobile API talks about Page Loading, Transition, Dialog box handling, List View manipulation, item click etc.
Complete API reference - http://jquerymobile.com/demos/1.0a3/
JQueryMobile + PhoneGap
Boot Events
The main thing when using any Javascript library is to be handle the library boot strap event. A Boot strap event is when js library hells that it is ok to start using its api
A Boot strap event handling in case of jquery is the as follows
$(document).ready(function() {
//Its ok to use all jquery functions here
});
A Boot strap event handling in case of jQuery mobile is as follows (read more here)
$(document).bind("deviceready", function(){
});
or
document.addEventListener("deviceready", onDeviceReady, false);
These bootstraps need to be chained (i,e one calling another one), in order to properly bootstrap both jquery/jquerymobile and phonegap.
Ideally following should be enough ( PS- I need to verify the following code)
$(document).ready(function() {
$(document).bind("deviceready", function(){
});
});
Rest of Integration
The Rest of the Integration is using jQuery selector, event handling to call jQueryMobile and phonegap api.
Demo Apps
Following is the Demo App, with complete index.html file of the UI
Source Code
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-0.9.3.js"></script>
<link rel="stylesheet" href="/jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript">
$( function() {
$('#searchButton').click(function() {
$.getJSON('http://api.alternativeto.net/software/'+$('#searchBox').val()+'/?count=15',
function(data) {
var items=data.Items;
var list = $('#list');
list.html("");
$.each(items, function(key, val) {
list.append(
$(document.createElement('li')).html(val.Name)
);
});
list.listview("destroy").listview()
});
});
document.addEventListener("deviceready", onDeviceReady, false);
} );
function reachableCallback(reachability) {
// There is no consistency on the format of reachability
var networkState = reachability.code || reachability;
var states = {};
states[NetworkStatus.NOT_REACHABLE] = 'No network connection';
states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK] = 'WiFi connection';
alert('Connection type: ' + states[networkState]);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
navigator.network.isReachable('phonegap.com', reachableCallback);
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>AlternativeTo Home</h1>
</div>
<div data-role="content">
<p>Find Alternatives To Your favourite Softwares </p>
<p><a href="#search" data-role="button">Search Alternatives</a></p>
<p><a href="#recent" data-role="button">Recent Alternatives</a></p>
</div>
</div>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
<h1>Search Alternatives</h1>
<div class="class= ui-body ui-body-b">
<input type="text" name="search" id="searchBox" value="" data-theme="a" />
<button type="submit" data-theme="a" id="searchButton">Search</button>
</div>
</div>
<div data-role="content">
<ul data-role="listview" id="list">
</ul>
</div>
</div>
<div data-role="page" id="recent">
<div data-role="header">
<h1> Recent Alternatives</h1>
</div>
<div data-role="content">
<p>This app rocks!</p>
</div>
</div>
</body>
</html>
Download Demo Source
Download Demo Source here - PhoneGap.zip
This is a working Demo of PhoneGap Client of site - http://alternativeto.net
Issues to watch out
The issue you will notice first and not like is that of ListView with header and footer.
Here is an example
Notice the scrollbar starting from top of page and going it the bottom
Notice the header missing in the second image, (it is missing because it has moved up)
Ideally we would want
Scroll to start below header and end above footer
Header and Footer to be fixed
Fortunately, the fix for this could be provided very soon. Here is an experimental source of jQuery mobile handling the issue - http://jquerymobile.com/test/experiments/scrollview
I would wait for this fix and still bet on jQuery Mobile.
Following is an extract from jQueryMobile site -
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. Alpha Release Notes
Seriously cross-platform & cross-device
jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms. Device support grid
iOS
Android
BlackBerry™
Bada
Windows® Phone
Palm webOS™
Symbian
MeeGo™
Touch-optimized layouts & UI widgets
Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs). Demos
Themable designs: Bigger and better
To make building mobile themes easy, we’re dramatically expanding the CSS framework to have the power to design full applications. For more polished visuals without the bloat, we added support for more CSS3 properties liketext-shadow, box-shadow, and gradients.
Demo Video
Getting started with JQueryMobile
There are two parts to jQueryMobile
jQuery - (Event Handling, DOM Manipulation and Ajax)
jQuery Mobile UI
jQuery - ( Event Handling, DOM Manipulation and Ajax)
This is out of scope for this Article. Please refer to w3c Tutorial on jQuery - http://www.w3schools.com/jquery/default.asp
jQuery Mobile UI
jQuery Mobile Declarative UI
This is the best part about jQuery Mobile. The UI is not declared by using HTML 5 style "data-role". This makes the UI development a breeze. Building a prototype of jQuery Mobile UI (wireframe) would not require any coding, but just html tags.
Lets try to build the following Page in Phone Gap
Step 1 - Include needed Javascript and CSS
<head>
<link rel="stylesheet" href="/jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
</head>
Step 2 - Declare different Pages
home is the first screenshot and search is the second screen shot.
<body>
<div data-role="page" id="home">
.....
</div>
<div data-role="page" id="search">
.....
</div>
<div data-role="page" id="recent">
.....
</div>
</body>
Step 3 - Declare Header and Page Navigation
<body>
<div data-role="page" id="home">
<div data-role="header"> <!-- This div with data-role is the header, shown in the black -->
<h1>AlternativeTo Home</h1>
</div>
<div data-role="content"> <!-- This div is the body of the page -->
<p>Find Alternatives To Your favourite Softwares </p>
<p><a href="#search" data-role="button">Search Alternatives</a></p> <!-- navigation button's href points to other page -->
<p><a href="#recent" data-role="button">Recent Alternatives</a></p>
</div>
</div>
<div data-role="page" id="search">
<div data-role="content">
<ul data-role="listview" id="list"> <!-- Special Widget which is List View to show data in a list -->
</ul>
</div>
</div>
</body>
jQuery Mobile API
The jQuery Mobile API talks about Page Loading, Transition, Dialog box handling, List View manipulation, item click etc.
Complete API reference - http://jquerymobile.com/demos/1.0a3/
JQueryMobile + PhoneGap
Boot Events
The main thing when using any Javascript library is to be handle the library boot strap event. A Boot strap event is when js library hells that it is ok to start using its api
A Boot strap event handling in case of jquery is the as follows
$(document).ready(function() {
//Its ok to use all jquery functions here
});
A Boot strap event handling in case of jQuery mobile is as follows (read more here)
$(document).bind("deviceready", function(){
});
or
document.addEventListener("deviceready", onDeviceReady, false);
These bootstraps need to be chained (i,e one calling another one), in order to properly bootstrap both jquery/jquerymobile and phonegap.
Ideally following should be enough ( PS- I need to verify the following code)
$(document).ready(function() {
$(document).bind("deviceready", function(){
});
});
Rest of Integration
The Rest of the Integration is using jQuery selector, event handling to call jQueryMobile and phonegap api.
Demo Apps
Following is the Demo App, with complete index.html file of the UI
Source Code
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-0.9.3.js"></script>
<link rel="stylesheet" href="/jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript">
$( function() {
$('#searchButton').click(function() {
$.getJSON('http://api.alternativeto.net/software/'+$('#searchBox').val()+'/?count=15',
function(data) {
var items=data.Items;
var list = $('#list');
list.html("");
$.each(items, function(key, val) {
list.append(
$(document.createElement('li')).html(val.Name)
);
});
list.listview("destroy").listview()
});
});
document.addEventListener("deviceready", onDeviceReady, false);
} );
function reachableCallback(reachability) {
// There is no consistency on the format of reachability
var networkState = reachability.code || reachability;
var states = {};
states[NetworkStatus.NOT_REACHABLE] = 'No network connection';
states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK] = 'WiFi connection';
alert('Connection type: ' + states[networkState]);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
navigator.network.isReachable('phonegap.com', reachableCallback);
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>AlternativeTo Home</h1>
</div>
<div data-role="content">
<p>Find Alternatives To Your favourite Softwares </p>
<p><a href="#search" data-role="button">Search Alternatives</a></p>
<p><a href="#recent" data-role="button">Recent Alternatives</a></p>
</div>
</div>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
<h1>Search Alternatives</h1>
<div class="class= ui-body ui-body-b">
<input type="text" name="search" id="searchBox" value="" data-theme="a" />
<button type="submit" data-theme="a" id="searchButton">Search</button>
</div>
</div>
<div data-role="content">
<ul data-role="listview" id="list">
</ul>
</div>
</div>
<div data-role="page" id="recent">
<div data-role="header">
<h1> Recent Alternatives</h1>
</div>
<div data-role="content">
<p>This app rocks!</p>
</div>
</div>
</body>
</html>
Download Demo Source
Download Demo Source here - PhoneGap.zip
This is a working Demo of PhoneGap Client of site - http://alternativeto.net
Issues to watch out
The issue you will notice first and not like is that of ListView with header and footer.
Here is an example
Notice the scrollbar starting from top of page and going it the bottom
Notice the header missing in the second image, (it is missing because it has moved up)
Ideally we would want
Scroll to start below header and end above footer
Header and Footer to be fixed
Fortunately, the fix for this could be provided very soon. Here is an experimental source of jQuery mobile handling the issue - http://jquerymobile.com/test/experiments/scrollview
I would wait for this fix and still bet on jQuery Mobile.
发表评论
-
linux shell date用法
2011-09-22 09:53 1451使用date命令转换基础时间秒为年月日: 命令为: date ... -
VSFTPD全攻略
2011-09-19 17:23 896/etc/vsftpd/vsftpd.conf文件 ... -
linux下添加,删除,修改,查看用户和用户组
2011-09-19 10:44 950一,组操作 1,创建组 groupadd test 增加一个 ... -
VSFTP虚拟用户创建方法
2011-09-19 10:29 1019yum -y install vsftpd* yum -y i ... -
借助 unoconv 批量转 xls 到 pdf文件
2010-05-10 14:13 2006因为公司的一些业务需 ... -
Windows服务器或vps远程桌面黑屏/蓝屏
2010-05-04 11:44 4053解决办法1: 远程桌面连接-》选项-》高级-》去掉“主题”和 ... -
ubuntu中安装PHP,Apache,MySQL
2010-03-17 14:45 23661、安装Apache服务 sudo apt-get insta ... -
php GZIP javascript
2009-12-31 17:58 1068<?php ob_start('ob_gzhan ... -
ANT-build.xml文件详解
2009-12-01 13:42 1045Ant的概念 可能有些读者并不理解什么是Ant以及如何 ... -
css pre 自动换行的问题
2009-11-05 12:24 1383本站文章中使用了 pre 格式输出 代码。 而浏览器默认是强制 ... -
实战 Comet 应用程序开发
2009-10-26 13:58 947级别: 中级 成 富 (ch ... -
Comet:基于 HTTP 长连接的“服务器推”技术
2009-10-26 13:49 635周 婷 (zhouting@cn.ibm.com) ...
相关推荐
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
原书名:jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社: Addison-Wesley Professional 作者: (荷)Adriaan de Jonge (美)Phil Dutson 译者: 包勇明 程学彬 出版社:人民邮电出版社 ...
**jQuery Mobile UI 概述** jQuery Mobile 是一个用于构建响应式和触摸友好的网页应用的框架,它基于 jQuery 和 jQuery UI。这个框架专门设计用来优化在各种设备,包括智能手机、平板电脑和桌面电脑上的表现,使得...
图书的源代部分; 还有由于容量的原因, 视频和web实例图片没有上传. 《jQuery全能权威指南:jQuery Core+jQuery Plugin+...、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架,专为移动设备上的网页应用设计,它提供了丰富的用户界面(UI)组件和交互效果,让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
jQuery Mobile不仅给主流移动平台带来jQuery核心库,而且还发布了一个完整统一的jQuery移动UI框架。 jQuery Mobile 1.0构建于jQuery核心1.6.4。需要注意的是,虽然jQuery 1.7已经发布了,不过目前jQuery Mobile仍...
相比之下,jQuery Mobile虽然也提供了UI组件,但在大型项目或高交互性应用中,其性能可能会显得不足。尤其是在处理大量DOM操作时,由于其设计目标是兼容性和跨平台性,牺牲了部分性能。对于内存有限的移动设备,...
jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,我们将深入探讨如何利用jQuery Mobile创建一个具有吸引力的相册展示。 首先,jQuery Mobile的核心是其...
jQuery Mobile是jQuery库的一个分支,专为触摸设备优化,提供了一套完整的UI小部件和交互效果,使得开发者能够轻松创建响应式、触摸友好的移动应用程序。 在"jQuery mobile相册"这一主题中,我们主要关注的是如何...
2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。...
jQuery Mobile是一款轻量级的框架,专门用于简化移动设备上的Web开发。它建立在流行的JavaScript库jQuery之上,提供了一套统一的事件处理、动画效果和触控友好的用户界面组件。jQuery Mobile的核心特性包括: 1. **...
**jQuery Mobile 设计详解** jQuery Mobile 是一个轻量级、响应式的前端框架,专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程,提供了丰富的组件和交互效果,使得开发者可以快速构建...
综上所述,jQuery Mobile 作为一款成熟的移动 Web 开发框架,不仅提供了丰富的 UI 组件和强大的功能支持,还拥有活跃的社区和完善的文档体系,非常适合希望快速构建高质量移动 Web 应用的开发者们使用。通过本文的...
首先,jQuery Mobile的核心是它的触控优化的事件处理和UI组件。在源码中,你可以看到如何通过这些组件创建响应式的、用户友好的界面,如页面导航、表单、工具提示等。jQuery Mobile通过数据属性(data-attributes)...
jQuery Mobile 是一个轻量级、触控优化的前端框架,专为移动设备设计,它提供了一整套构建移动Web应用程序的组件。在这个“jQuery mobile滑动式的标题导航”主题中,我们将深入探讨如何利用jQuery Mobile创建动态且...
**jQuery Mobile Google Maps 插件 jQuery UI Map** jQuery Mobile 是一个专为移动设备设计的前端框架,它使得在手机和平板电脑上构建交互式网页应用变得更加简单。而jQuery UI Map是一个专门为jQuery Mobile设计的...
通过使用HTML5和CSS3,jQuery Mobile提供了一套统一的用户界面(UI)组件和交互模式,使得开发者可以快速创建功能丰富的移动网页和应用。 二、官方文档与示例 “jquery mobile官方git资源”中包含的官方文档是学习...