读<jQuery 权威指南>[5]-插件
一、说明
jQuery插件官网:http://plugins.jquery.com/
使用插件时引用顺序:插件引用要位于主jquery库之后。
二、插件应用实例
演示插件jquery.validate.js的使用方法:
①引用jQuery主库和validate插件。
注意:
- jQuery主库要先于插件引用;
- 如果想显示中文错误提示,还需要引用jquery.validate.messages_cn.js。
<script type="text/javascript" src="Jscript/jquery-1.4.2.js"> </script> <script type="text/javascript" src="Js-7-1/jquery.validate.js"> </script> <script type="text/javascript" src="Js-7-1/jquery.validate.messages_cn.js"> </script>
<form id="frmV" method="get" action="#"> <div class="divFrame"> <div class="divTitle"> 请输入下列资料 </div> <div class="divContent"> <div> 标题:<br /> <input id="title" name="title" type="text" class="txt" /> <font color="red">*</font><br /> <span></span> </div> <div> </div> </div> <div class="divBtn"> <input id="sbtUser" type="submit" value="提交" class="btn" /> </div> </div> </form>
②设置验证规则,注意name要与控件对应。
<script type="text/javascript"> $(function() { $("#frmV").validate( { /*自定义验证规则*/ rules: { title: { required: true, minlength: 5,maxlength:18 } }, /*错误提示位置*/ errorPlacement: function(error, element) { error.appendTo(element.siblings("span")); } } ); }) </script>
三、自定义插件
1.插件分类:
- 封装方法插件:对象插件
- 封闭函数插件:类插件
2.插件开发注意事项
①插件命名格式: jquery.[插件名].js;
②所有插件都应该以分号;开头,避免压缩插件之后出现错误;为了保证JQuery的链式写法正确性,插件本身必须返回一个jQuery对象;
③在插件内部,this表示选择器选中的对象,和平时的this含义不太相同;
④为了避免冲突,在编写插件时尽量使用jQuery而不是$符号;
⑤对象级别插件所有方法都依附于jquery.fn主体对象;类级别插件所有方法都依附于jquery对象。
⑥编写对象级别插件是用jQuery.fn.extend()方法进行扩展,编写类级别插件时是用jQuery.extend()方法进行扩展。
2.对象插件示例:
插件功能比较简单,当鼠标经过菜单项时自动切换背景颜色。
首先定义插件jquery.color.js
; (function($) { $.fn.extend({ "focusColor":function (color) { var def_col = "#ccc"; var list_bg = "#fff"; color = (color == undefined )? def_col : color; $(this).find("li").each(function() { $(this).mouseover(function() { $(this).css("background-color", color); }).mouseout(function() { $(this).css("background-color", list_bg); }); }); return $(this); } }); })(jQuery);
调用:
<script type="text/javascript"> $(function() { $("#u1").focusColor("green");//调用自定义的插件 }) </script>
3.类插件示例:
定义类级别插件jquery.calc.js。
;$(function () { $.extend({ "addNum": function (a, b) { a = a || 0; b = b || 0; return parseInt(a) + parseInt(b); } }); })(jQuery);
调用:
<script type="text/javascript"> $(function() { $("#Button1").click(function() { $("#Text3").val( $.addNum($("#Text1").val(), $("#Text2").val())); }); }) </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。