jQuery-Mobile快速入门_精品文档.pptVIP

jQueryMobile简介Writeless,domore2013-5-4jQueryMobile简介快速入门组件工具栏页面与对话框按钮表单布局列表实例lcell简介jQueryMobile构建于jQuery，是一个前端开发框架兼容手机、平板、桌面通用访问，支持主流移动平台根据体验的精确细度分为三级评价支持系统轻量级（js141k,css92k）模块化的结构易用性……快速入门!DOCTYPEhtml?

html?

head?

titleMyPage/title?

metaname=“viewport”content=“width=device-width,initial-scale=1”?linkrel=stylesheethref=/mobile/1.1.0/jquery.mobile-1.1.0.min.css/

scriptsrc=/jquery-1.7.1.min.js/script

scriptsrc=/mobile/1.1.0/jquery.mobile-1.1.0.min.js/script

/head?

bodydiv?data-role=pagediv?data-role=header

h1MyTitle/h1

/div!--/header--?div?data-role=content?

pHelloworld/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?

uldata-role=listviewdata-inset=truedata-filter=true liahref=#余胜泉/a/li liahref=#陈敏/a/li liahref=#丁国柱/a/li liahref=#宋杰/a/li liahref=#胡智杰/a/li /ul/div!--/content--组件——页面和对话框页面结构页面转场对话框页面脚本ahref=foo.htmldata-rel=dialogdata-transition=popOpendialog/a页面初始化时调用：$(document).delegate(pagecreate,#aboutPage,function(){alert(‘Welcometo510);});改变活动的页面$.mobile.changePage(about/us.html,{transition:slideup});加载页面$.mobile.loadPage(about/us.html);滚屏$.mobile.silentScroll(300);组件——工具栏头部栏尾部栏导航栏头部栏尾部栏导航栏头部栏divdata-role=headerdata-position=inlineh1我创建的学习元/h1ahref=/mobile/index.jspdata-role=buttondata-icon=homeclass=ui-btn-right首页/a/div!--/header--尾部栏divdata-role=footerdata-position=fixed h4?学习元2013/h4 /div!--/foot--导航栏divdata-role=footerdata-position=fixed divdata-role=navbarulliahref=#class=ui-btn-active我创建的/a/liliahref=/mobile/ko/myFavKoList.jsptarget=_self我收藏的/a/liliahref=/mobile/ko/allKoList.jsptarget=_self所有LCell/a/li/ul/div/div!--/foot--组件——工具栏组件——按钮左箭头data-