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

有鉴于此，我们整理出了与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. 【Markdown】notepad++ 支持 markdown语法、预览

    Notepad++中支持Markdown   最近在学习Markdown语言的使用,很想在XP主机上使用Markdown的离线编辑器,但MarkdownPad.作业部分的离线客户端都不能再XP上运行, ...

  2. 1.1 让CPU占用率曲线听你指挥[cpu manager]

    [本文链接] http://www.cnblogs.com/hellogiser/p/cpu-manager.html [题目] 写一个程序,让用户来决定Windows任务管理器(Task Manag ...

  3. 43. 动态规划求解n个骰子的点数和出现概率(或次数)[Print sum S probability of N dices]

    [题目] 把N个骰子扔在地上,所有骰子朝上一面的点数之和为S.输入N,打印出S的所有可能的值出现的概率. [分析] 典型的动态规划题目. 设n个骰子的和为s出现的次数记为f(n,s),其中n=[1-N ...

  4. bat批量去除文件首行和合并到文件

    bat批量去除文件首行 set n=1 :starline for %%j in (*.txt) do ( :3 if exist D:\work\test\new_%n%.txt (set /a n ...

  5. Adobe Flash Player 因过期而遭到阻止 更新插件 运行一次 解决方法

    老机器运行 10.3.183.90 比较流畅 可是 Chrome 浏览器提示 Adobe Flash Player 因过期而遭到阻止 更新插件 运行一次 每次单击 运行一次 才运行,这样每次提醒很烦人 ...

  6. 【python】lxml查找属性为指定值的节点

    假设有如下xml在/home/abc.xml位置 <A> <B id=" name="apple"/> <B id=" name= ...

  7. HDU 3835 R(N)

    R(N) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. （六）STM32的时钟系统

    在STM32中,一共有5个时钟源,分别是HSI.HSE.LSI.LSE.PLL (1) HSI是高速内部时钟,RC振荡器,频率为8MHz: (2) HSE是高速外部时钟,可接石英/陶瓷谐振器,或者接外 ...

  9. 大端(big endian)和小端(little endian)

    http://www.cnblogs.com/Romi/archive/2012/01/10/2318551.html 当前的存储器,多以byte为访问的最小单元,当一个逻辑上的地址必须分割为物理上的 ...

  10. Java Hour 50 日期类型

    Plan List: 1 Java 中的日期类型 2 mysql 相关 3 java code style 鉴于本问题太过普通,所以参考文章满大街都是,因此本文内容基本为转载和验证. java.sql ...