jQuery Mobile 学习笔记(一)
2015-11-19 22:00
946 查看
慕课网视频教程地址:
http://www.imooc.com/video/4230
jQuery版本需要1.8以上版本的支持
html5没有必要加type="text/javascript"
基本的页面框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.css"/>
</head>
<body>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.23.js"></script>
</body>
</html>
HTML5 data-*属性用于通过jQuery Mobile为移动设备创建交互外观
<div data-role="page">
<div data-role="header">
<h1> <h1>
</div>
<div role="mian" class="ui-content">
<p> <p>
</div>
<div data-role="footer">
<h1> <h1>
</div>
</div>
HERE IS THE JQM CODE
在jQuery Mobile中,可以在单一HTML文件中创建多个页面
需要通过唯一的id来分隔每张页面,并使用href属性来连接彼此
jQuery Mobile
拥有一系列如何从一页过渡到下一页的效果,过渡效果可以应用于任意链接
data-transition="slide"
data-transition的属性值
slide: 默认值,从右到左滑动的页面效果
slideup: 向上滑动的动画效果
slidedown: 向下滑动的动画效果
pop: 以弹出的效果打开页面
fade: 渐变褪色的动画效果
flip: 旧页飞出,新页飞入的动画效果
jQuery Mobile拥有很多的页面事件
Page Initialization
页面创建前pagebeforecreate ,
页面创建时 pagecreate ,
页面初始化之后pageinit
Page Load/Unload-当外部页面加载时,卸载时或遭遇失败时(pagebeforeload , 加载成功,并已经加入到dom中pageload)
Page Transition 在页面过度之前和之后(在过渡动画之前pagebeforeshow , 在过渡动画完成之后pageshow . 过渡页面开始前pagebeforehide . 过渡动画完成后 pagehide)
区别一下pageinit和pageshow
pageinit是只在初始化的时候一次
pageshow是每次进入页面都执行
jQuery Mobile按钮
通过给a button 或者 input元素添加样式(或者增加data-role="button"),可以创建按钮
<a class="ui-btn">我是按钮</a>
<input type="submit" value="我也是按钮">
这两种比较,前一种样式不丰富,通过这些可以设置样式
ui-corner-all 圆角
ui-shadow 阴影
ui-btn-inline 并排显示
ui-btn-a 皮肤
ui-btn-b 皮肤
例子:
<a class="ui-btn">按钮1</a>
<a class="ui-btn">按钮2</a>
并排显示:
<a class="ui-btn ui-btn-inline">按钮1</a>
<a class="ui-btn ui-btn-inline">按钮2</a>
两种样式:
<a class="ui-btn ui-btn-a">按钮1</a>
<a class="ui-btn ui-btn-b">按钮2</a>
添加圆角和阴影:
<a class="ui-btn ui-btn-a ui-corner-all ui-shadow">按钮1</a>
<a class="ui-btn ui-btn-b ui-corner-all ui-shadow">按钮2</a>
jQuery Mobile 导航栏
导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部
导航栏中的链接会自动转换为按钮,使用data-role="navbar"属性来定义导航栏
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#">导航栏1 </a></li>
<li><a href="#">导航栏1 </a></li>
<li><a href="#">导航栏1 </a></li>
</ul>
</div>
如果导航栏一行中超过5个,导航栏就会换行显示。因为移动端的屏幕显示问题,5个就已经很多了。
如何设置固定样式
data-position="fixed"
<div data-role="header" data-position="fixed">
<div data-role="footer" data-position="fixed">
如何添加图标
有很多内置的图表,参考官方文档和样式,也可以写出自己的icon
在超链接中加入data-icon="camera"
例如:<li><a href="#" data-icon="camera">导航</a></li>
jQueryMobile列表
jQuery Mobile中的列表视图是标准的HTML列表:
有序列表<ol>和无序列表<ul>
如需创建列表,需向<ol>或<ul>元素添加data-role="listview"
如需使这些项目可以点击,在每个列表项<li>中规定链接,链接显示的就是一个按钮
<div role="main" class="ui-content">
<ul data-role="listview">
<li><a href="#">无序列表项1</a></li>
<li><a href="#">无序列表项2</a></li>
<li><a href="#">无序列表项3</a></li>
</ul>
</div>
列表不要贴边显示,要与屏幕边有一定的间距
data-inset="true"
<ul data-role="listview" data-inset="true">
jQuery Mobile 可以实现格式比较复杂的列表:
class="ui-li-aside"内容显示到侧边的位置
<li><a href="#">
<h2>G1次</h2>
<p> 北京-上海 </p>
<p>用时:4,48</p>
<p class="ui-li-aside">09:00:00</p>
</a></li>
jQuery Mobile查询表单(使用HTML原生表单即可)
<form>
<label>发车站</label>
<input type="text">
<label>到达站</label>
<input type="text">
<label>车次</label>
<form>
表单自适应 ui-field-contain 480px宽屏幕 窄屏幕之分界线
<form>
<div class="ui-field-contain">
<label>发车站</label>
<input type="text">
</div>
<label>到达站</label>
<input type="text">
<label>车次</label>
<form>
表单的id必须唯一
http://www.imooc.com/video/4230
jQuery版本需要1.8以上版本的支持
html5没有必要加type="text/javascript"
基本的页面框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.css"/>
</head>
<body>
here is the jQM code |
<script src="js/jquery.mobile-1.4.23.js"></script>
here is the js code |
</html>
HTML5 data-*属性用于通过jQuery Mobile为移动设备创建交互外观
<div data-role="page">
<div data-role="header">
<h1> <h1>
</div>
<div role="mian" class="ui-content">
<p> <p>
</div>
<div data-role="footer">
<h1> <h1>
</div>
</div>
HERE IS THE JQM CODE
<div data-role="page"> <div data-role="header"> <h1> </h1> </div> <div data-role="main" class="ui-content"> <p>我是页面</p> </div> <div data-role="footer"> <h1> </h1> </div> </div> |
需要通过唯一的id来分隔每张页面,并使用href属性来连接彼此
<div data-role="page" id="index"> <div data-role="header"> <h1> </h1> </div> <div data-role="main" class="ui-content"> <p>我是页面1</p> <p><a href="#index2">index2</a></p> </div> <div data-role="footer"> <h1> </h1> </div> </div> <div data-role="page" id="index2"> <div data-role="header"> <h1> </h1> </div> <div data-role="main" class="ui-content"> <p>我是页面2</p> <p><a href="#index">index</a></p> </div> <div data-role="footer"> <h1> </h1> </div> </div> |
拥有一系列如何从一页过渡到下一页的效果,过渡效果可以应用于任意链接
data-transition="slide"
<p><a href="#index2" data-transition="slide"> index2 </a> </p> |
slide: 默认值,从右到左滑动的页面效果
slideup: 向上滑动的动画效果
slidedown: 向下滑动的动画效果
pop: 以弹出的效果打开页面
fade: 渐变褪色的动画效果
flip: 旧页飞出,新页飞入的动画效果
jQuery Mobile拥有很多的页面事件
Page Initialization
页面创建前pagebeforecreate ,
页面创建时 pagecreate ,
页面初始化之后pageinit
<script> $(document).on("pagebeforecreate",function(){ alert("pagebeforecreate"); }); $(document).on("pagecreate",function(){ alert("pagecreate"); }); $(document).on("pageinit",function(){ alert("pageinit"); }); </script> |
Page Transition 在页面过度之前和之后(在过渡动画之前pagebeforeshow , 在过渡动画完成之后pageshow . 过渡页面开始前pagebeforehide . 过渡动画完成后 pagehide)
$(document).on("pagebeforehide","#index",function(){ alert("pagebeforecreate"); }); $(document).on("pagehide","#index",function(){ alert("pagehide"); }); $(document).on("pagebeforeshow","#index2",function(){ alert("pagebeforeshow"); }); $(document).on("pageshow","#index2",function(){ alert("pageshow"); }); |
pageinit是只在初始化的时候一次
pageshow是每次进入页面都执行
jQuery Mobile按钮
通过给a button 或者 input元素添加样式(或者增加data-role="button"),可以创建按钮
<a class="ui-btn">我是按钮</a>
<input type="submit" value="我也是按钮">
这两种比较,前一种样式不丰富,通过这些可以设置样式
ui-corner-all 圆角
ui-shadow 阴影
ui-btn-inline 并排显示
ui-btn-a 皮肤
ui-btn-b 皮肤
例子:
<a class="ui-btn">按钮1</a>
<a class="ui-btn">按钮2</a>
并排显示:
<a class="ui-btn ui-btn-inline">按钮1</a>
<a class="ui-btn ui-btn-inline">按钮2</a>
两种样式:
<a class="ui-btn ui-btn-a">按钮1</a>
<a class="ui-btn ui-btn-b">按钮2</a>
添加圆角和阴影:
<a class="ui-btn ui-btn-a ui-corner-all ui-shadow">按钮1</a>
<a class="ui-btn ui-btn-b ui-corner-all ui-shadow">按钮2</a>
jQuery Mobile 导航栏
导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部
导航栏中的链接会自动转换为按钮,使用data-role="navbar"属性来定义导航栏
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#">导航栏1 </a></li>
<li><a href="#">导航栏1 </a></li>
<li><a href="#">导航栏1 </a></li>
</ul>
</div>
如果导航栏一行中超过5个,导航栏就会换行显示。因为移动端的屏幕显示问题,5个就已经很多了。
如何设置固定样式
data-position="fixed"
<div data-role="header" data-position="fixed">
<div data-role="footer" data-position="fixed">
如何添加图标
有很多内置的图表,参考官方文档和样式,也可以写出自己的icon
在超链接中加入data-icon="camera"
例如:<li><a href="#" data-icon="camera">导航</a></li>
jQueryMobile列表
jQuery Mobile中的列表视图是标准的HTML列表:
有序列表<ol>和无序列表<ul>
如需创建列表,需向<ol>或<ul>元素添加data-role="listview"
如需使这些项目可以点击,在每个列表项<li>中规定链接,链接显示的就是一个按钮
<div role="main" class="ui-content">
<ul data-role="listview">
<li><a href="#">无序列表项1</a></li>
<li><a href="#">无序列表项2</a></li>
<li><a href="#">无序列表项3</a></li>
</ul>
</div>
列表不要贴边显示,要与屏幕边有一定的间距
data-inset="true"
<ul data-role="listview" data-inset="true">
jQuery Mobile 可以实现格式比较复杂的列表:
class="ui-li-aside"内容显示到侧边的位置
<li><a href="#">
<h2>G1次</h2>
<p> 北京-上海 </p>
<p>用时:4,48</p>
<p class="ui-li-aside">09:00:00</p>
</a></li>
jQuery Mobile查询表单(使用HTML原生表单即可)
<form>
<label>发车站</label>
<input type="text">
<label>到达站</label>
<input type="text">
<label>车次</label>
<form>
表单自适应 ui-field-contain 480px宽屏幕 窄屏幕之分界线
<form>
<div class="ui-field-contain">
<label>发车站</label>
<input type="text">
</div>
<label>到达站</label>
<input type="text">
<label>车次</label>
<form>
表单的id必须唯一
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- [转载]Activity中ConfigChanges属性的用法
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作