预览模式: 普通 | 列表

CSS3实现层叠效果-(box-shadow应用)


如果你也想实现这样的一个层叠纸张的效果,不妨试试这样写:
程序代码 程序代码
<style>
.content {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15), 0 4px 0 -3px #FFFFFF, 0 4px 0 -2px #BEC2C8, 0 8px 0 -5px #FFFFFF, 0 8px 0 -4px #BEC2C8;

查看更多...

Tags: box-shadow 层叠效果

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

jQuery Mobile 1.2 弹出框(Popups)预览(1)


在待发布的1.2版本中正如在官方博客中提到的增加了弹出框部件(Popups),这个部件和对话框(Dialog)部件的不同之处就是在当前页面来创建一个真正的弹出层来展示不同形态的信息,而不是通过跳转到一个新的页面来模拟弹出窗口的效果。这样我们将会有更多的空间来设计我们的应用交互效果。
创建一个弹出窗口部件
这个部件的实现方式和Dialog部件有些类似,同样包含两个部分来实现:
第一部分:触发元素的data-rel定义(data-rel=’popup’)和href中定义弹出层的id(和Dialog不同的是href中这能定义当前页面中的一个div层,而dialog则需要定义一个URL或者是当前页面中的一个page)

查看更多...

Tags: jQuery Mobile 1.2 弹出框 Popups

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

jQuery Mobile + PhoneGap 简单记事本

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

Tags: jQuery Mobile PhoneGap

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

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

jQuery Mobile 1.0 BETA 3 强制缓存

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

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

如下:

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

 

查看更多...

Tags: jQueryMobile 缓存

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

jQuery Mobile 1.0 BETA 3 页面预加载

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

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

例如:

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

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

查看更多...

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

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

方法

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

$.mobile.changePage (method)

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

参数:

查看更多...

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

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