jQueryMobile简介.ppt

jQuery Mobile简介 Write less, do more 唐瑶 2013-5-4 jQuery Mobile 简介 快速入门 组件 工具栏 页面与对话框 按钮 表单 布局 列表 实例 lcell 简介 jQuery Mobile构建于jQuery，是一个前端开发框架 兼容手机、平板、桌面 通用访问，支持主流移动平台 根据体验的精确细度分为三级评价支持系统 轻量级（js 141k, css 92k） 模块化的结构 易用性 …… 快速入门 !DOCTYPE html?html?　head?　 titleMy Page/title?　 meta name=“viewport” content=“width=device-width, initial-scale=1”? 　 link rel=stylesheet href=/mobile/1.1.0/jquery.mobile-1.1.0.min.css /　 script src=/jquery-1.7.1.min.js/script　 script src=/mobile/1.1.0/jquery.mobile-1.1.0.min.js/script/head?body 　div?data-role=page 　div?data-role=header　　h1My Title/h1　/div!-- /header -- ? 　div?data-role=content?　　pHello world/p?　/div!-- /content -- 　/div!-- / /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 lia href=#余胜泉/a/li lia href=#陈敏/a/li lia href=#丁国柱/a/li lia href=#宋杰/a/li lia href=#胡智杰/a/li /ul 　/div!-- /content -- 　 组件——页面和对话框 页面结构 页面转场 对话框 页面脚本 a href=foo.html data-rel=dialog data-transition=popOpen dialog/a 页面初始化时调用： $( document ).delegate( pagecreate, #aboutPage, function() { alert(‘Welcome to 510); }); 改变活动的页面 $.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!-- /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 lia href=# class=ui-btn-active我创建的/a/li lia href=/mobile/ko/myFavKoList.jsp target=_self我收藏的/a/li lia href=/mobile/ko/allKoList.jsp target=_self 所有LCell/a/li /ul /div /div!-- /foot -- 组件——工具栏 组件——按钮 左箭头da