jquery mobile开发手机webapp页面

去年的项目拿来和大家分享一下，总结一下前一段时间的工作。

直入主题，我们要做的是一个discuz下网站的webapp开发。主要功能是实现手机图片的上传，添加配文和博客排序功能。整个应用分为首页，图片上传页，编辑页，我的页。我的页面里面有草稿箱，我的关注和我的收藏等功能。我要主要介绍的是jquery mobile在项目中的应用和上传插件，排序插件的应用。

jquery mobile需要引入

这里应该注意，引入jquerymobile的js文件之前一定要引用jquery文件。否则mobile无法运行。mobile编辑时候最外面的div是被定义为data-role=page,所有的代码都在这个标签之内。webapp的顶部用data-role=header来标识,底部用data-role=footer标识，例如：

   
博客首页

页面中标头部分下面是页面的正文部分，内容要写在标示有data-role="content"的标签内。

	

		
博客首页
	
	

		....正文内容.....
	
	

	   

		

		   

			主页
		   
		   

		        上传
		   
		   

			我的
		   
		
	   
	

上面的是基本的结构。如果想让导航条在点击的时候隐藏，再点击出现。需要在导航条上添加data-position="fixed" data-fullscreen="true"属性。

需要注意的是导航上的a标签如果是跳转刷新的需要添加data-ajax="false"属性。因为jm中默认的跳转是异步的，所以要取消掉a标签的异步刷新才可以跳转成功。

上面是jquery mobile部分的基础内容。下一篇我会结合上传插件去聊。