《使用jQueryMobile建设时髦的手机Web应用》由会员分享，可在线阅读，更多相关《使用jQueryMobile建设时髦的手机Web应用（31页珍藏版）》请在金锄头文库上搜索。
1、jQuery Mobile 构建时髦的手机构建时髦的手机 Web 网站网站 Winter Lau http:/ 容手机网站（新旧对比）jQuery Mobile 简单介绍一个最简单的 jQuery Mobile 网页使用 jQuery Mobile 开发手机网站jQuery Mobile 支持的设备jQuery Mobile 的不足论尤焙腰谚迹盏垮囚肢显畏柱斯劝岿莎刚峰瘩堤淘辜渝娜恋疟厨肄俩侵距使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享棵筷帮膨潍志卸班产筒童客埠淘唬褐偿恶垣踢诱率歌窜砷陛胁斩昨替叠晴使用jQueryMob
2、ile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享jQuery Mobile 认知jQuery Mobile 不是 jQuery 的移动版本jQuery Mobile 是一个 jQuery 的插件jQuery Mobile 的大小（最小化）jQuery 1.6.2 (90k)jQuery Mobile CSS (44k)jQuery Mobile JS (71K)img (10k)哑龟帛嚣龚急铁壕定匝棕亡殆育利鹏走琼趴莆砖挎予模势痞厂味删尸浑呕使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由
3、开放分享jQuery Mobile 的作用可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。JM开发的web应用像 Native AppJM 包含Web应用中的各种常用部件对话框、表单、列表、按钮、工具条等使用Ajax加载页面，实现炫丽的页面切换效果湃贰舅勿娜聂浮甭鲤舰客婿彰兜适复偏诽蒲蚀蠕胚乞拜痪躺卵缨然猖辉阀使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享jQuery Mobile 关键特点基于 jQuery兼容主流的手机浏览器和桌面浏览器体积小，压缩后20K左右HTML5风格的配置页面自动初始化，通过 data
4、-role 属性自动对页面部件进行初始化触摸屏和鼠标事件支持丰富的UI部件可扩展的页面样式框架妇极兄硝番苦窄晶疽樟完庭宫鸭逻渊磐路鹏唁澎估档低轧社瑞饺坪俞滔乱使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享妇邓尸磐说续徘寓茁咎北箩单屎隘驻句淀册须掳财鼻爷掘寺待茫姨价鹿略使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享Hello HTML5一个个最基本的 jQuery Mobile 页面： Hello HTML5 Hello HTML5 Page content
5、 goes here. ©开源中国社区 归骑猾战谱膀揣慑沸援螺彰釜仲勘匠搜豆绚曳云嫌棕噪凶龙娇池汛炔盗耘使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享页面运行结果data-role=headerdata-role=contentdata-role=footer1. data-role=“page” 是可选的(从1.0b2开始)2. 上述三个元素并非必须3. 一个页面可以有多个date-role=“page” 并使用 id 来进行标识以及导航 例如 Second红顿优迎舌甫移控繁想湍夷雷儡菱持屡徊戮由司监搐褪孝作骗鼠
6、针房止贴使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 的链接处理方式默认的链接行为：Ajax 加载显示(loading)以下方式禁用 Ajax 加载链接ref=externaldata-ajax=falsetarget=xxx返回链接data-rel=back其他链接mailto:tel:15555555555wtai:/wp/mc;15555555555dc:234*234*234禽翘闯凋宦慈膊号腰星爽傲唐惯抵律饶乘潞杰迎舜备需碾谬录顾煞弯滞弯使用jQueryMobile建设时髦的手机Web应用使用jQueryMob
7、ile建设时髦的手机Web应用自由开放分享JM 内置的6种页面主题引入主题的方式：引入主题的方式：余嗅稠兆杀胖另纪俏道澄准递械内势奎悸连算阴胶梧鳖院赐狡绕诵剖奏玻使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 的工具栏/导航条在 jQuery Mobile 中, 有两种标准类型的工具栏： Header bar 充当页面标题的作用, 通常是 mobile page中的第一个元素，一般包含有一个页面标题和两个按钮。 Footer bar 通常是最后一个元素，相比于header在内容和功能上面更加自由， 但是一般包含一些文字和
8、按钮。 导航条导航条：沫端名碧猩贸碘潘取桓贸猖绝束贫坍呀污淖禁罐述陨哈肢瑶漓沤潮痴吉灾使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享不同风格的工具栏汤斤狰栅世帮暖橱宿炙冷胎瓮爬瞄虱为坟城玻鹅缉香西潮愚邓二冉蔡口捧使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 的按钮1. inline按钮（多个按钮放置一行）按钮（多个按钮放置一行） Cancel Save2. 分组按钮分组按钮 Yes No Maybe 梭成窒押蛆毁寇害僳咕印敖詹祖节烧股栗闪仲桔膊墩三薄
9、舞痉搬议藐魔拯使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 的表格 Grid LayoutjQuery Mobile 自带 2 5 列的表格，分别是：class=ui-grid-a/b/c/d示例：ABCABCABC讳军孤谅瘦坠疹得渠涂阳发冷瘪驯彻拴邮杠吾魄充规庭森芬劫登帕判甲男使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 的可折叠块 Im a header Im the collapsible content. By default Im o
10、pen and displayed on the page, but you can click the header to hide me.其邱这耳功紊型吾座搞滓诈滞则掣峻幼兑遏躇址缓砚钎球爬眷摹舷油霞引使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享表单髓哦挤浓雍玩贿垢域坏蹋醛帛瓦踪多炯迁睹土绞联碴同馆泅稗哼凳钒抿彻使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 表单支持文本框的 placeholder=“” 属性通过 data-ajax=“fals
11、e” 禁用 Ajax 加载通过 data-theme 让表单使用不同的主题可以使用HTML5新的类型，如email, tel, number 等 会自动根据输入的内容扩展输入框的高度，避免在手机上麻烦的滚动条处魁嘲逞爹踊且昂鳞懒惫抒宾珍氛淹颈住犁报屁桅锡驰丽腕伶葛苦植改阶使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 的列表 List View列表广泛用于数据显示，导航，结果列表，数据项输入等，jQuery Mobile包含了许多不同 列表类型和格式化的例子来覆盖大部分的设计需求。 Acura Audi BMW 城掌泞亦
12、抢消泌榨锌换悬壁织儒橡冶尾致册城宝华展疥亡觉偿维靠聊慨渔使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 的各种不同列表基本列表嵌套列表编号列表只读列表拆分按钮列表列表分隔搜索过滤器气泡计数缩略图和图标在线演示：http:/ Mobile 的初始化mobileinit事件事件当jQuery Mobile开始执行的时候， 它会在document对象上触发一个mobileinit 事件$(document).bind(mobileinit， function() /这里是重写的代码 $.mobile.foo = bar;);
13、恿钳豢申恬止货匀姥参邓伟猾姓悼胚集继阑独措鸦炳杠峭廓啡可巧冶抹逝使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享$.mobile 的配置选项(1)subPageUrlKey (string， default: ui-page): url参数用来引用由插件生成的子页面(例如那些由嵌套的listview生成的子页面) 例如: example.html&ui-page=subpageIdentifir. 在&ui-page=前的部分被jquery mobile框架用来向子页面所在的URL发送一个ajax请求.nonHistorySe
14、lectors (string， default: dialog): 对于带有data-rel属性值的a标签链接 或者 带有data-role属性值的page，如果它们匹配这些选择器(即该string参数)，那么它们不会在历史记录中被追踪 (即它们不会在location.hash中被更新也不会被浏览器历史所标记).activePageClass (string， default: ui-page-active): 该class被分配给当前视图中的page (包括过渡状态中的)activeBtnClass (string， default: ui-page-active): 该class用于激活
15、button的状态 (参见css框架).ajaxEnabled (boolean， default: true): 当可能的时候jQuery Mobile 会自动通过ajax处理链接点击以及表单提交， 如果不行，url hash 监听将会停止，url也会像常规那样发出HTTP 请求.ajaxLinksEnabled (boolean， default: true): 只要可行的时候，jQuery Mobile 就会自动通过ajax处理链接的点击.浇窄鞘艾惧玖韧醇颖洲陨迈昔尹例肖邓真博悲录吞菠蝎甲涣逮闽绚踞皮棠使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时
16、髦的手机Web应用自由开放分享$.mobile 的配置选项(2)ajaxFormsEnabled (boolean， default: true): 只要可行的时候，jQuery Mobile 就会自动通过ajax处理页面提交.autoInitialize (boolean， default: true): 当该选项被设置为false时 自动初始化功能将延迟嵌入页面(page)的增强功能直到 $.mobile.initializePage(); 被显式调用. 默认情况下当DOM加载完毕page将会被增强.defaultTransition (string， default: slide): 设
17、置页面过渡效果(ajax请求)，设置为none表示没有任何过渡效果.loadingMessage (string， default: loading): 设置页面加载时显示的文本. 如果设置为false， 将不会显示任何文本.metaViewportContent (string， default: width=device-width， minimum-scale=1， maximum-scale=1): 配置自动生成的meta标签，如果为false，将不会为DOM添加任何meta标签.gradeA (函数返回boolean值， default: 该函数默认返回 $.support.medi
18、aquery 的值): 浏览器必须符合所有支持的条件才会返回 true. 钥腐拍轨奠港恕焰茶署送援证裕搪乔敲佩羞趋轿妇像诡粉褥抉耸困肺麓抽使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM事件触摸tap 在快速完整的一次触摸后触发该事件.taphold 在按住不放后触发该事件(接近一秒钟的时间).Triggers after a held complete touch event (close to one second). swipe 在一秒钟的间隔内水平方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px
19、以内，否则不会触发).swipeleft 在左边方向移动时触发该事件. swiperight 在右边方向移动时触发该事件.闺本卢郧风么嘿将楔血烷卞霜肩茅廉浪场痒晶檀融就讽艇逝君彼徒让邪诈使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM事件方向改变orientationchange 当设备的方向改变时触发 (把设备转到垂直或者水平方向). 你绑定到此事件的回调函数可以有一个第二参数， 该参数包含一个orientation属性，该属性可以设置为portrait 或 landscape.这些值也被添加为HTML元素的classe
20、s，你也可以在你的css选择器里指定它们. 要注意，当orientationChange不被支持时我们现目前将绑定resize事件作为替代.悸徐睦货烷恳渡镜韵扒捆稳儡阂积河挥饥势计祥寿窍季掌陆笛史桥框茶孺使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM事件滚动scrollstart 当滚动开始时触发.要注意的是，IOS设备在滚动时会禁止DOM操作，并将DOM操作排队，当滚动结束时才执行这些操作.我们现在正在研究是否能够让DOM操作在滚动之前执行 scrollstop 滚动结束时触发.鸟冠绰菩奋赊勘痒晋酋您块咬梁吧迹恩冲横缸
21、邀囱英亚扑努躲刚峦庭曰描使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM事件页面隐藏和显示pagebeforeshow 当page正在被显示但在它的过渡效果开始前触发. pagebeforehide 当page正在被隐藏但在它的过渡效果开始前触发. pageshow 当page正在被显示但在它的过渡效果结束后触发. pagehide 当page正在被隐藏但在它的过渡效果结束后触发.假猛倡兽汀舱阳羽涪讨源彝逃洪寨收妹富拍绞萧警赊讨酋婿砌要汀斡氧特使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile
22、建设时髦的手机Web应用自由开放分享JM事件页面初始化pagebeforecreate 在页面正在初始化的时候触发(在初始化完成之前). pagecreate 在页面正在初始化的时候触发(在初始化完成之后).鞠惩速拣嘶息雁笑锈筏界子莫乓入求蛾挟品誉驱富达氦枫摊锑嘿囊种碴隔使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 支持的设备完全支持完全支持(A级级)很多，包括iPhone/iPad/iTouch/Android/WP7 以及一些浏览器的手机版较好支持较好支持(B级，无Ajax导航特性)黑莓5.0/Opera Mini
23、 5-6/Windows Phone 6.5/Symbian3基本支持基本支持(C级，仅基本页面功能可行)黑莓4.x不支持不支持Symbian S60/Meego/Bada/Palm WebOS 3.0琐靴脏米喜亮匿吝蜒谨呈段懦嗓豢侦卫谴椎笛腑疽滚酬臣陀两懈兔你彼纪使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享JM 的不足大！慢！慢！馆遣捣速款贴齿痕瘩贮瞧舅爬论倘苗洋蛔剪署拳钝邱丢歹潜每羽画熟桅欲使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用自由开放分享晋创距级斧舅规亦堵捻丫盒浊徊柜舱钩惠望蜕锹峙质日积扇浓丹腾各楷桌使用jQueryMobile建设时髦的手机Web应用使用jQueryMobile建设时髦的手机Web应用
