移动端网站 jquery mobile 开发技巧

jQuery Mobile 基本页面结构

大部分jQuery Mobile Web应用程序都要遵循下面的基本模板

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile基本页面结构</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>



代码说明

要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容

  • CSS文件jquery.mobile-1.0a1.min.css
  • jQuery library jquery-1.4.3.min.js
  • jQuery Mobile library jquery.mobile-1.0a1.min.js

说明:data-属性是HTML5新推出的很有趣的一个特性,它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。

在”page”div中,还可以包含”header”, ”content”, ”footer”的div元素,这些元素都是可选的,但至少要包含一个 “content”div。

div dat-role=”header”></div>

在页面的顶部建立导航工具栏,用于放置标题和按钮(典型的至少要放一个“返回”按钮,用于返回前一页)。通过添加额外的属性

data-position=”fixed”,可以保证头部始终保持屏幕的顶部

<div dat-role=”content”></div>

包含一些主要内容,例如文本内容,图像,按钮,列表,表单等等

<div dat-role=”footer”></div>

在页面的底建立工具栏,添加一些功能按钮

为了确保它始终保持在页面的底部,可以给其加上data-position=”fixed” 属性



AJAX 导航

为了实现在移动设备上的无缝客户体验,jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此,当在浏览器中点击一个链接打一个新的页面时,jQuery Mobile接收这个链接,通过AJAX的方式请求链接页面,并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。

这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待 数秒的方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时,主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂,但是做为开发人员 的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。

注意:如果你不想采用AJAX的方式加载页面,而想以原生的页面加载方式打开一个链接页面,只需要在打开的链接上添加属性 rel=”external”属性



jquerymobile去掉select默认样式   去掉其他样式类似
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.keepNative = "select";
});
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。