标签归档:jquery

TinyForm

TinyForm 是一个基于jQuery的WEB表单处理工具。他根据传入的选择器或DOM/jQuery对象,创建表单实例,然后在这个范围内搜索带有name属性的表单控件。    

这个工具提供了以下几个接口:

  • 通过任意DOM元素创建表单实例(TinyForm)

  • 可以自定义表单控件选择器

  • 获取表单控件

  • 获取(设置)DOM范围内所有(单个)表单控件的数据

  • 使用标签式设置验证规则以及提示消息

  • 获取(设置)DOM范围内所有(单个)表单控件的验证规则并且进行验证

  • 提供验证回调

  • 重置以及异步提交表单

  • 表单数据的本地存储(localStorage/sessionStorage)

  • 自动保存表单数据

示例地址: http://hyjiacan.oschina.io/tinyform/

阅读全文 TinyForm

jQuery 淡入淡出切换背景图

$(function () {
	var bg = $('.background:first');
	// 背景更换间隔
    var interval = 3000;
    // 当前背景索引
	var index = 0;
    // 背景透明过渡时长(不透明->透明->不透明 总时长)
	var delay = 800;
    
    var imageList = ['1.jpg', '3.jpg', '4.jpg', '2.jpg', '5.jpg']
    var url = 'url("./images/bg/{file}")';
    
    
	setInterval(function () {
		index++;
		if (index >= imageList.length) {
			index = 0;
		}
		bg.animate({
			opacity : 0.6
		}, delay * 0.3, function () {
			bg.css('background-image', url.replace('{file}', imageList[index]));
			setTimeout(function () {
				bg.animate({
					opacity : 1.0
				}, delay * 0.4);
			}, delay * 0.3);
		});
	}, interval);
});

阅读全文 jQuery 淡入淡出切换背景图

jQuery 放大镜效果插件

jQuery 放大镜效果插件

使用 jQuery 写的一个简单的放大镜插件

(jQuery 放大镜插件-新-)jquery.magnifier

目前还不支持修改放大倍数。。 额。。 也就是修改了会直接影响显示效果。
阅读全文 jQuery 放大镜效果插件

jQuery 图片轮播插件

小巧的jQuery图片轮播插件。支持:

  • 自定义图片切换按钮触发事件
  • 自定义图片每次切换后的回调函数
  • 自定义图片切换按钮的样式
  • 设置是否自动切换
  • 自动切换时,每两次切换间隔时长
  • 设置图片切换时显示和隐藏的时长

阅读全文 jQuery 图片轮播插件

jQuery事件 .one()函数

函数原型

.one()

说明:将事件处理函数绑定到元素上。每个元素上的每种事件的处理函数最多只会执行一次。

阅读全文 jQuery事件 .one()函数

jQuery事件 .die()函数

函数原型

.die() (从jquery1.7开始不建议使用,到jquery1.9就移除了)

说明:移除通过.live()预绑定到元素上的事件处理函数。

阅读全文 jQuery事件 .die()函数

jQuery事件 .live()函数

函数原型

.live( events, handler ) (从jquery1.7开始不建议使用,到jquery1.9就移除了)

说明:将事件处理函数绑定到所有与当前选择器匹配的元素上,对现在和将来都有效(注:也就是说对现在存在于DOM中的元素和在执行了此函数后再添加到DOM中的元素都有效)。

阅读全文 jQuery事件 .live()函数

jQuery事件 .unbind()函数

函数原型

.unbind( eventType [, handler ] )

说明:移除预绑定(previously-attached)到元素的事件。
阅读全文 jQuery事件 .unbind()函数

jQuery 事件 .bind() 函数

函数原型:
.bind( eventType [, eventData ], handler )

说明:
给元素的事件绑定处理函数。
阅读全文 jQuery 事件 .bind() 函数

Javascript 简单的JSONP实现

JSONP 是用于执行跨域访问的常用方法。有时候,并不想为了使用JSONP就去引用一个几十K的库,所以。。 本文使用简单的方式,20多行代码实现了一个简单的JSONP。
阅读全文 Javascript 简单的JSONP实现