分类: 前端技术预览模式: 普通 | 列表

jQuery Mobile + PhoneGap 简单记事本

一个jQuery Mobile + PhoneGap 简单记事本小例子,可以到PhoneGap的网站上编译成本地应用。
演示:http://www.uedcool.com/demo/easynote/
下载地址:
下载文件 点击下载此文件

Tags: jQuery Mobile PhoneGap

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

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 | 查看次数: 5144

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