jQuery Mobile学习笔记(二)——框架起步
来源:互联网 发布:永磁同步电机控制算法 编辑:程序博客网 时间:2024/05/17 21:40
目的:开发自己的APP——前端篇。
已有基础:HTML、CSS、Javascript、jQuery
----------------------------我是华丽丽的分割线-------------------------
<span style="font-size:18px;"><!DOCTYPE html> <!-- HTML5 头文件--> <html> <head> <meta charset="utf-8" /> <title>Your Title</title><!-- 使用JM,首先需要导入,导入方式有两种:下载到本地或使用CDN。放在head标签中。WebAPP时一般采用本地,这样可以离线浏览。以下为使用CDN方式。CDN方式记得检查最新版本,或直接使用http://code.jquery.com/mobile/latest/jquery.mobile.min.css(js一样),不过这种方式可能不稳定(测试版)。 --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /><!-- 版本说明:1.0表示1.0最终版,1.0.b1代表1.0 Beta1版,1.0rc2代表1.0候选版本2。min后缀的文件推荐用于生产版本,因为已被压缩。如果在jQuery Mobile里调试,则使用不带min版本。--> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script><!-- viewport是视图控制,可以自适应屏幕。initial-scale=1:视图区域:可见区域=1:1,user-scalable=no:禁止改变用户页面比例。--> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"></head> <body><!-- JM里用data-role标示页面的角色,以便告诉框架如何处理。data-role="page"表示JM里的一个页面。JM里的页面就是一个div,和html的页面不同,一个html里面可能有很多JM页面。--><!--JM一个很棒的特性是它能监听浏览器的后退按钮,,并在被点击时给出一个明确的后退导航选项。(如果另一个页面是非JM页面,则不支持。JM页面间和同一个文档不同页面即data-role=“page”是支持的。)data-add-back-btn="true":显示后退按钮,data-back-btn-text="Previous":按钮的文字是Previous,data-back-btn-theme=“e”:按钮的颜色为黄色。关于theme在文章最后和之后的文章还会再提到。--><div data-role="page"data-add-back-btn="true" data-back-btn-text="Previous" data-back-btn-theme="e"> <div data-role="header" id="page1" data-title="This is first page"><--data-title用做浏览器标题和收藏夹--> <h1>First page</h1> <!-- 页头用h1页脚使用h4时效果好。JM会从hX中提取标题,但是显示长度是有限的,所以标题要注意长度。--> </div> <div data-role="content"> <p>This is the main content of the page.</p> <p>You can go to the <a href="#page2">second page</a>.</p> <---内部页面链接,页面内部锚点导航将失效--><a href="otherDocument.html">Go to next page</a> <-- 外部链接,使用Ajax方式请求,如果加载时间长,会出现一个加载的动画,旋转loading。JM会自动使用一个新的ID,将外部加载的页面添加到当前DOM中,再次读取时是预读取状态。不能定义target=‘_blank’等target属性,不适用target属性对hybrid等有益,只有一个页面会显示内容--><a href='newpage.html' data-prefetch>Go to this new page</a> <--预读并缓存页面,会占用内存--><a href="http://www.mobilexweb.com" data-rel="external">Check my blog</a> <-- 非JM的外部链接,三种方式自动识别为外部链接,加target属性,不在同一个域名下,data-rel=“external”--><a href="http://www.mobilexweb.com" target="_blank">Check my blog</a><a href="http://www.otherdomain.com/whatever">Check my blog</a> <a href="otherpage.html" data-ajax="false">Other page</a> <--将链接强制转为绝对外部链接--><a href="#page2" data-transition="pop">second page</a><!--过渡效果:slide:从右到左 slideup:从下到上 slidedown:从上到下 pop:从小点开始变大占满屏幕 fade:交叉淡入淡出 flip:侧旋转2D或 3D(ios),看是否支持。--> <a href="#page2" data-direction="reverse">second page</a>后退行为强制使用反转过渡效果 <!--弹出对话框,不会增加历史记录。新页面作为dialog打开。--><a href="./confirmation.html" data-rel="dialog" data-transition="pop"> Delete this item</a> <a href="tel:+1800229933" data-role="button">Call the White House </a> <a href="sms:+1800229933?body=Hello!" data-role="button"> SMS with a body text </a> <a href="skype:maximiliano.firtman?call" data-role="button"> Skype me </a><--加参数?call--> <a href="facetime:+1800229933" data-role="button"> Call using Facetime </a> (iOS with camera only)<!--加参数?parameters,比如CC抄送、BCC暗送、subject、body,格式为key=value&key=value,无“”号--><a href="mailto:info@mobilexweb.com?subject=Contact&body=This%20is%20the%20body<br />This%20is%20a%20new%20line">Mail us from iPhone</a><a href="sms://+3490322111?body=Interested%20in%20Product%20AA2">More info for product AA2</a> </div> <div data-role="footer"> <h4>mobilexweb.com</h4> </div></div><div data-role="page" id="page2" data-title="This is the second page"> <div data-role="header"> <h1>Second page</h1> </div> <div data-role="content"> <p>This is the main content of the second page</p> <p>You can go back using the header’s button, <a href="#page1">clicking here</a>or using your browser’s back button. </div> <div data-role="footer"> <h4>mobilexweb.com</h4> </div></div> </body></html></span>
====================================
JM中Role: data-role
1.page:定义一个页面
2.header:页面的头部
3.content:页面的内容
4.footer:页面的页脚
5.navbar:定义一个导航条,一般位于header中
6.button:渲染为一个可视化按钮
7.controlgroup:渲染一个组件
8.collapsible:页面中可折叠的内容面板
9.collapsible-set:一组可折叠的面板(手风琴布局)
10.fieldcontain:用于表单域的容器
11.listview:由多项内容组成的列表
12.dialog:对话页面
13.slider:用于布尔值的可视化滑块
14.nojs:在兼容JM的浏览器上会被隐藏的元素
JM主题:data-theme
JM使用主题机制来定义用户界面的可视化展现。所谓主题是指一组对排版、样式以及颜色的定义。每个主题包含一组色卡,色卡为元素显示提供了不同的选择。色卡由a到z的字母定义,默认主题包含了从a到e的定义。色卡约定如下:
a:最高视觉优先级(一般用户工具条) 默认主题颜色:黑色
b:从高视觉优先级 默认主题颜色:蓝色
c:基本优先级(适用于大多数情况得色卡) 默认主题颜色:银色
d:次高优先级的替代方案 默认主题颜色:灰色
e:强调 默认主题颜色:黄色
JM提供的主题定制器:http://jquerymobile.com/themeroller
色卡使用层叠机制,元素的主题会影响子元素的主题,类似于CSS。
Tips:
1.在内部页面导航时,每个向前的链接将在访问历史(一个栈)中添加一条记录,每个后退行为则从中移除最后一条记录。
2.data-rel=“back”会给非返回链接加一个后退动画。
- jQuery Mobile学习笔记(二)——框架起步
- jQuery Mobile学习笔记(二)——框架起步
- 《jQuery Mobile即学即用》学习笔记01——框架起步
- jQuery Mobile 框架相关学习笔记(二)【UI篇】!
- jQuery Mobile学习笔记(十)——扩展框架
- jQuery Mobile学习笔记(十)——扩展框架
- jQuery Mobile 学习(二)
- jQuery Mobile学习笔记(六)——jQuery Mobile API
- jQuery Mobile学习笔记(六)——jQuery Mobile API
- jquery mobile 学习笔记——listview
- jquery-mobile 学习笔记之二(表单创建)
- jquery mobile 学习笔记——入门基础(一)
- jquery mobile学习笔记——navbar(导航条)
- jQuery Mobile学习笔记(一)——移动平台
- jQuery Mobile学习笔记(三)——UI组件
- jQuery Mobile学习笔记(四)——列表
- jQuery Mobile学习笔记(五)——表单组件
- jQuery Mobile学习笔记(九)——实例
- LayoutInflater和inflate()方法的用法
- poj2485 prime算法+距离表
- 《数据结构》 第四章 字符串和多维数组 知识总结导图
- NSThread 使用
- JavaFX高级教程:JavaFX2.0的FXML语言
- jQuery Mobile学习笔记(二)——框架起步
- C语言画出菱形
- HDU 2066 一个人的旅行 【Dijkstra】
- webApi
- 中国式数据分析报表的5宗罪
- 12月份大一周赛解题报告
- 修改BeagleBone Black 的默认IP地址
- Search Insert Position
- HTTP协议详解