jQuery插件总结一_jquery format

一、jQuery Easing动画效果扩展插件

使用步骤：

1. 引入Easing JS、CSS文件
2. 设置jQuery动画效果

jQuery.easing.def = “method”;//如：easeOutExpo

jQuery默认动画

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果，使用代码如下：

$(element).slideUp({ 
    duration: 1000,  
    easing: method,  
    complete: callback 
}); 

参数duration：定义动画运动时间，毫秒，其实就是速度，时间越短，运动速度越快。

参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们 是：
linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，
easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine，
 easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，
easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce.

使用jQuery自定义动画函数animate()

jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果，使用代码如下：

$(element).animate({ 
    height:500, 
    width:600 
    },{ 
    easing: 'easeInOutQuad', 
    duration: 500, 
    complete: callback 
});

二、Validation jQuery表单验证插件

使用步骤：

1. 引入Validation.js、metadata.js（支持固定格式解析的插件）、validate.messages_cn.js（中文验证信息库）文件
2. 确定哪个表单被验证

     

调用validate()方法时传递字段的验证规则

$(function() {

$("#testForm").validate({

rules: {

loginName:{

required: true,

minlength: 2

}   ,

password: {

required: true

},

password2: {

equalTo: "input[name=password]"

}

},

messages:{

loginName:{

required:'请输入你的姓名',

......

}

}

});

});

内置的验证规则

说明：

remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数（以字段name为key）传递过去。

某些属性值中的引号不能省略，否则出错。如accept、equalTo等。

remote使用时遇到的问题：添加用户时需要验证用户名是否存在，当添加上一个用户后，在不离开该页面的情况下，再次添加该用户名的用户，validate不能提示该用户已存在，因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加：$().ready(function(){

$.ajaxSetup ({

cache: false //关闭AJAX相应的缓存

}); // 关闭缓存功能

});

添加

修改错误信息提示位置：

修改Jquery validate 的错误提示位置，把错误提示在input内，当获得鼠标焦点的时候清楚提示信息。 
    具体使用方法： 
var validator = $("#myContainerForm").validate({ 
focusCleanup:true,//clear the error message when the error element get focus again. 
onkeyup:false, 
errorPlacement: function(error, element) {  
showErrorMesssgeDiv(error,element); 
   },   
rules:{ 
       name:{ 
              required: true 
       } 
}, 
messages: { 
       name:{ 
              required:populateErrorMessage($("#errorRequiredMessage").val(),               $("#containerNameTitle").val()) 
       }      
} 
});

自定义验证规则

除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的，语法 为：

jQuery.validator.addMethod("name",function,message)

1. 其中:

name为验证规则的名称

function定义验证的规则。参数有?。返回值为?。

message是验证失败时的提示信息。

指定错误提示内容

更改默认的提示内容

jQuery.extend(jQuery.validator.messages, {

required: "必填字段",

remote: "请指定一个不重复的值",

email: "请输入正确格式的电子邮件",

url: "请输入合法的网址",

date: "请输入合法的日期",

dateISO: "请输入合法的日期 (ISO).",

number: "请输入合法的数字",

digits: "只能输入整数",

creditcard: "请输入合法的信用卡号",

equalTo: "请再次输入相同的值",

accept: "请输入拥有合法后缀名的字符串",

maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),

minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),

rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),

range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),

max: jQuery.validator.format("请输入一个最大为 {0} 的值"),

min: jQuery.validator.format("请输入一个最小为 {0} 的值")

});

个别表单改变提示内容（只对当前表单有效）

方法一：

<input type="file" name="parResource"

class="{required: true, accept: 'zip', messages: {required: '请选择文件', accept:'请选择正确的文件'}}">

方法二：

$(function() {

$("#testForm").validate({

messages:{

loginName: {

required: "必选字段2"

},

email: {

required: '必选字段22',

email: "请输入正确格式的电子邮件2"

}

}

});

});

改变错误消息显示样式

指定label.error的样式就可以了，如下：

<style type="text/css">

label.error{

margin-left: 10px;

color: red;

}

</style>

说明：label.error指class为error的label元素，如：<label for="resource" class="error">

三、Flexslider 内容滚动插件

功能：创建各种图片轮播效果、焦点图效果、图文混排滚动效果

Flexslider具有以下特性：
支持滑动和淡入淡出效果。
支持水平、垂直方向滑动。
支持键盘方向键控制。
支持触控滑动。
支持图文混排，支持各种html元素。
自适应屏幕尺寸。
可控制滑动单元个数。
更多选项设置和回调函数。

使用步骤：

HTML
首先在页面head部位载入jquery库文件和Flexslider插件，以及Flexslider所需的基本css样式文件。

然后在body中加入以下HTML代码：

我们使用了.flexslider来包括所有需要滚动的内容元素，然后使用<ul class="slides">这个class非常关键，内部的滚动内容都是针对.slides的，然后在<li>内部加入任意html元素，包括图片和文字。

jQuery
调用Flexslider插件非常简单，使用如下代码：

然后预览网页效果，一个内容切换效果就完成了，当然想要更多个性化设置，flexslider提供了丰富的选项配置以及回调函数绝对可以满足大多数开发者需求。

Flexslider选项设置

四、LightBox 灯箱广告插件

功能：该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片

使用步骤：

1、引入LightBox的js和css文件

2、将a的href属性值设置为要显示图片的url地址，并且为每一个a添加data-rel="lightbox"

3、使用lightbox()方法激活插件

          $(function(){
                $('[data-rel="lightbox"]').lightbox();
           });

4、设置#lightbox等相关属性，添加关闭按钮（.lightbox-close）、左右切换按钮（.lightbox-previous、.lightbox-next）

 

jQuery lightBox插件有一些配置，你可以定义调用它：

在该配置中，您可以定制您的jQuery lightBox插件 

<script type="text/javascript">
    $(function() {
       　$('[data-rel="lightbox"]').lightBox({
    　　　　overlayBgColor:"#fff",//设置显示背景
   　　　　 fixedNavigation:false,//是否显示下一页跟上一页的标签
    　　　　//imageLoading:'images/lightbox-ico-loading.gif',//设置下载图片
    　　　　//imageBtnPrev:'images/lightbox-btn-prev.gif',//设置上一页按钮的图片地址
   　　　　 //imageBtnNext:'images/lightbox-btn-next.gif',//设置下一页按钮的图片地址
    　　　　//imageBtnClose:'images/lightbox-btn-close.gif',//设置关闭按钮的图片地址
   　　　　 //imageBlank:'images/lightbox-blank.gif',//设置空白的图片地址
    　　　　containerBorderSize:10,//设置显示图片边框的宽度
   　　　　 containerResizeSpeed:2000,//设置显示图片的时间
   　　　　 txtImage:"图片:",//定义介绍的文字
    　　　　txtOf:"/",//定义页数中间的字符
  　　　　  keyToClose:"s",//设置关闭图片的快捷键
   　　　　 keyToPrev:"a",//设置上一页的快捷键
   　　　　 keyToNext:"d",//设置下一页的快捷键
  　　　　  //imageArray:"",
   　　　　 activeImage:0,//设置动态显示图片，要用到easing插件
   　　　　 easing:"easeOutElastic",
    　　　　overlayOpacity:0.7//设置背景的透明度  
  　　 });
 });