标签归档：JQuery

基于jQuery的上传插件uploadify

发表于 由
5

jQuery Uploadify 是一个强有力的而且可以高度自定义的文件上传插件，它是基于jQuery 和 SWFUpload 来开发的，支持进度条显示，实现的效果非常不错。可以见下图：

从Uploadify 的下载页面上，可以看到当前的版本已经是Uploadify-v3.0.0 (Beta)，但是还是一个Beta版，所以目前来说网站上的文档主要是针对 uploadify v2.14 的。所以这里就不多介绍老版本的文档了，主要说一下Uploadify3.0 的一些用法。

Uploadify 的v3.0 和老版本还是有很大的差别的，虽然从演示上来看基本上一样，但是jquery调用uploadify的时候，一些很重要的参数名字都变了。在演示上的差别，老版本是把按钮的样式放在flash里，而v3.0把按钮的样式和flash 分开了，定义起来更加自由。

下面来说一下v3.0 的使用方法和有哪些参数上变化： 继续阅读 →

jQuery 和 jQueryUI 插件开发的通用框架

发表于 由
4

jQuery插件开发的通用框架：

关于jQuery插件开发中的重要函数可以参考：jQuery插件开发中几个重要的函数 。这里主要介绍一下jQuery开发通用的一个框架：

;(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);

jQueryUI插件开发的通用框架：

jquery.ui.widget.js提供了一个工厂方法来建立小部件的类，签名如下：
$.widget(String name, Options prototype)
调用建立小部件工厂的方法用来建立和与小部件的实例相互作用
除了由原型提供的参数以后，下面默认的方法对每一个实例都是有效的
* destroy(): 从DOM节点删除这个实例
* option(String key[, String value]): 获取或者设置选项
* enable(): 设置disabled选项为false,这取决于实例选项
* disable(): 设置disabled选项为true,这取决于实例选项
每个实例可用的属性：
* options: 当前小部件实例的所有选项，它是由用户提供的所有设置的一个集合
* element: 是包含一个单独DOM节点的jQuery对象, 它可以通过this.element[0]来访问
继续阅读 →

jQuery插件开发中几个重要的函数

发表于 由
7

jQuery.extend(target, [object1], [objectN])
返回值：对象（Object）
描述：合并两个或多个对象的内容到第一个对象
用法：在jQuery1.1.4后改方法新添一个参数 deep
jQuery.extend([deep], target, object1, [objectN])
参数：
deep 如果为true,合并就变成递归的合并
target 被扩展的对象，它将会收到新的属性
object1 一个包含了新增属性的对象，它将被合并到target中
objectN 多个新增的属性的对象
当我们提供两个或多个对象的时候，$.extend() 会把所有的对象都合并到目标对象，如果只提供了一个对象，那说明target对象是被省略了的，在这种情况下，jQuery对象假设自己的就是目标对象。

通过这个函数我们可以给jQuery的命名空间里添加新的函数，记住目标对象（第一个参数）将会被修改，并且会从函数中返回，如果我们想保持原有的对象不变，可以通>过传递一个空对象作为目标：
var object = $.extend({}, object1, object2);
默认的情况$.extend()的合并是不会做递归处理的，如果第一个属性是一个对象或者是以个数组的话，它将会被新的对象中相同的属性完全覆盖，而不是被合并，但是通>过给函数的第一个参数设置为true，可以让对象在合并的时候做递归处理

iPhone手机网站开发的插件jQTouch

发表于 由
21

jQTouch是jQuery的一款插件，可以在iPhone，iPod Touch等设备的Mobile WebKit浏览器上实现一些动画、列表导航、默认应用样式等各种常见UI效果。随着iPhone，iPod Touch等设备的使用日益增多，jQTouch无疑为手机网站的开发减少了很多工作，而且在样式和兼容性方面也得到了很大的提高。

jQTouch官方网站：http://www.jqtouch.com
打开首页即可下载最新的插件包和一些实例代码。下面介绍一下jQTouch的一些简单用法。

开始使用jQTouch

1.  加载插件

首先在页面的头部包含必要的脚本文件和样式文件
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
里面相应的文件都可以在下载的代码包里找到
继续阅读 →

jQuery选择器中空格的注意事项

发表于 由
45

jQuery中选择器中的空格一直都觉得是一个不起眼的小问题，可往往是小问题会给我们的结果带来很大的影响，多一个空格和少一个空格也许会得到截然不同的结果。所以空格问题不容忽视！

首先来解释一下选择器里带空格是什么意思，如果选择器中两个元素之间用空格隔开，则表示为前一个元素的后代元素。比如$(‘div :hidden’)，表示的是div里所有的隐藏元素，这个隐藏元素可以是div的子元素，也可以是div子元素的子元素。如果选择器中没有空格的话，表示一个并且的关系，如果说$(‘div:hidden’)，表示的是所有隐藏的div，这个就和元素的层次没有关系了！

