jQuery mobile 学习笔记
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标签在这里起了很大的作用就是用来进行场面的切换