移动端网站 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” 属性 |
怎么去掉jquery mobile 自动添加的样式
在 <input> 标签增加属性:
data-role='none'
表示,不适用jquery mobile的样式.
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";
});
