- 浏览: 181616 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
Errorize:
一个用servlet实现导出csv文件的实例 -
wendellhu:
求monkey talk应用文档的解压密码
monkey talk应用文档 -
wendellhu:
加密的?
monkey talk应用文档 -
hugang357:
hslh22 写道不错的资源,可以使用,只是没有最大最小值的限 ...
数字微调输入框 -
hslh22:
不错的资源,可以使用,只是没有最大最小值的限制,需要自己去加逻 ...
数字微调输入框
如何在jQuery Mobile上编写应用程序
- 博客分类:
- jquery mobile
从jQuery Mobile出现之前,介绍过他将支持的各个平台。现在jQuery Mobile框架已经发布,虽然他出现的时间并不长,但是它的质量却有了很大的改善。实际上,它的许多子系统都已经重新编写了(为了改善代码的清晰度和性能),跨浏览器兼容性在质量上也有了很大的提升。
以前,我使用过jQTouch和Sencha Touch。它们各有优缺点,但是我更喜欢把注意力放在jQuery Mobile开发上。现在,我将会为您讲述如何创建一个简单的应用程序,这个应用程序只有几个页面,可以支持Twitter,带有Google Maps功能,以及一些基本的元素。让我们开始吧!
首先,我们添加框架和样式。
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
- <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
现在,让我们来创建页面。这里我们应该注意一下jQuery Mobile和jQTouch的相似性——整个应用程序就是一个html页面,在这个html页面中,特殊标记的div就是这个应用程序的“页面”。在它的基础表单中,这样的“应用程序页面”如下所示:
- <div data-role="page">
- <div data-role="header">...</div>
- <div data-role="content">...</div>
- <div data-role="footer">...</div>
- </div>
“data-role”参数用来设置div的功能:页面,表头,页面的内容或页脚。另外,必须为data-role="page"的div设置“id”参数才能对这个应用程序进行导航。
另外一个值得一提的参数是“data-theme”。这个参数可以应用到所有的页面元素上,它可以决定使用哪个默认的样式。在这篇文档中,你可以找到一些可用的主题的例子(请点击查阅)。
在我们的应用程序的主页上应该有一个菜单,菜单项分别指向使用这些例子的页面。要创建这样一个菜单,我们需要添加一个ul列表。如下所示:
- <ul data-role="listview" data-inset="true" data-theme="a">
- <li><a href="#twitter_page">Twitter example</a></li>
- <li><a href="#map_page">Map example</a></li>
- <li><a href="#search">Search example</a></li>
- <li><a href="#about">About</a></li>
- </ul>
ul标签的参数:
◆data-role="listview"— 表示这是一个你想要应用样式的列表。
◆data-inset="true" — 非全屏显示一个列表,如果你的目的刚好相反,可以把它设置成“false”。
◆data-theme="a"- 使用哪个配色方案。
jQuery Mobile包含很多列表类型:简单的,带图标的,带图像数据的,等等。在这篇文档中,你可以找到一些例子(请点击查阅)。
此外,我还想把一个设置按钮添加到工具栏上。这是很容易做到的:
- <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>
就像你看到的一样,这个按钮可以把你导航到个性化的页面,在“gear”样式(data-icon="gear")中,它的外观是一个图标,它位于工具栏的右边。在这个框架中,有一套预置的图标。在这篇文档中,你可以看到一些例子(请点击查阅)。
最后,主页如下所示:
- <div data-role="page" id="main_page" data-theme="b">
- <div data-role="header" >
- <h1 id="twi_acc">Home page</h1>
- <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>
- </div>
- <div data-role="content" >
- <ul data-role="listview" data-inset="true" data-theme="a">
- <li><a href="#twitter_page">Twitter example</a></li>
- <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li>
- <li><a href="#about">About</a></li>
- </ul>
- </div>
- <div data-role="footer">
- </div>
- </div>
现在,让我们来创建其他的页面。我们将会把注意力集中在设置页面上。这里我们将会放置一些表单元素。在这篇文档中,你可以找到可用的表单元素的完整列表(请点击查阅)。
根据指南,你应该把所有元素都放到一个特定的div中:
- <div data-role="fieldcontain">
- </div>
让我们按照这条建议来行事。现在,我们把下面这些元素放在表单上。
input域:
- <label for="name">My name:</label>
- <input type="text" name="name" id="name" value="" />
文本域:
- <label for="textarea">About myself:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
滑块,设置它的最大值,最小值和当前值:
- <label for="slider">Value this site:</label>
- <input type="range" name="slider" id="slider" value="0" min="-50" max="50" />
选项:
- <label for="slider2">Value this site:</label>
- <select name="slider2" id="slider2" data-role="slider">
- <option value="off">Like</option>
- <option value="on">Dislike</option>
- </select>
选择器:
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Tired</option>
- <option value="standard">Happy</option>
- <option value="standard">Sick</option>
- <option value="standard">Sunny</option>
- </select>
现在,我们来创建一个搜索页面。它主要由两个元素构成:input域和searchresult列表。
- <div data-role="content" >
- <label for="search">Search</label>
- <input type="search" name="password" id="search" value="" />
- <ul data-role="listview" data-inset="true" id="searchresult">
- </ul>
- </div>
现在,我们需要使用JavaScript,把input域绑定到keyup函数上,来填充searchresult列表。
- $("#search").keyup(function(){
- var res = shuffle(monthes);
- var list='';
- $.each(res, function(index, value) {
- list+='<li role="option" tabindex="0" data-theme="a" class="ui-btn ui-li ui-btn-up-a"><div class="ui-btn-inner"><div class="ui-btn-text">'+value+'</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';
- });
- $("#searchresult").html(list);
- });
关于这段代码,有几点需要说明一下。在第一行中,我们对现有的数组进行了“shuffle”。Shuffle函数如下所示:
- var shuffle = function(o){ //v1.0
- for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
- return o;
- };
然后,我们创建了一个列表。我们应该用这种方式来创建它,因为列表项是动态地添加到这个列表中的,为了挂载样式和参数,一个框架不会再处理它们了。
然后,我们使用anywhere函数,创建一个支持Twitter的页面。首先,我们应该连接那些库:
- <script src="http://platform.twitter.com/anywhere.js?id=key_value&v=1" type="text/javascript"></script>
为了得到相应的Key,你必须在这个页面中注册一下(请点击查阅)。
然后,我们创建这个页面的代码:
- <div data-role="page" id="twitter_page" data-theme="b">
- <div data-role="header" >
- <h1>Simple twitter example</h1>
- </div>
- <div data-role="content" >
- <div id="twi_list"></div>
- </div>
- <div data-role="footer">
- </div>
- </div>
现在是最主要的东西了——JavaScript代码,当我们打开这个页面的时候,这些代码将会执行。要追踪这个事件,可以使用一个专门的事件——pageshow。关于其他的事件,具体可以参考(请点击查阅)。
- $('#twitter_page').live('pageshow',function(event, ui){
- twttr.anywhere(function(T) {
- T.User.find('andrebrov').timeline().first(20).each(function(status) {
- $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>');
- });
- });
- });
关于anywhere函数的使用方法,具体可以参考(请点击查阅)。当我们打开我们刚刚创建好的这个页面的时候,我们会发现,有一段时间,它一直是空白的,这是因为tweets正在载入。为了让用户知道这是怎么回事,我们将会添加一个spinner。代码如下所示:
- $('#twitter_page').live('pageshow',function(event, ui){
- twttr.anywhere(function(T) {
- $.mobile.pageLoading();
- var j=0;
- T.User.find('andrebrov').timeline().first(20).each(function(status) {
- $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>');
- j++;
- if (j==1){
- $.mobile.pageLoading(true);
- }
- });
- });
- });
在这篇文档中,你可以找到关于spinner,及其实用程序的详细信息(请点击查阅)。
现在,我们来创建地图页面。首先,选择合适的脚本
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
然后,我们创建这个页面
- <div data-role="page" id="map_page" data-theme="b">
- <div data-role="header" >
- <h1>Map example</h1>
- </div>
- <div data-role="content" >
- <div id="map_canvas"></div>
- </div>
- <div data-role="footer">
- </div>
- </div>
“map_canvas”元素将会包含这个地图。让我们来定义它的样式:
- #map_canvas{
- width:100%;
- height: 100%;
- position:relative;
- top:0px;
- }
现在,我们添加一段JavaScript代码,这段代码可以确定当前的位置,把这个位置显示在地图的中央,然后给这个位置添加一个标记。此外,在这个标记上,我们还可以某个把某个事件绑定在它的点击操作上。
- $('#map_page').live('pageshow',function(event, ui){
- navigator.geolocation.getCurrentPosition(function(location) {
- var point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
- var myOptions = {
- zoom: 13,
- center: point,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
- var marker = new google.maps.Marker({position: point,map: map});
- google.maps.event.addListener(marker, 'click', function() {
- alert("Current coodinates are: latitude "+location.coords.latitude+", longitude "+location.coords.longitude);
- });
- });
- });
最后,对于我来说,这个页面中最有趣的元素是:
完整的list-divider:
- <li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-bar-b ui-corner-top"></li>
打开一个邮件客户端的链接:
- <li><a href="mailto:mailme@gmail.com" class="ui-link-inherit">EMail me</a></li>
指向电话号码的链接:
- <li><a href="tel:+79000000000" class="ui-link-inherit">Call me</a></li>
关于各种链接,具体可以参考这里!
总结
我们曾经对“四大主流移动Web开发框架”进行过介绍,其中jQuery Mobile项目宣布其要成为“完整的,统一的,移动UI架构”,jQuery Mobile核心项目也将继续为移动提供优化,我们也最为看好这个框架,希望本文能对大家有所帮助!
感谢大家,这便是51CTO的独家译文《如何在jQuery Mobile上编写一个简单的应用程序》。
原文名称:How to write a simple application on jQuery Mobile
发表评论
-
jQuery Mobile开发进阶:API扩展介绍
2012-08-08 02:29 0目前,jQuery Mobile是在HTML5 移动开发中的一 ... -
使用jQuery Mobile实现手机新闻浏览器(第二、三章)
2012-08-08 02:23 0http://mobile.51cto.com/app-sho ... -
使用jQuery Mobile实现手机新闻浏览器
2012-08-08 02:21 0在本文中,笔者将带你 ... -
经典收藏 50个jQuery Mobile开发技巧集萃
2012-08-08 02:16 0收集了50个出色的jQuery Mobile技巧 ... -
10个出色的jQuery Mobile插件
2012-08-08 02:14 0jQuery Mobile是一种用于开发web应用程序和移动网 ... -
15 款为jQuery Mobile定制的插件推荐
2012-08-08 02:12 0jQuery Mobile 1.1 已经发布了, 做为jQue ... -
jQuery Mobile组件:内容格式
2012-08-08 02:09 0在jQuery Mobile中页面内容是完全开放式的,但是jQ ... -
jQuery Mobile组件:按钮(button)
2012-08-08 02:07 0button是jQuery Mobile中的核 ... -
jQuery Mobile组件:工具栏
2012-08-08 02:05 0工具栏(Toolbar)一般用 ... -
jQuery Mobile组件:页面和对话框
2012-08-08 02:02 0jQuery Mobile包含自动通过AJAX装载带有返回按钮 ... -
移动web开发常用JavaScript代码
2012-08-08 01:55 0在开发移动网站过程中,有一些Javascript代码会经常用到 ... -
jQuery Mobile的响应布局
2012-08-08 01:53 0jQuery Mobile在为 HTML元素 ... -
jQuery Mobile使用指南
2012-08-08 01:52 0jQuery移动版框架可以轻松的帮助我们实现非常好看的、可跨设 ... -
jQuery Mobile主要特性
2012-08-08 01:49 0jQuery Mobile,顾名思义是基于jQuery构建让你 ... -
jQuery Mobile的API事件
2012-08-08 01:48 0jQuery Mobile提供了一些依 ... -
jQuery Mobile的API默认配置
2012-08-08 01:47 0与其他jquery项目(比如jQuery和jQ ... -
创建由jQuery Mobile驱动的移动web应用程序
2012-08-08 01:41 0jQuery 驱动着 ... -
jQuery Mobile简介:统一接口工具
2012-08-08 01:38 0jQuery 的移动策略可以简 ... -
8个优秀的jQuery Mobile教程
2012-08-08 01:34 0jQuery Mobile 是 jQuery 在手机上和平板设 ... -
jQuery Mobile学习笔记案例实现
2012-08-08 01:30 0jQuery Mobile学习笔记是本文要介绍的内容,主要是来 ...
相关推荐
从jQuery Mobile出现之前,介绍过他将支持的各个平台。现在jQuery Mobile框架已经发布,虽然他...实际上,它的许多子系统都已经重新编写了(为了改善代码的清晰度和性能),跨浏览器兼容性在质量上也有了很大的提升。
, 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...
, 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。...
一个用于多因素身份验证的简单应用程序,使用jQuery Mobile,jsSHA,LocalStorage和Application Cache用HTML编写。 它根据实现TOTP(基于时间的一次性密码)算法和已通过测试,工作与谷歌身份验证器,Dropbox的,...
Addy Osmani,本书的作者是知名的JavaScript专家、谷歌Chrome团队的工程师,他对JavaScript应用程序架构有着强烈的爱好,还创建了一些比较流行的项目,如TodoMVC,并且对Yeoman、Modernizr和jQuery等其他开源项目也有...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此现在通过jQuery编写Ajax程序将自动获得这一功能。 开发人员借此可以使用无法立即获得的返回值(如异步Ajax请求的返回结果),而且第一次能够附加多个事件处理器。 ...
移动罗马使用 jquery、jquery mobile 和谷歌地图 API 用 javascript 编写的动态历史网站的 PoC。 该应用程序目前分为两个主要部分,作为项目核心的主应用程序 (index.html) 和坐标工具 (coordinateTool.html)。 坐标...
用一个URL加一个JAVA壳做成一个安卓应用 本程序是由爱就是幸福网www.ai9475.com 编写,...2、应用使用jquerymobile,有小的闪屏效果 若有什么问题,请加我们QQ群,请不要给我们发邮件,有事情到QQ群里一起讨论学习
第11章挖掘了jQuery效果特性的潜力,这一章不仅要讲解如何编写自定义缓动函数,还会介绍在动画的每一阶段执行操作,以及通过自定义队列提前将各种操作排队。 第12章介绍与操作DOM相关的更实用的技术,包括将任意数据...
该应用程序是使用 HTML、CSS 和 JavaScript 编写的,并支持多种框架,例如 jQuery、jQuery Mobile 和 Cordova(也称为 PhoneGap)。 您可以在找到更多信息。 ## 读我旨在通过使用 Cordova/PhoneGap 框架,为移动...
在尝试使用 jQuery Mobile 时,我发现很多不足之处。 它补充说“漂亮”的移动应用程序外观与大量膨胀相结合。 最重要的是,它将您所有的 HTML 标记更改为不同的 HTML 标记,恕我直言,具有明确的。 jQuery 与 ...
该应用程序是基于jQuery mobile(专用于我妻子购买的名为“ thermomix”的厨房机器人)的基本菜谱。 应用程序主要是在客户端用JavaScript编写的。 数据(类别,食谱和食谱名称)存储在客户端的localStorage中。 ...
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui...
一个简单的Web应用程序,用于读取quassel的最新日志,以供移动设备使用。 用Python 3.x编写。 使用烧瓶用于Web服务器和sqlalchemy来查询sql。 客户端当前使用Ractive,jQuery和Bootstrap。 屏幕截图 安装 git ...
Simple X 移动音乐应用 [Simple X Mobile Music App] 是一个基本的音频播放器,它... 该应用程序是使用 HTML、CSS 和 JavaScript 编写的,并支持多种框架,例如 jQuery、jQuery Mobile 和 Cordova(也称为 PhoneGap)。
它是用HTML5,CSS3,JavaScript和JQuery Mobile编写的。 应用信息:Dog Breeds 101可为80多种最受欢迎的犬种提供深入的信息。 如果您正在寻找新的犬友,或者对各种人类最好的朋友感到好奇,那么此应用程序将...
iHamilton应用程序从JQuery Mobile移植到Ionic Framework 去做 数字标签 使用离子列表构建电话号码 用餐 使用构造就餐视图 在controller.js中使用js逻辑显示“今天的时间” 实现从服务器提取数据的逻辑,因此...
这个项目试图编写一个基于 Scala JS 的 HTML 5 cordova 移动应用程序(可选地使用 jQuery Mobile)。 该项目仍处于非常早期的阶段,仅作为 POC 创建。 您必须安装 npm 才能安装cordova。 见 Scala JS 输出 ...