码迷,mamicode.com
首页 > 移动开发 > 详细

jquery mobile自定义webapp开发实例(一)——前言篇

时间:2014-06-30 17:34:26      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:webapp前端经验   webapp前端设计经验   移动web   jquery mobile webapp   

jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享

点击demo演示


手机演示二维码:

bubuko.com,布布扣

bubuko.com,布布扣此demo已经是比较老的版本,用户体验流畅度确实还存在很大的问题,但在我写这一系列的webapp开发实例后,将会解决大部分问题bubuko.com,布布扣


下面是以后准备写到的一些点:

1:谈谈关于jquery mobile 一些常见问题的解决。常见问题的解决查看bubuko.com,布布扣

2:jquery mobile实现多页面跳转(不是官网上那样把所以的page在一个.html文件内,而是每个page分离到不同的.html文件内)

3:自定义jquery mobile及自定义jquery mobile主题样式

4:iScroll实现下拉刷新,自定义滚动条效果

5:支持左右滑动打开关闭的面板panel

6:自适应滑动自动播放全屏轮播广告效果

7:菜单导航内容更多时左右滑动切换

8:像app一样的启动页面效果,滑动到最后一张图片后进入首页,或者设置秒数进入首页

9:自定义jquery mobile表单及表单验证提示消息显示数秒自动隐藏

10:html5 audio自定义添加点击声音及html video自定义播放器

11:响应设计(已经有个关于响应设计的小demo

12:ajax页面跳转参数传递及获取

13:图片延时加载加快反映速度

14:webapp html5离线缓存

差不多就这些了....此实例将全部采用jqm1.4.2版本



上面说了一大堆,现在我就说说jqm页面跳转吧:


页面跳转goTo()函数代码:

function goTo(page) {
	$.mobile.changePage(page, {
		  transition: "slide"
		});
}

此方法调用了jqm对象changePage()方法实现页面跳转,

transition: "slide"的值可以修改为自己想要的页面切换效果如果:pop   flip  flow等等,这些值都可以在jquery mobile中文api里有


页面跳转a标签,href不用像原生页面跳转那样写,直接什么都不要写了,跳转用onClick事件调用goTo()函数来实现跳转

<a href="" onClick="goTo(‘myPageTwo.html‘)">change to myPageTwo</a>
注意:goTo()方法内传的值是跳转到的页面的路径加文件名,别忘记写.html


页面切换demo下载

了解更多关于webapp开发小知识请关注魏翼超然个人网站

jquery mobile自定义webapp开发实例(一)——前言篇,布布扣,bubuko.com

jquery mobile自定义webapp开发实例(一)——前言篇

标签:webapp前端经验   webapp前端设计经验   移动web   jquery mobile webapp   

原文地址:http://blog.csdn.net/zw200813ht/article/details/35797181

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!