jQuery Mobile简介

Transcript jQuery Mobile简介

jQuery Mobile简介
唐瑶
2013-5-4
Write less, do more
jQuery Mobile
简介
快速入门
&组件
页面与对
话框
工具栏
布局
表单
列表
按钮
实例 &lcell
简介
jQuery Mobile构建于jQuery，是一个前端开发框架
兼容手机、平板、桌面
通用访问，支持主流移动平台
根据体验的精确细度分为三级评价支持系统
轻量级（js 141k, css 92k）
模块化的结构
易用性
……
快速入门
<!DOCTYPE html>
<!—HTML5文档声明-->
<html>
<head>
<title>My Page</title>
<meta name=“viewport” content=“width=device-width, initial-scale=1”> <!—与设备同宽-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content">
<p>Hello world</p>
</div>
</div>
</body>
</html>
快速入门
• 文档声明
• 引用js和css文件
• 宽度设定
• data-role=“page”,page容器中任何的html标签都可用，但是典
型的JQM页面中，直接子结点为“header””content”和
“footer”
• 但是JQM是灵活的框架，page、header、content和footer都是可
选的元素
快速入门
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">余胜泉</a></li>
<li><a href="#">陈敏</a></li>
<li><a href="#">丁国柱</a></li>
<li><a href="#">宋杰</a></li>
<li><a href="#">胡智杰</a></li>
</ul>
</div>
组件——页面和对话框
 页面初始化时调用：
• 页面结构
• 页面转场
• 对话框
$( document ).delegate( "pagecreate", "#aboutPage",
function() {
alert(‘Welcome to 510');
});
 改变活动的页面
<a href="foo.html"
data-rel="dialog"
data-transition="pop">Open
dialog</a>
$.mobile.changePage(
"about/us.html",
{ transition:
"slideup"} );
• 页面脚本
 加载页面
$.mobile.loadPage( "about/us.html" );
 滚屏
$.mobile.silentScroll(300);
头部栏
组件——工具栏
• 头部栏
• 尾部栏
• 导航栏
尾部栏
导航栏
组件——工具栏
头部栏
<div data-role="header" data-position="inline">
<h1>我创建的学习元</h1>
<a href="/mobile/index.jsp" data-role="button" data-icon="home" class="ui-btn-right" >首页</a>
</div>
尾部栏
<div data-role="footer" data-position="fixed">
<h4>© 学习元2013</h4>
</div>
导航栏
<div data-role="footer" data-position="fixed" >
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">我创建的</a></li>
<li><a href="/mobile/ko/myFavKoList.jsp" target="_self">我收藏的</a></li>
<li><a href="/mobile/ko/allKoList.jsp" target="_self" >所有LCell</a></li>
</ul>
</div>
</div>
组件——按钮
左箭头data-icon="arrow-l"
右箭头data-icon="arrow-r"
上箭头data-icon="arrow-u"
下箭头data-icon="arrow-d"
删除 data-icon="delete"
添加 data-icon="Plus"
减少 data-icon="minus“
检查data-icon="Check"
齿轮 data-icon="gear"
前进 data-icon="Forward"
后退 data-icon="Back"
网格 data-icon="Grid"
五角?data-icon="Star"
警告 data-icon="Alert"
信息 data-icon="info"
首页 data-icon="home"
搜索 data-icon="Search"
组件——内容的格式化
• 分栏布局
• 网格布局
• 可折叠的区块
两栏布局
<div class="ui-grid-a">
<div class="ui-block-a"> Block A</div>
<div class="ui-block-b"> Block B</div>
</div>
三栏布局
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div>
网格布局
给每行的第一个容器设置为class=ui-block-a来清除浮动
Eg. 9个子容器的class应为：class=ui-block-(a,b,c,a,b,c,a,b,c)重复
组件——表单元素
• 输入框
• 滑动条
• 开关
• 单选、复选按钮
• 列表选择菜单
• 迷你表单
所有的表单元素都接受 data-mini="true" 的属性
组件——表单元素
<form action="" method="post" id="loginForm">
<div data-role="fieldcontain">
<label for="username">真实姓名:</label>
<input type="text" name="username"
onkeyup="check(this.value)" id="username" placeholder="请
输入真实姓名" autofocus required><br>
</div>
<div data-role="controlgroup" data-type="horizontal">
<legend >性别：</legend>
<input type="radio" name="gender" id="male" value="男" >
<label for="male" data-theme="b">男</label>
<input type="radio" name="gender" id="female" value="女">
<label for="female" data-theme="b">女</label>
</div>
……
<input type="button" id="submit" data-theme="b" data-
inline="true" value="提交">
</form>
组件——列表
•
•
•
•
•
•
•
•
•
基本列表
嵌套列表
编号列表
只读列表
拆分按钮列表
列表分隔
搜索过滤器
气泡计数
缩略图和图标
$('#mylist').listview('refresh');
资料
Jquery Mobile 原版文档与示例 http://jquerymobile.com/demos/1.2.1/
Jquery Mobile 中文API站 http://www.jqmapi.com/
一些JQM 的案例展示 http://www.jqmgallery.com/
jQuery Mobile中文社区 http://www.jqmobile.org/
书籍：
《jQuery mobile 快速入门》
关机
重新启动

jQuery Mobile简介

Transcript jQuery Mobile简介

Directory