首页 > 代码库 > 框架起步

框架起步

2024-08-08 02:07:25   209人阅读

    在自己的服务器上托管这些文件时，需要确认服务器端会在客户端支持时启用gzip压缩，这将令jQuery Mobile的JavaScript和CSS传输及加载时间减少80%。具体：http://mobilexweb.com/go/performance
    使用CDN
    jQuery CDN是为我们在互联网上托管相关文件的公共服务器。
    CDN的主要优点：
  • 不用下载，马上就可以使用jQuery Moble。
  • 服务器分发的文件更少，从而节约宽带。
  • Web应用将从缓存中受益。
  • 对大多数共享主机来说，jQuery Mobile资源从CDN下载会更快。
  • Web应用的性能将从不同的域名中受益。
  • 链接到一个地址总是返回最新的版本。
    对jQuery核心来说，有一些可选的CDN：
  • 官方jQuery CDN；
  • 微软jQuery CDN（http://www.asp.net/ajaxlibrary/CDN.ashx）
  • Google AJAX 库接口（http://code.google.com、apis/libraries/）
    CDN代码(最新)：  
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css">
    使用自己的主题时，要使用的代码：
    <link rel="stylesheet" htef="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css">
    <!--自定义的主题-->
    上面的是二选一。    
 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js">

    视口

    视口（viewport）是页面所占的区域。可以指定它的宽度和高度。
    典型视口meta标签类似这样：
    <meta name="viewport" content="width=device-width,initial-scale=1">
　　禁止缩放功能：
    <meta name="viewport" content="width=device-width,initial-scale=1，user-scalable=no">
    
    Javascript 的性能
    从性能的角度看，在head中插入外部脚本标签是不好的。
    不过，从jQuery Mobile的角度来看，把两个脚本（jQuery和jQuery Mobile）移到HTML文件尾部的做法会带来一个不想要的结果：在框架下载并执行完成之前的一小段时间里，Web应用将先显示无CSS样式的HTML，就算我们把CSS文件放在head中还是会这样。
    这是jQuery Mobile框架中使用的渐进增强方法造成的。没有对应的JavaScript，相关的CSS文件对渲染毫无作用。因此，最好把它们都放在head中，即使这样会造成一点性能损失也是必要的。

    框架

    jQuery Mobile框架的主要单位是页面（page）。一个页面仅仅是一个带有指定role属性的div元素。一个html文档能包含一个页面，也能在同一个文件中包含很多个页面。
    注：在一个文档中嵌入多个页面的做法已经有10多年的历史了。同一个文档中插入多个视图页面，目的是减少延迟及下载时间。(类似的有，已废弃的WML)   

    角色

    jQuery Mobile 使用标准的HTML标记，如div标签。需要在这个div上定义一个角色（即role属性），以便告诉框架如何处理它。
    html5中有一个（由W3C标准定义的）名为自定义数据属性的特性，可用来在标签上添加任何如data-<something>或data-*的自定义属性，同时保持文档符合HTMl规范。这个在不破坏标签的有效性的同时为其添加自定义元数据的特性很有用。

    主题

    主题机制来定义用户界面的可视化展现。主题中的每一个UI元素都可以使用不同的色卡。
    所谓主题，是指一组对排版、样式以及颜色的定义。每个主题都包含一组色卡，可以随时修改这些色卡。色卡为元素显示提供了不同的选择。一般来说，Web应用中大多数元素的色卡都可以修改。色卡使用层叠机制，也就是子元素使用同样的色卡（除非另有定义）。   

    页面

    一个典型的页面可分为页头、内容、页脚三个部分，其中只有内容部分是必不可少的。
    例如：
    <div data-role="page">
        <div data-role="header"></div>
        <div data-role="content"></div>
        <div data-role="footer"></div>
    </div>
    可以使用值为nojs的role来提供只在b级或c级浏览器上显示的内容，如<div data-role="nojs">。这些内容在A级浏览器上会自动隐藏。   
    jQuery Mobile会尝试操作初始滚动位置以便隐藏浏览器地址栏，这会让应用的外观和感觉更像原声应用（只有在内容足够高）。   
    页头：由于标准jQuery Mobile样式表的限制，最好在页头中使用h1，在页脚中使用h4，以便取得最好的ui渲染效果。在web应用的导航ui中页头通常是必需的。页头结构已经被预定义并划分为三个区域：左侧、标题以及右侧。jQuery Mobile会自动从hx标签（如h1或h2元素）中提取标题。可现实标题的空间是有限的，如果标题太长，它会被自动截断，大多数会在末尾显示省略号。
    jQuery Mobile样式表无法处理那些在页面之内，但在页头、内容或页脚之外添加的内容，如果不手动处理，这些内容就会成为ui错误。

