前言:
本来是打算按照API来安排课程,但是,想想,这样写无非就是在造一个轮子而已,没啥意思,而且,学习JQM的人群都是有一定的编程能力,新事物的接受能力都很不错,写些官方文档都写了东西无非就是翻译一遍,所以,我打算把一些东西糅合到一起,用JQM做一些实际的东西,如果有些东西看不懂的话,请好好对比一下官方文档的介绍.
今天的安排:
其实,JQM的组件不多就分类的话就只有4种
Page&Dialogs
Toolbars
Buttons
List views
今天的任务就是把这四个组件糅合到一起,做一个很小的实际项目.
项目设计:
项目简介:
让读者能够利用手机浏览器方便的获取书籍信息.
项目的逻辑图:
今天,不会说jqm与动态服务器的交互,所以,以上的判断也将会是静态的判断,这样判断这部分功能在课程稍后几天将会介绍
预备知识
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框架的组件就这么多了,在以后的课程,我会用一个小项目对这些知识进行实战.
进行项目实战:
在做好我们的知识储备以后,我们就开始,把学到的东西进行一些练习吧.注意:所有页面暂时全部为静态页面!!!
上面的项目设计中我们需要设计5个页面
1,还没登录的主页
2,已经登录的主页
3,注册的页面
5,成功的页面
6,失败的页面
实际代码的打包下载
http://115.com/file/e6a8mhid#
jqm_d1_d2.rar在线demo
http://jqmobiletest.sinaapp.com
