与任何新技术一样，常常难就难在如何开始入手。

有鉴于此，我们整理出了与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的一部分隔离开来，以便根据用户的设备来运行。

ar 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网站展示了最容易使用的方法之一。

本文出自：http://shiyun1013.blog.163.com/blog/static/1077403620118213340288/

jQuery Mobile高手必备的十大技巧和代码片段的更多相关文章

  1. SEO站长必备的十大常用搜索引擎高级指令

    作为一个seo人员,不懂得必要的搜索引擎高级指令,不是一个合格的seo.网站优化技术配合一些搜索引擎高级指令将使得优化工作变得简单.今日就和大家聊聊SEO站长必备的十大常用搜索引擎高级指令的那些事儿. ...

  2. 十大技巧快速提升原生APP开发性能

    移动应用市场用户争夺战日益激烈,原来做APP拼想法拼创意拼是否抓住用户痛点.现在,精细化用户体验成为了一个APP能否留存用户的关键问题,一旦用户觉得体验不畅,马上就有竞品APP后补,如何开发高性能的移 ...

  3. java序员必备的十大技能

    想成为一名出色的Java程序员么?本文将为大家重点介绍程序员必备的十大技能,成就您的梦想.       1.语法:必须比较熟悉,在写代码的时候IDE的编辑器对某一行报错应该能够根据报错信息知道是什么样 ...

  4. 不只是技术！成为IT经理必备的十大软技能

    摘要:可能你是一名普通的IT从业员,一个小小的程序员,可随着社会的发展和科技的进步,对人才的要求越来越高,你可能通过技术获得了职位,但你若想升职加薪却少不了软技能:谈判技巧.积极倾听.演讲技巧以及领导 ...

  5. 成为IT经理必备的十大软技能

    对于一个IT从业者,让你谋得工作的也许是技术能力,但有助于提升职业生涯的却是软技能.步步高升的人都是那些发表文章.在会议上积极发言以及关注客户的员工(程序员).与此同时,通常情况下,企业CIO或多或少 ...

  6. 成为IT经理必备的十大能力 不只是技术！

    对于一个IT从业者,让你谋得工作的也许是技术能力,但有助于提升职业生涯的却是软技能.步步高升的人都是那些发表文章.在会议上积极发言以及关注客户的员工(程序员).与此同时,通常情况下,企业CIO或多或少 ...

  7. 让PHP开发者事半功倍的十大技巧

    如果你使用一面大镜子作为冲浪板会发生什么?或许你会在较短的时间内征服海浪,但是你肯定从内心深处明白,这不是冲浪的正确选择.同样的道理也适用于PHP编程,尽管这样的类比听起来有一些古怪.我们经常听到有人 ...

  8. jdk8十大特性并代码demo（转）

    一.十大特性 1.Lambda表达式 2.Stream函数式操作流元素集合 3.接口新增:默认方法与静态方法 4.方法引用,与Lambda表达式联合使用 5.引入重复注解 6.类型注解 7.最新的Da ...

  9. 【转】IT管理人才必备的十大能力

    作为IT技术人员,相信没有一个人愿意永远在底层编写程序或做简单的系统维护.经过一段时间的技术和经验的积累,很多人都向往更高层的职位,但如何能成为一个专业的IT管理人才,并不是每一个人都清晰.明了. & ...

随机推荐

  1. chrome断点续传功能

    刚好找到了一个临时的解决方法,chrome其实已经内部实现了断点续传功能,不过应该还没完善,所以要自己打开.方法:用chrome在地址栏输入chrome://flags用搜索找到resumption( ...

  2. Couchbase 介绍 - 更好的 Cache 系统

    在移动互联网时代,我们面对的是更多的客户端,更低的请求延迟,这当然需要对数据做大量的 Cache 以提高读写速度. 术语 节点:指集群里的一台服务器. 现有 Cache 系统的特点 目前业界使用得最多 ...

  3. 部署Office Web Apps Server并配置其与SharePoint 2013的集成

    部署Office Web Apps Server并配置其与SharePoint 2013的集成   Office Web Apps Server 是新的 Office 服务器产品,它提供 Word.P ...

  4. windows下bat批处理实现守护进程

    本文转自网络,由于找不到原作者,因而无法知道出处.如果有幸让原作者看到,请联系我加上.先转载至此. 最近几天加班加疯掉了,天天晚上没法睡.开发部的一个核心程序总是会自己宕机,然后需要手工去起,而这个服 ...

  5. iOS 和 Android 中的Alert

    iOS 和 Android中都有alert这种提示框,下面简单介绍下. ios中的alert叫做UIAlertView,共有4种样式,由于在ios7上,自定义alertview不太好用,所以也就这4种 ...

  6. 转mysql复制主从集群搭建

    最近搭了个主从复制,中间出了点小问题,排查搞定,记录下来 1环境:虚拟机:OS:centos6.5Linux host2 2.6.32-431.el6.x86_64 #1 SMP Fri Nov 22 ...

  7. Java for LeetCode 048 Rotate Image

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  8. HDU2018递推牛

    母牛的故事 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  9. Linus的redHat在root出现错误:-bash: addgroup: command not found

    在root下无法完成添加用户组操作,如下: [root@host8 ~]# addgroup hadoop-bash: addgroup: command not found 这是的,root下竟然不 ...

  10. exit()与_exit()函数的区别（Linux系统中）

    注:exit()就是退出,传入的参数是程序退出时的状态码,0表示正常退出,其他表示非正常退出,一般都用-1或者1,标准C里有EXIT_SUCCESS和EXIT_FAILURE两个宏,用exit(EXI ...