jQuery Mobile简介 唐瑶 2013-5-4 Write less, do more
jQuery Mobile 简介 快速入门 &组件 页面与对话框 工具栏 布局 表单 实例 &lcell 列表 按钮
简介 jQuery Mobile构建于jQuery，是一个前端开发框架 兼容手机、平板、桌面 通用访问，支持主流移动平台 根据体验的精确细度分为三级评价支持系统 轻量级（js 141k, css 92k） 模块化的结构 易用性 …… A级——具有基于ajax动态渐变效果的高级体验 B——不支持ajax特效的高级体验 C——只支持HTML的基本体验，但功能仍能够实现
快速入门 <!—HTML5文档声明--> <!—与设备同宽--> <!DOCTYPE html> <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><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div><!-- /page --> </body> </html> <!—HTML5文档声明--> <!—与设备同宽-->
快速入门 文档声明 引用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><!-- /content -->
组件——页面和对话框 页面结构 页面转场 对话框 页面脚本 页面初始化时调用： 改变活动的页面 加载页面 滚屏 $( document ).delegate( "pagecreate", "#aboutPage", function() { alert(‘Welcome to 510'); }); 改变活动的页面 $.mobile.changePage( "about/us.html", { transition: "slideup"} ); 加载页面 $.mobile.loadPage( "about/us.html" ); 滚屏 $.mobile.silentScroll(300); 页面结构 页面转场 对话框 页面脚本 <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
头部栏 组件——工具栏 头部栏 尾部栏 导航栏 尾部栏 导航栏
组件——工具栏 头部栏 <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><!-- /header --> 尾部栏 <div data-role="footer" data-position="fixed"> <h4>© 学习元2013</h4> </div><!-- /foot --> 导航栏 <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>
组件——按钮 左箭头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><!-- /grid-a --> 分栏布局 网格布局 可折叠的区块 三栏布局 <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> …… <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 快速入门》
谢谢！ 关机 重新启动