　导航

    页面间的导航使用标准a元素即可，jQuery Mobile会神奇地把剩下的事情搞定。
    导航完全由框架完成。jQuery Mobile会操作当前URl，在原来的URL后面添加散列值。
    后退按钮：data-add-back-btn="true"属性将在页头左侧添加一个“后退”按钮。data-back-btn-text和data-back-btn-theme来设置文本和颜色。
    内部页面链接：在链接的href属性中使用#<id>即可创建指向当前文档中的其他页面的链接，这儿的<id>即目标页面的id。
    外部页面的链接必须与当前页面同域，或者与当前页面在同一个本地应用的包里。对于那些指向不同域的文档的链接，除非在JavaScript中开启了Ajax加载，否则这些链接将被当作绝对外部链接。
 
    jQuery Mobile使用文档的title元素的内容作为浏览器的标题。页面的可选属性data-title，以便用户访问内部页面时更新标题。
    在内部页面之间导航时，每个向前的链接将在访问历史（一个栈）中添加一条记录，每个后退行为则从中移除最后一条记录。
    jQuery Mobile会自动将指向前一个页面的链接的行为转换为后退，点击时会显示一个后退的动画，不会在浏览器访问历史中添加新记录。a添加data-role=“back”。   
    外部链接：jQuery Mobile会自动使用一个新的ID（由该页面与原始文档的相对URL定义）将外部的加载的页面添加到当前DOM中，再次访问时它将已处于预读取状态。   
    注意：在同一个页面中滚动的Html锚点导航将不能工作。
    
   
 
    Ajax和Hijax
  
 
    将外部页面链接到一本页面中而不出问题，需要遵守以下规则：
  • 目标也必须是一个jQuery  Mobile文档
  • 目标必须与当前页面在同一个域名下。
  • 目标必须是一个只包含一个页面的文档。
  • 如果目标URL是一个文件夹，则链接的href属性必须以斜杠结尾，即href="http://www.mamicode.com/clients/";
  • 不能大意target属性，如target="_blank".    

 　预读并缓存页面

    为了减少Ajax的事件，我们可以预读一个页面。只需为链接加上一个布尔属性data-prefetch，例如：
    <a href="http://www.mamicode.com/newpage.html" data-prefetch>转到新的页面</a>。这个特性应该只在那些很有可能被点击的链接上使用。这个特性会增加用户的HTTP流量及消费，许谨慎使用。
     为了避免DOM占用过多内存，当外部加载页面变得不可见时（在后退或前进道一个新页面后），jQuery Mobile会自动从Dom中将它移除。要再显示这个页面时，jQuery Mobile会尝试从缓存中恢复它，如果失败则从服务器重新下载。如果想强制指定一个外部页面不从dom中移除，可以在页面元素上指定属性data-dom-cache="true"。由于dom的增长经常会导致内存及性能的问题，因此请仅在缺陷用户会再次访问时才使用这个特性。   

    绝对外部链接

    链接到另外的非jQuery Mobile内容的站点或文档，就需要显示定义一个绝对外部链接。可以通过在a标签上添加data-rel=“external”来实现。
    指定了target属性或链接到不同域名的文档，无论这些文档是不是jQuery Mobile文档，也都会被当做绝对外部链接处理。例如：<a href="http://www.mobilexweb.com " data-rel="external" >查看我的博客</a>    
    另一个强制链接转为绝对外部链接的方法是在链接中使用data-ajax=false属性（对同一个域名下的页面很有用）。例如：<a href="http://www.mamicode.com/otherpage.html" data-ajax=“false”>别的页面</a>
    如果是链接到一个绝对外部的URL的jQuery Mobile文档，一切都会正常，不过目标页面将没有后退按钮。目标页面将初始化一个新的jQuery Mobile。所以用户点击一个绝对链接时，jQuery Mobile实例将被卸载，浏览器将转向到指定目标。如果想在打开链接的同时保持jQuery Mobile实例，则应该在超链接中加上target="_blank"，大多数支持多页面浏览的智能手机及平板电脑都支持这个属性。
    移动互联网特有链接：使用标准的a链接，而不要使用JavaScript来改变页面或导航。使用标准HTML导航将让你的Web应用在所有移动浏览器场景中都能工作。
    
    页面间的过渡效果
 
    jQuery  Mobile允许我们为每个页面切换指定使用的动画效果。只需在链接中使用自定义属性data-transition即可。
    过渡效果动画只在A级浏览器上的内部链接或连接到jQuery Mobile页面的外部链接上生效。对于绝对链接或移动互联网专业URI方案，这些动画将失效。
    反转过渡效果：可以在链接上指定data-direction=“reverse”来强制使用反转过渡效果（后退行为），这时jQuery Mobile将自动反转指定的过渡效果。

　对话框

 　对话框页面用户显示模态消息、列表，或与原页面没有层级关系的信息。
    对话框与普通页面的最大区别：
  • 如果指定了data-add-back-btn，则在左上角后退操作按钮的位置将显示关闭操作按钮（带有一个叉）。
  • 显示的内容带有边距，不是全屏页面，而是在原页面上弹出的窗口。
  • 不会在访问历史中留下记录。
    只需在链接的a标签上加上data-rel="dialog"属性。rel定义了当前页面与所链接的页面之间的关系。页面被用作对话框时，可以通过data-overlay-theme指定覆盖层的色卡。
    除了在链接上使用data-rel="dialog"属性之外，还可以使用data-role="dialog"而不是data-role="page"来生成对话框。   
    注意：如果我们的web应用目标包括不兼容jQuery Mobile的设备的话，推荐使用标准的链接来返回打开它的页面。记住jQuery Mobile使用渐进增强，即使浏览器不支持JavaScript，web应用仍能工作。
    可以在页面上使用data-close-btn-text属性来自定义关闭按钮的文本。
 
    从对话框打开页面
    用户点击了指向非原页面的链接时，jQuery Mobile会关闭对话，回到原页面，然后打开新页面，就像这个链接本来就这原页面上一样。  

框架起步


联系
我们