- 浏览: 181561 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
Errorize:
一个用servlet实现导出csv文件的实例 -
wendellhu:
求monkey talk应用文档的解压密码
monkey talk应用文档 -
wendellhu:
加密的?
monkey talk应用文档 -
hugang357:
hslh22 写道不错的资源,可以使用,只是没有最大最小值的限 ...
数字微调输入框 -
hslh22:
不错的资源,可以使用,只是没有最大最小值的限制,需要自己去加逻 ...
数字微调输入框
与任何新技术一样,常常难就难在如何开始入手。
有鉴于此,我们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧、方法和代码片段。
由于本文不是旨在全面介绍使用jQuery Mobile库的入门知识,会忽略掉一些相当浅显的东西,而是直接探讨一些相当棘手的东西。
另外欢迎留言,告诉我们你觉得哪些代码片段很实用,以及你所知道的其他任何实用的代码片段。
1、完整的基本页面
我一再发现自己需要为基本页面建立完整的标记。正因为如此,下面是创建一个基本页面所需要的全部代码。
- <!DOCTYPE html>
- <html>
- <head>
- <title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
- </head>
- <body>
- <div data-role="page" id="home">
- <div data-role="header">
- <h1>Header</h1>
- </div>
- <div data-role="content">
- <p>Content goes here</p>
- </div>
- <div data-role="footer">
- <h4>Footer</h4>
- </div>
- </div>
- </body>
- </html>
2、何处添加额外的jQuery调用
当我开始使用jQuery的这个优秀扩展时,立即发现自己需要在触发移动插件之前改动页面上的内容。
结果发现,建议的解决办法就是只要把传统的jQuery调用放在装入移动插件的引用之前。这样,你的jQuery命令就有机会在库装入之前运行。下面是要遵照的模式:
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
- <script>
- $(document).ready(function() {
- // Your jQuery commands go here before the mobile reference
- });
- </script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
3、同时禁用所有链接的AJAX导航
尽管AJAX导航技术很出色,但有时候你倒希望禁用它。使用这一段jQuery代码,告诉jQuery Mobile库不要使用AJAX导航。
把它放在页面标题中jQuery Mobile库引用的后面。换句话说,库必须已经在该代码被引用之前装入完毕。
- <script>
- $(document).ready(function() {
- // disable ajax nav
- $.mobile.ajaxLinksEnabled = false;
- });
- </script>
4、阻止一些关键项目被截断
库的一项特性(或者是缺点,就看你的需要了)在于,它能够智能化地截断很长的项目,以适应用户界面元素。
我发现在两种情况下这可能很烦人。首先在列表项目中,我更喜欢看到全部文本。其次是在脚注文本中。一旦你在这里有好多个字符,它似乎就会开始用“…”来截断。使用这个简单的CSS来覆盖这两种默认情况。
对于列表项目:
- body .ui-li .ui-li-desc {
- white-space: normal;
- }
对于脚注内容:
- body .ui-footer .ui-title {
- white-space: normal;
- }
5、使用媒体查询来锁定设备
我在使用这个库时最先遇到的问题之一是,如何使用CSS来锁定设备(根据屏幕尺寸)。比如说,我想要为iPad设计两列布局、为智能手机设计单列布局。要做到这一点,最佳办法绝对是使用媒体查询。
只要一些简单的媒体查询已到位,你就能迅速让CSS锁定屏幕尺寸。有了这种锁定技术,我们就能依赖传统的CSS方法,根据可用的屏幕空间来迅速创建不同的布局。
这方面的两篇出色的文章是:
CSS-Tricks网站的《CSS媒体查询和使用可用空间》
Stuff and Nonsense网站的《切合实际的CSS3媒体查询》
6、用jQuery锁定平台
尽管我们很想为某些设备执行某些CSS,但我们也想只在特定的设备上运行jQuery。下面对来自Snipplr的一些代码作了改动,那样我很容易把jQuery的一部分隔离开来,以便根据用户的设备来运行。
- var deviceAgent = navigator.userAgent.toLowerCase();
- var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
- if(agentID.indexOf("iphone")>=0){
- alert("iphone");
- }
- if(agentID.indexOf("ipod")>=0){
- alert("ipod");
- }
- if(agentID.indexOf("ipad")>=0){
- alert("ipad");
- }
- if(agentID.indexOf("android")>=0){
- alert("android");
- }
7、为表单动作属性的目标使用完全路径
jQuery Mobile库的一个不便之处似乎在于,很难找到张贴表单的目标页面;也就是说,除非你使用来自网站根目录的完全路径。
比如说,我发现这个表单标签从来找不到其目标:
- <form action=" form-handler.php " method="get" >
而像这样的完全路径可以起到应有的工作:
- <form action="/current-directory/form-handler.php" method="get" >
另外,还要确信来自表单处理程序的结果会生成一个完整、有效的jQuery Mobile页面,如第一个技巧所示。
8、创建弹出式对话框
jQuery Mobile库的一项便利特性就是内置的弹出内容或对话框特性。创建这项便利的特性简单得很。基本上只要添加需要链接的属性,如下所示:data-rel="dialog"。
注意两点。首先,目标页面必须是完整的jQuery Mobile页面,如第一个技巧所概述。其次,这只适用于外部页面;它必须是完整的单独页面才能正常工作。
- <a href="#pop.html" data-rel="dialog">Pop up!</a>
9、“Cancel”和“Save”组合按钮
这段代码满足了两个基本要求。第一个要求是,让两个按钮彼此相邻。幸好,jQuery Mobile库有一种内置的列结构,只要使用标签和合适的类,很容易利用这种结构,如下所示。第二个要求是,让两个按钮有不同的主题。这段代码直接来自说明文档,我把它留在手边,以便经常使用。
- <fieldset>
- <div><button type="submit" data-theme="c">Cancel</button></div>
- <div><button type="submit" data-theme="b">Submit</button></div>
- </fieldset>
10、自行创建列结构
我在竭力为多个设备设计最佳的单个页面结构时,发现自己经常结合运用上述的媒体查询技巧和“随意顺序的列”(columns in any order)方法。
幸好,Web开发人员很早以前就弄清楚了如何移动列。结合运用这个方法和媒体查询,我们就可以根据所处理的屏幕尺寸,很容易创建各种结构。
Position Is Everything网站展示了最容易使用的方法之一。
结论
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, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社: Addison-Wesley Professional 作者: (荷)Adriaan de Jonge (美)Phil Dutson 译者: 包勇明 程学彬 出版社:人民邮电出版社 ...
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jquery mobile代码助手包含了对JQuery Mobile中的所有组件属性的详细介绍。对于JQuery Mobile的初学者,可以通过生成代码片段进行练习,学习JQuery Mobile所有组件的属性和接口,对于JQuery Mobile开发人员,jQM代码...
jQuery Mobile教学课件及示例代码
50个jquery代码片段50个jquery代码片段
Jquery必备 必学的7个代码片段 帮助 教程 教材
《jQuery Mobile快速入门》源代码,内含各个章节源代码
jQuery mobile相册的一种样式
jQueryMobile源代码
3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。 4.通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容...
jQuery选择器大全(48个代码片段 21幅图演示)
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了...
jQuery Mobile源代码
jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI...
学习jQuery 必备的一些代码和方法,相信学习了本文,你可以对jQuery的学习更加容易。同时欢迎jQuery各位爱好者评论,指出不足,让我们大家共同学习,共同提升技术能力。 请关注html5cn的新浪微博@html5cn、腾讯微博@...
jQuery Mobile常用开发技巧,这里有最全面的技术描述,有最底层的技术指导。
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
《jQuery Mobile权威指南》由资深专家根据jQuery Mobile最新版本撰写,是一本全面而系统的jQuery Mobile教程,对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解,是系统学习jQuery Mobile的...