Warren

不积跬步,无以至千里

  • 2013-04-28 01:06:21.0月
  • 2013-04-28 01:06:21.0

JQM项目实战 Demo

34

2013-04-28 01:06:21.0 / 分类:JqueryMobile / 标签:JqueryMobile,Jqm,demo,上拉翻页,下拉刷新,iscroll

前言:

此项目只为演示某些功能,所以很多UI细节以及代码细节(js方法的重用、ID以及变量命名等)并没有去很好的处理,只为抛砖引玉,更好的封装和实现请自行处理。

演示重点:

1、给新手提供较完整的学习Demo
2、iscroll与ajax跳转的结合使用。
3、IOS Theme与JQM的结合使用。
4、带参数跳转的实现。
5、JQM Swipe的使用。
6、JQM Ajax Slide转屏效果。

2013/4/29 更新内容:

7、上拉/下拉刷新效果。


预览:

  • 登录界面
    登录界面
  • 注册界面
    注册界面
  • 选择头像
    选择头像
  • 内容主页
    内容主页
  • 详细信息
    详细信息
  • IOS Theme组件
    IOS Theme组件
  • 上拉/下拉刷新
    上拉/下拉刷新

查看Demo »

下载Demo »

扫描查看Demo:
jqmDemo

JQM项目实战Demo 简介:

1、给新手提供较完整的学习Demo

之前的Demo都是比较零散的功能的学习,如果做个比喻,他们都是一块块的砖,而此Demo可以算作是一堵墙了。

我想对于新手而言这个小Demo可以较完整的了解JQM在项目中的简单应用。

2、iscroll与ajax跳转的结合使用。

之前,很多人说用ajax跳转之后,iscroll的效果消失了,其实这也是做这个Demo的初衷。

登录进主页面之后,就是iscroll的一个界面了,菜单后面几个也是iscroll的界面,可以来回的切换,来展示iscroll与ajax跳转的结合使用。

3、IOS Theme 插件

了解更多请访问:
https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme

4、带参数跳转的实现

在主页面点击一条信息,就可以跳转到详情界面,这里就运用了带参数跳转,有兴趣的朋友可以看看demo中这部分源码。

如需查看带参数跳转单独的例子: JQM 跳转传值 Demo

5、JQM Swipe的使用

在注册界面和头像选择界面可以使用左右滑动来切换跳转。

如需查看JQM Swipe单独的例子,请点这里


6、JQM Ajax Slide转屏效果

此Demo基本都是使用的jqm ajax跳转,转屏效果设置的是:slide.

什么?没有看到slide转屏效果?点击这里 或许可以帮到您。

2013/4/29 更新内容:

7、上拉/下拉刷新效果

进入Demo的主页后,点击footer第三个页签就可以看到此效果了。

这里是把Snoopy Chen分享的demo整合到此项目中了,查看独立上拉/下拉刷新demo点击这里



写在最后的话:
由于笔者不是前端工程师,所以界面哪里写的不如意的请包涵。
整理Demo只为帮助那些正四处寻找问题答案的人。
笔者学新东西有个习惯,就是希望有个demo可以运行并参考,以此献给那些有同样习惯的朋友。
以上
Warren

原创文章,转载请注明出处:http://www.wglong.com/main/artical!details?id=14

亲,忘记输入评论内容了吧?

Warren 2017-08-04 16:02:10.0

@小羊 如果是你本地运行的话,需要服务器环境才可以正常跳转

小羊 2017-07-20 17:26:30.0

goto()的页面跳转都不能跳转呢

Warren 2016-12-06 11:21:36.0

@whw 失效说明你写的代码有问题,下载例子看看源码仿照着看看自己哪里写错了

whw 2016-11-25 10:38:30.0

大神 这上拉下拉刷新 如何能和jqm完美结合,转场之后iscroll失效啊

yz 2016-11-09 09:17:59.0

this is good sample

qq 2016-07-28 09:01:33.0

it's a good job.

haley 2016-05-21 23:05:18.0

赞一个

大桥未久 2016-01-08 16:27:06.0

棒棒哒

jack 2015-11-12 09:35:10.0

good

tony 2015-11-03 19:08:46.0

很好

2015-09-13 11:14:27.0

大幅度

Hans 2015-07-23 20:44:04.0

极好

fff 2015-06-08 09:11:43.0

fgg 2015-05-22 21:07:13.0

rgyuj

隧道股份锁定该 2015-05-05 21:47:09.0

第三方公司的

tree 2015-04-29 14:09:03.0

楼主博客真好

2015-03-28 11:20:02.0

真不错

Stat 2015-01-28 23:16:17.0

谢谢分享

peyton 2014-10-17 14:13:58.0

此例子不支持WP手机,需要做WAP页面的,请注意不要使用此插件了,尤其是Lumia手机哦,详情在http://blog.mobiscroll.com/where-is-the-windows-phone-support/页面有解释

herman 2014-10-10 11:23:22.0

你的例子不兼容window phone,并且对于iPhone键盘这一块也有bug,不知道你留意了没有。

2014-09-10 18:23:19.0

大神,jQuery mobile 怎么访问webService?

黑帝斯 2014-07-30 10:20:09.0

向你的共享精神致敬!

Warren 2014-05-28 17:17:20.0

@罗玮 如果是用jqm的ajax跳转的话,那要保证每个有iscroll页面的scroll对象都是“独有”的,而且绑定的div的ID不能一样。如果不是ajax跳转的话,就不需要了,因为dom中没有其他页面的缓存。

魏翼超然 2014-05-23 17:49:12.0

我也是遇到和@罗玮一样的问题,希望博主回答。一直关注等回答,谢谢

罗玮 2014-05-10 15:58:24.0

想问一下,当一个有上拉/下拉刷新的页面goto到另外一个有上拉/下拉刷新页面的时候,第二个页面的上拉/下拉刷新效果出不来要,刷新页面才出来,刷新后再跳回去的话,第一个页面的效果又出不来了,这是什么原因

艺小晨 2014-04-18 10:07:58.0

太感谢了 刚接触 是很好的教材

蓝天 2014-03-25 20:08:41.0

谢谢分享。

Anthony 2014-03-15 00:44:39.0

感谢分享

Devis 2014-02-14 10:28:16.0

很好的例子啊! 感谢楼主~

Jude 2013-12-22 22:28:29.0

谢谢博主的分享,有个问题请教下,在点击一个Button的时候能否将弹出框显示在紧接着button的下方

sara 2013-12-06 11:09:36.0

谢谢~~真的很适合学习!

pthill 2013-10-09 11:23:39.0

谢谢,资料来的太及时了。

lovefishs 2013-09-17 10:35:09.0

楼主大好人,谢谢!

micha 2013-07-03 16:34:51.0

找到一个学习的地方

分享按钮