|
1.Pages & dialogs
在JQM中Pages与dialogs,其实本质还是最原始的内容包含器,简单来说,page能用的,dialog也能用,它们的作用就是用于区分我们的设计,用于展示实体内容的我们用pages,用于作为行为的我们用dialogs.
例如如下的示例:
- <div data-role="page” > <div data-role="content"> <a href="dialog.html"> 跳转到一个Dialog页面 </a> </div> </div>
下面开始写我们的dialog的页面：dialog.html
- <div data-role="dialog" > <div data-role="header"> <h1>登录成功</h1> </div> <div data-role="content"> <a href="secondDay_success.html">返回!</a> </div> </div>
这里有要注意的地方!!
在jqm 1.0正式版之前,dialog这个data-role是不存在的,所以,在之前的资料中,dialog就是一个page,必须在跳转的时候用 data-rel='”dialog” 用于区分那些是pages或者dialogs,所以要在跳转的时候必须这样写
- <a href="dialog.html" data-role="dialog">
而在正式版中,dialog成为了一种特定的数据角色,所以,在使用dialog的时候可以不用具体指明data-rel=”dialog”,不过,之前的那种写法现在一样能用.
由于这是在正式版出现的新角色,在某些IDE工具就没法体现出这个角色,例如 dreamweaver cs5.5 就算是把JS替换成最新的版本,还是一样不认dialog参数,这个所导致的问题就是我们无法在dw里面预览我们的dialog.当然有个简单的办法可以处理,先用page预览,然后再改为dialog….
对话框实机效果图:
注意:如果在测试的发现,更改了dialog的设置,但是,使用的时候没发现改变,请注意清一些浏览器的缓存
2.Toolbars
Toolbars即工具栏,我们可以分为三类:
Header bars
Footer bars
以上两个本质就是在原本的显示中添加几个动作按钮,具体的例子,请参考官方例子.
Navbars
这个是一个特定的数据角色
- data-role="navbar"
用于声明一个导航条,在使用上也是很简单
- <div data-role="header" id="top"> <h1>jQuery Mobile 体验之旅</h1> <div data-role="navbar"> <ul> <li><a href="secondDay.html">书籍</a></li> <li><a href="resources.html">资源</a></li> </ul> </div> </div>
导航条实机使用截图:
3.Button
button在jqm上的实质就是一推CSS样式,html 的元素如果作为button 角色就会成为附上button的样式用于控制显示,剩下的就是我们怎么布局我们的button,在jqm 中有两套用于管理button的方式
一: inline
在jqm中一个button 默认是block就是说,我们再加一个button就会换行,有时候我们需要在一行中显示只须加上data-inline=”true”
这里建议去看官方的文档有非常详尽的说明
二:controlgroup
如果,我们懒得每个button都添加data-inline=”true”用于水平布局,那么我们就可以使用controlgroup这个数据角色我们只须要在一堆button外面加上一个div,并设置 data-role=”controlgroup” data-type=”horizontal” 就可以让我们的button水平布局了.更多查看官方文档:
额外提一下:button 还可以进行设置,方法,和事件,具体使用和例子在官方文档中:
请认真阅读和比较
4.listView
listView用于列项显示,要使用它只需要:
- <ul data-role="listview"> <li>xxx</li> <li>yyy</li> <li>zzz</li> </ul>
看似很简单的使用,但是,使用起来太灵活了,我建议各位好好阅读一下官方文档,掌握一些基本的listview的显示,在以后的课程中我会用实例进行listview的使用.各位,先去看下官方文档吧…
5.总结
其实整个JQM框架的组件就这么多了,在以后的课程,我会用一个小项目对这些知识进行实战.
|
