第二天 jQuery mobile 的Page&Dialogs,Toolbars,Button,listView全接触

前言:

本来是打算按照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