jQuery Mobile高手必备的十大技巧和代码片断

时间 2019-12-02

标签 jquery mobile 高手必备十大技巧代码片断栏目 JQuery 繁體版

原文原文链接

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

有鉴于此，咱们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧、方法和代码片断。php

因为本文不是旨在全面介绍使用jQuery Mobile库的入门知识，会忽略掉一些至关浅显的东西，而是直接探讨一些至关棘手的东西。css

另外欢迎留言，告诉咱们你以为哪些代码片断很实用，以及你所知道的其余任何实用的代码片断。html

一、完整的基本页面java

我一再发现本身须要为基本页面创建完整的标记。正由于如此，下面是建立一个基本页面所须要的所有代码。jquery

    <!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> android

二、何处添加额外的jQuery调用css3

当我开始使用jQuery的这个优秀扩展时，当即发现本身须要在触发移动插件以前改动页面上的内容。ajax

结果发现，建议的解决办法就是只要把传统的jQuery调用放在装入移动插件的引用以前。这样，你的jQuery命令就有机会在库装入以前运行。下面是要遵守的模式：iphone

三、同时禁用全部连接的AJAX导航

尽管AJAX导航技术很出色，但有时候你倒但愿禁用它。使用这一段jQuery代码，告诉jQuery Mobile库不要使用AJAX导航。

把它放在页面标题中jQuery Mobile库引用的后面。换句话说，库必须已经在该代码被引用以前装入完毕。

四、阻止一些关键项目被截断

库的一项特性(或者是缺点，就看你的须要了)在于，它可以智能化地截断很长的项目，以适应用户界面元素。

我发如今两种状况下这可能很烦人。首先在列表项目中，我更喜欢看到所有文本。其次是在脚注文本中。一旦你在这里有好多个字符，它彷佛就会开始用“…”来截断。使用这个简单的CSS来覆盖这两种默认状况。

对于列表项目：

    body .ui-li .ui-li-desc {
     white-space: normal;
     }

对于脚注内容：

    body .ui-footer .ui-title {
     white-space: normal;
     }

五、使用媒体查询来锁定设备

我在使用这个库时最早遇到的问题之一是，如何使用CSS来锁定设备(根据屏幕尺寸)。好比说，我想要为iPad设计两列布局、为智能手机设计单列布局。要作到这一点，最佳办法绝对是使用媒体查询。

只要一些简单的媒体查询已到位，你就能迅速让CSS锁定屏幕尺寸。有了这种锁定技术，咱们就能依赖传统的CSS方法，根据可用的屏幕空间来迅速建立不一样的布局。

这方面的两篇出色的文章是：

CSS-Tricks网站的《CSS媒体查询和使用可用空间》

Stuff and Nonsense网站的《切合实际的CSS3媒体查询》

六、用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");
}

七、为表单动做属性的目标使用彻底路径

jQuery Mobile库的一个不便之处彷佛在于，很难找到张贴表单的目标页面;也就是说，除非你使用来自网站根目录的彻底路径。

好比说，我发现这个表单标签历来找不到其目标：

而像这样的彻底路径能够起到应有的工做：

<form action="/current-directory/form-handler.php" method="get" >

另外，还要确信来自表单处理程序的结果会生成一个完整、有效的jQuery Mobile页面，如第一个技巧所示。

八、建立弹出式对话框

jQuery Mobile库的一项便利特性就是内置的弹出内容或对话框特性。建立这项便利的特性简单得很。基本上只要添加须要连接的属性，以下所示：data-rel="dialog"。

注意两点。首先，目标页面必须是完整的jQuery Mobile页面，如第一个技巧所概述。其次，这只适用于外部页面;它必须是完整的单独页面才能正常工做。

九、“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>

十、自行建立列结构

我在竭力为多个设备设计最佳的单个页面结构时，发现本身常常结合运用上述的媒体查询技巧和“随意顺序的列”(columns in any order)方法。

幸亏，Web开发人员很早之前就弄清楚了如何移动列。结合运用这个方法和媒体查询，咱们就能够根据所处理的屏幕尺寸，很容易建立各类结构。

Position Is Everything网站展现了最容易使用的方法之一。本文出自：http://shiyun1013.blog.163.com/blog/static/1077403620118213340288/