jQuery Mobile简介
2012-07-24 15:34 onm 阅读(458) 评论(0) 编辑 收藏 举报jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets。
为智能手机和平板触摸优化的Web框架,基于jQuery。写Web App或者Hybrid App会用到,界面挺丑,Android上性能表现不是很行,主要是加入了大量圆角和阴影效果,去掉后表现会好一点,iOS上则表现很好,其它平台没有试过。
jQuery Mobile主要提供了两个方面,一个是页面导航,另一个是一些元素控件。页面切换有两种,一种是传统的url变换,另一种是基于hash的变换,切换的时候默认使用ajax载入,然后再切换页面元素。元素控件主要是提供了一些工具栏,列表,按钮,输入框之类的东西。
jQuery Mobile大量的使用了HTML5的dataset属性来设置和获取一些元素空间的属性,比如按钮的写法是<a href="index.html" data-role="button">Link button</a>通过data-role="button"来设定这是一个button,然后会在相应的生命周期位置处通过包裹dom元素和设定相应css样式来生成一个按钮。比如再添加data-mini="true"属性,则会生成一个小样式的按钮。
jQuery Mobile主要分为几个组件,Page, ToolBar, Button, Form elements, List views,还有基本的一些布局元素Content Formatting。jQuery Mobile产生的App的一个完整的界面是一个Page,里面顶栏和底栏是ToolBar。
一个基本的Page是如下的:
<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>
jQuery Mobile还有主题系统,通过设定属性data-theme来设置主题。
基本内容也就这些,写的仓促,还是看http://jquerymobile.com/demos/1.1.1/这个更好。
写几个用jqm过程中遇到问题的一些解决方法。
1. 如果使用backbone,backbone和jqm都会监听url的hash变化,会产生冲突,可以通过设定jqm的hashListeningEnabled属性禁用掉。网上有详细方案,Google易得。
2. 可通过$.mobile.changePage手动更换page。
3. 可通过$.mobile.showPageLoadingMsg显示Loading对话框。
4. page transition在android上基本是悲剧。
5. 动态生成的listview可能会存在样式问题,可通过$("元素选择").listview(), $("元素选择").listview("create"), $("元素选择").listview("refresh")之一来解决,看具体情况。
6. 可以通过Layout grids来做些基本的多栏布局。
。。。
来一张用jqm做的weibo的截图:
(未完代续)