jQuery mobile
说到这个，就是基于jq框架中的几种一个插件，用于开发移动手机的，虽说是用HTML5开发，但实际上用到的都给JQMB封装好了。研究了2天，感觉在手机上的javascript是有点不一样的。下面进行详细讲解。
一个手机网页，用到HTML5的元素很少，主要有HTML5声明部分，div做框架，H1~H6做标题，列表OL~UL，A标签，input表单元素，还有一个就是HTML5的新属性data-XXX
先看一个简单的手机页面组成部分
单页模板
<!--HTML5头文件声明--> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>jQuery mobile API</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <!--手机只能显示一个page页面，但一个页面可以同时设置多个页面，现在的就是一个简单的当页面模式--> <div data-role="page" id="page0"> <!--header头，定义了头部--> <div data-role="header" data-theme="b" > <h1>欢迎访问PG99.NET(THIS IS Header)</h1> </div> <!--content内容，为显示的内容，可以放文字，列表，a标签等等--> <div data-role="content"> <p data-role="button">欢迎访问PG99.NET(THIS IS Content)</p> </div> <!--页脚，为于手机底部--> <div data-role="footer" data-theme="a"> <h1>欢迎访问PG99.NET欢迎访问PG99.NET(THIS IS Footer)</h1> </div> </div> </body> </html>
基本结构就是使用data-xxx属性定义，为什么说要用div代替原本的HTML5的元素，是为了兼容，让旧版本的智能手机也可以识别，div标签的兼容性最好
data-xxx属性为HTML5新标签定义的属性，可以新建命名空间，
关于jqmoblie的使用data-role 属性来定义基本结构。
data-role="page"为显示页面，一个页面可以存在多个。
多页模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Multi Page Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript">/* Shared scripts for all internal and ajax-loaded pages */</script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <!-- First Page --> <div data-role="page" id="home" data-title="Welcome"> <div data-role="header"> <h1>Multi-Page</h1> </div> <div data-role="content"> <a href="#contact-info" data-role="button">Contact Us</a> </div> <script type="text/javascript"> //多页面文档内部javascript /* Page specific scripts here. */ </script> </div> <!-- Second Page --> <div data-role="page" id="contact-info" data-title="Contacts"> <div data-role="header"> <h1>Contact Us</h1> </div> <div data-role="content"> Contact information... </div> </div>
注意点：
（1）每个页面必须包含唯一id
（2）最初显示多个页面时，只有第一个页面得到增强并显示
（3）链接到一个内部页面时，必须通过页面id来引用，href="#contact",载入页面的地址multi-page.html#contact
（4）多页面文档内部的javascript不能被其他页面访问
（5）父文档head标签内声明的所有脚本，都可以被内部页面和通过Ajax载入的页面访问
a标签在这里起了很大的作用就是用来进行场面的切换