下面看一个实例：HTML代码部分
<div>
<div style="display: none;">aa</div>
<div style="display: none;">bb</div>
<div style="display: none;">cc</div>
<div style="display: none;">dd</div>
</div>
<div style="display: none;">ee</div>
<div style="display: none;">ff</div>

jQuery部分
var $ta = $('.test :hidden'); //带空格的选择器表示class为test的元素中所有隐藏的元素，很明显结果是第一个div里所有的元素
var $tb = $('.test:hidden'); //不带空格的选择器，表示的是class为test并且是隐藏的元素，这里指的是后两个div以及第一个div中的最后一个子元素
alert($ta.length); //输出为4
alert($tb.length); // 输出为3

jQuery选择器中空格问题不容忽视，所以在开发过程中一定要理清思路，看看是否需要加空格。

jQuery EasyUI发布了1.1.2版本

发表于 由
17

今天在jQuery EasyUI 官方网站浏览时，发现EasyUI 的新版本1.1.2已经发布了，这次的升级没有添加新的插件，只是修复了一些bug和对以前的插件做了一些改善，最新的jQuery EasyUI可以到下面的地址下载：
http://jquery-easyui.wikidot.com/download:v112

下面来介绍一下1.1.2版的新特性：
1.1.2版的更新日志：(2010年7月9日)
修复漏洞：
o messager: 当在布局调用show方法，该messager将被阻止。（已解决）
改善：
o datagrid: 添加 validateRow方法，当做编辑的操作时，记住当前编辑行的状态时。
o datagrid: 添加能够创建合并单元格的功能。
o form: 当加载数据时增加了回调函数。
o panel,window,dialog: 增加maximize(最大化),minimize(最小化),restore(还原),collapse(折叠),expand(展开)的方法
o panel,tabs,accordion: 延迟加载功能的支持。
o tabs: 增加getSelected,update,getTab 的方法
o accordion: 增加crud 方法
o linkbutton: 接受一个id选项来设置id属性。
o tree: 加强树节点操作

jQuery EasyUI 投掷(Droppable)用法

发表于 由
3

jQuery EasyUI 的投掷(Droppable)功能在网络是的用处是十分的大的，如果说在给一个容器选择内容时，可以用鼠标拖动来代替原始的提交方式，还有重新给页面布局时也可以用到投掷的方法，大家可以现看一下最终的效果：

实例代码

HTML代码：
<div id="dd" style="width:100px;height:100px;border:1px solid #ccc;"></div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，在$(function(){ }); 里插入下面的代码即可：
$('#dd').droppable(options);

介绍Calendar的具体用法

下面来介绍Calendar的具体用法，首先来看属性： 继续阅读 →

jQuery EasyUI 日历(Calendar)用法

发表于 由
回复

jQuery EasyUI 日历(Calendar)也是从1.1版以后才增加的，下面来看一下日历的效果图

HTML代码：

  1. <div id="cc" style="width:180px;height:180px;"></div>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，在$(function(){ }); 里插入下面的代码即可：

  1. $('#cc').calendar(options);

下面来介绍Calendar的具体用法，首先来看属性： 继续阅读 →

jQuery EasyUI 日期框(DateBox)用法

发表于 由
回复

在jQuery EasyUI的1.1版本以后又添加了几个新的插件，日期框就在其内，在web查询信息的时候经常会用到日期框，下面来看一下jQuery EasyUI的效图：

HTML代码：

  1. <input id="dd" type="text"/>

然后按照《jQuery EasyUI框架使用文档》包含必要文件后，在$(function(){ }); 里插入下面的代码即可：

  1. $('#dd').datebox(options);

jQuery EasyUI日期框需要依存于一下的几个插件：
* calendar（日历）
* validatebox（验证框）

下面来介绍DateBox的具体用法，首先来看属性： 继续阅读 →

jQuery EasyUI发布了1.1.1版本

发表于 由
回复

今天在jQuery EasyUI 官方网站浏览时，发现EasyUI又支持了一些新的特性，比如说日历的功能，往一个容器里拖拽对象等。看来jQuery EasyUI 总是会给我们带来更多的惊喜，这些新的特性随后我会更新到相应的文档中。在最初的《jQuery EasyUI框架使用文档》文档中，我也会不断更新。尽请关注。
最新的jQuery EasyUI可以到下面的地址下载：
http://jquery-easyui.wikidot.com/download:v111

下面来介绍一下1.1版和1.1.1版的新特性：
1.1.1版的更新日志：(2010年6月8日)
修复漏洞：
o form: 不能清除combobox和 combotree组件的值（已解决）
改善：
o tree: 添加一些有用的方法，如 ‘getRoot’,'getChildren’,'update’ 等等。
o datagrid: 添加可编辑功能，提高加载数据的性能。
o datebox: 增加 destroy 方法。
o combobox: 增加 destroy 和 clear 的方法。
o combotree: 增加 destroy 和 clear 的方法。
继续阅读 →