预览模式: 普通 | 列表

touch 事件封装(jQuery插件)

由于项目中需要支持触摸屏设备的操作,编写了一个可以捕获触屏上的常用手势的插件。

这个插件支持触屏点击、触摸保持、向上滑动、向下滑动、向左滑动、向右滑动的事件。满足了常规的触屏交互开发需求。

用法:

   1: $(function(){
   2:     $("#test").touchwipe({
   3:                 min_move_x: 40,
   4:                 min_move_y: 40,
   5:                 wipeLeft: function() {$("#val").append("左,");},
   6:                 wipeRight: function() { $("#val").append("右,");},
   7:                 wipeUp: function() { $("#val").append("上,");},
   8:                 wipeDown: function() { $("#val").append("下,");},
   9:                 wipe:function(){$("#val").append("点击,");},
  10:                 wipehold:function(){$("#val").append("保持,");},
  11:                 preventDefaultEvents: true
  12:         });
  13: });

插件下载:点击下载此文件

分类:前端技术 | 固定链接 | 评论: 6 | 引用: 0 | 查看次数: 17354

jQuery Mobile 1.0 BETA 3 强制缓存

如果我们希望页面可以长期的缓存在DOM序列中,而不使用JQM的DOM管理机制。

如果需要保持所有先前访问的页面在缓存中,需要将页面缓存组件设置为true。

如下:

   1: $.mobile.page.prototype.options.domCache = true;

 

查看更多...

Tags: jQueryMobile 缓存

分类:前端技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5145

jQuery Mobile 1.0 BETA 3 页面预加载

针对移动设备的特性,在开发应用的过程中,我们需要时刻考虑如何去使应用运行的流畅,JQM框架也考虑到了移动设备特殊性,为我们提供了页面预加载的机制,使我们开发的应用拥有更好的用户体验。

当在页面中开启Ajax页面加载方式时,可以通过在页面中需要预加载的链接上设置data-prefetch属性来使JQM以静默的方式来加载该链接引用的页面,由于链接引用的页面被提前载入到当前的DOM中,所以当点击该链接时就会很快的显示这个页面,让操作变得流畅。

例如:

   1: <a href="eddyDemo.html" data-prefetch> ... </a>

只要你愿意,你可以在多个链接上添加data-prefetch属性,这样可以预加载这些链接引用的页面。

查看更多...

分类:前端技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4712

JQUERY MOBILE 1.0 BETA 3 中文基础——方法

方法

在$.mobile对象中JQM开放了一些非常有用的方法和属性,开发人员在开发应用时可以很方便的操控JQM中的元素和对象。

$.mobile.changePage (method)

控制页面跳转,用代码来使这个页面跳转到另一个页面。在点击链接或者提交表单的时候也会被动调用此方法。

参数:

查看更多...

分类:前端技术 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 8491

JQUERY MOBILE 1.0 BETA 3 中文基础——事件

事件

JQM开创性的提供了丰富的事件处理机制,并且耗费了很大的精力将不同设备的事件进行了整合,使开发者不必再为了解决不同设备之间的事件处理差异而耗费时间和精力。

这些事件会根据当前设备的特性来分别使用Touch、mouse或者window事件来匹配当前的设备可用的事件,所有不管是移动设备还是桌面设备的操作都将是可靠的。并且这些事件同样可以使用jQuery中的live()和bind()方法。

注意:使用pageCreate()代替$(document).ready()

在学习jQuery时我们学到了用$(document).ready()来使你的脚本在DOM元素加载完成后才开始执行,但是在JQM中每一页的内容都是通过Ajax来加载的,这样在进行页面转换的时候是无法再次触发$(document).ready()方法的,因此我们需要绑定pageCreate事件来处理页面转换时需要执行的脚本。

Touch(触控)事件

查看更多...

分类:前端技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 7143
配置项

在这个版本中JQM的默认配置项更加的完善了,作为里程碑的版本,配置项中的属性使项目开发更加的灵活可控。

ns:(字符) 默认:””

查看更多...

Tags: jQuery Mobile 1.0 BETA 3 中文基础 配置项

分类:前端技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4740

JQUERY MOBILE 1.0 BETA 3 中文基础——概述

这个版本应该是JQM1.0的API基本趋于稳定的一个版本,这个版本无论是在稳定性还是完善度来说将是JQM的里程碑。

版本特性:

1、pushState:简洁的Ajax地址导航

在HTML5中制定了一个这样的API,可以通过pushState方法的方式来修改URL,而又不会使浏览器刷新(详细请参考History API)。在beta3的版本中JQM已经加入了对history.pushState的支持,使得JQM在支持pushState的浏览器中地址栏内的URL显示相对简洁。JQM在支持HTML5浏览器中将会用history.replaceState()方法来对地址栏中的URL进行重写,使Ajax页面跳转时的地址显示页面的真正路径地址。

pushState是作为JQM的扩展功能使用,因此我们可以使用一个全局属性来设置这个功能的开关。例如:$ mobile.pushStateEnabled = FALSE;

查看更多...

分类:前端技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4429

微博

微博是一个非常有趣的东西,我并非指玩微薄很有趣,而是微博这个产品很微妙,很有意思,尤其是这样一个产品获得这样巨大的成功,其背后的点点滴滴就 显得更加有趣了。 其实只要仔细观察,你会发现微博和博客没有什么关系,从信息结构来看完全是两个不一样的东西。就好像“blog”和“twitter”没有任何关系一样, 之所以被叫做微博那只能说是中文的特色,为了好宣传提高用户认知而已,但其实成了一种误导。(就好像最早的中文微博叫饭否)不过也不得不承认,对于普通用 户来说微博更亲切,而且微博的发布操作和博客很相似。(说实话发东西的话什么不相似?不过用户可能看不到功能,只看得到界面,你告诉他是一样的就是一样 的,说不一样他就相信不一样)

  微博是个啥玩意

  我对微博的看法就是多了一个广场的qzone说说功能,很多社区的用户中心也都有这一个功能,不过往往可能和动态混杂在一起。其实细细思考后会发现 广场真的是微博最大的创新点。就微博的发布和个人中心中的信息结构来看,以前的各种说说、新鲜事、我在干嘛之类的同质功能就已经完全满足了,但是以前都是 为了突出SNS的概念,各种消息都只有关注你的人才能看到,或者是你的好友能看到,在内容和用户关系间没有搭起一个很好的通道和流程。所以从用户中心的角 度来看微博的创新就是做了广场,相对于一些融合了用户动态的话还做了一个提纯,只显示内容不显示动态,从而更专一一些。 不过一些老人家的角度不太和我一样,他们觉得微博是从论坛的基础上而来的。论坛是先有了板块然后在有话题,人与人是通过板块联系起来的。微博是先有人,通 过人与人的关系形成了话题,再形成了板块。仔细想想现在微博中的话题“#xxx#”其实就是一个论坛板块,从论坛的角度看微博就是把信息通过人与人的关系 进行索引,但是还是保留了论坛的板块划分话题的分类方式。

查看更多...

分类:用户体验 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3308