Jquery Mobile介绍以及Jquery Mobile页面与对话框
|
一、 Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大。 安装说明地址:http://www.phonegap100.com/article-79-1.html 下载地址说明:http://bbs.phonegap100.com/thread-135-1-1.html |
二、JM说明 默认data-ajax="true"jquery mobile 是默认通过ajax切换页面的 1、Jquery Mobile页面的基本组成 通常情况移动设备以900px的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同 需要引用的文件有: 123 | < linkhref = "Css/jquery.mobile-1.0.1.min.css" rel = "Stylesheet" type = "text/css" /> < scriptsrc = "Js/jquery-1.6.4.js" type = "text/javascript" > script > < scriptsrc = "Js/jquery.mobile-1.0.1.js" type = "text/javascript" > script > |
|
2、JM主要标签说明 12345 | < div data-role = "page" > < div data-role = "header" >头部 div > < div data-role = "content" >被容 div > < div data-role = "footer" >底部 div >
div > |
第一个实例: 1234567891011121314151617181920212223 | !DOCTYPEhtml> < html > < head > < title >jQuery Mobile 页面框架 title > < metaname = "viewport" content = "width=device-width" /> < metacharset = "utf-8" > < linkhref = "Css/jquery.mobile-1.0.1.min.css" rel = "Stylesheet" type = "text/css" /> < scriptsrc = "Js/jquery-1.6.4.js" type = "text/javascript" > script > < scriptsrc = "Js/jquery.mobile-1.0.1.js" type = "text/javascript" > script >
head > < body > < sectionid = "page1" data-role = "page" > < header data-role = "header" >< h1 >标题 h1 > header > < div data-role = "content" class = "content" > < p >这是内容 p >
div > < footer data-role = "footer" >< h1 >这是底部 h1 > footer >
section >
body >
html > |
|
3、跳转 第一种:返回主页 将跳转到id=page的div上 第二种:与普通的html跳转相同,第 2 页 |
4、对话框 通过设置data-rel="dialog",来打开一个对话框。 Open dialog
Open dialog 属性可选值: 1 | pop(默认), fade,flip,turn,flow,slidefade,slide,slideup,slidedown,none |
|
|
|
|
|