jquerymobile主要结构 ：
<html> <head> <title>jQuery Mobile: 主要结构</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js.css"></script> //我个人没用这个样式，<!-- jquerymobile 去除Loading样式 --> <style> .ui-loader-default{ display:none} .ui-mobile-viewport{ border:none;} .ui-page {padding: 0; margin: 0; outline: 0} </style></head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Home</h1> </div> <div data-role="content"> <p><a href="#about">about</a></p> </div> <div data-role="header"> <p><a href="#about">about</a></p></div> </div> </body> </html>
关于data-role="page"在”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” 属性
在上面的<head></head>中，引入三个js或css文件采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。（CDN方式简单理解为在页面引用这些资源）
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
Ajax：
为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。
这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。经常要用到的是 在a 标签里使用 data-ajax="false"
例如：
<li><a href="phonetest" data-ajax="false">首页</a></li>
去除loading字样：在jquerymobile 中会自动加载它自己的一些东西如loading字样 放在网页的底部，而作为一个网页底部一般放的是版权信息 如 xxx- xxx-Copyright © 2016 粤ICP备号-2，这样就显得不专业。于是去除loading字样是开发人员的家常便饭。
<!-- jquerymobile 去除Loading样式 --> <style> .ui-loader-default{ display:none} .ui-mobile-viewport{ border:none;} .ui-page {padding: 0; margin: 0; outline: 0} </style>
以上都是jquerymobile的一些基础内容
2059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
