主页 > 专题教程 > javascript > jquery >
来源:自学PHP网 时间:2018-02-08 10:13 作者: 阅读:次
[导读] 在网上有各种各样的jQuery插件,一个jQuery插件可以实现某项功能,完成某种炫酷的效果。那么,一个jQuery插件是如何开发出来的呢?使用jQuery来编写jQuery插件有2种形式:全局jQuery插件和...
在网上有各种各样的,一个jQuery插件可以实现某项功能,完成某种炫酷的效果。那么,一个jQuery插件是如何开发出来的呢?使用jQuery来编写jQuery插件有2种形式:全局jQuery插件和基于包装集的jQuery插件。 我们直接通过 $.say = function(name){ alert("hello" + name); } 调用全局插件的方法也非常简单: $(function(){ $.say("Tom"); }) 在编写一个jQuery插件的时候,我们还需要考虑以下一些问题:
对于第一个问题,我们在为jQuery插件进行命名的时候,通常都遵循 对于第二个问题,我们可以将 (function($){ //插件在此定义 })(jQuery); 在上面的代码中, 插件编写的第三个问题是参数的问题,假设我们有一个插件,它的参数非常多,其中,只有第一个和最后一个参数的必须的参数,其它参数都是可选的参数,我们需要向下面这样来调用这个插件: // 插件的定义,有8个参数 $.myPlugins = function(p1,p2,p3,p4,p5,p6,p7,p8){ //...... } // 插件的调用 $(function(){ $.myPlugins("value1",null,null,null,null,null,null,null,"value2"); }) 这种调用插件的方法会让使用者崩溃。我们注意观察jQuery中提供的一些方法,例如事件处理中的 bind(type,[data],fn) 这个方法的第二个参数 答案是在jQuery中有一个非常重要的方法: var person1 = {name:"tom",age:29,email:"123@qq.com"} var person2 = {name:"jarry",age:30} $.extend(person1,person2); console.info(person1.name+","+person1.age+","+person1.email); console.info(person2.name+","+person2.age); 执行上面的代码,查看控制台的输出,可以看到下面的输出结果: jarry,30,123@qq.com jarry,30 person1的 如果希望获取被覆盖后的对象, $.extend(p,person1,person2); console.info(person1.name+","+person1.age+","+person1.email); console.info(person2.name+","+person2.age); console.info(p.name+","+p.age+","+p.email); 在jQuery插件的编写中,通常是通过 $.myPlugins = function(p1,options,p2){ //在代码中通过extend方法来完成覆盖 var settings = $.extend({ a2:"value1", a3:"value2", a4:"value3", a5:"value4", a6:"value5", a7:"value6", } ,options || {}) }
$(function(){ $.myPlugins("abc",{ a2:"hello" },"xyz") }) 上面调用插件的方法会将插件的a2参数覆盖为“hello”。 基于包装集的jQuery插件的形式为:
jQuery.fn = jQuery.prototype = { init: function( selector, context ) { //...... } }; 原来 例如编写一个修改文字颜色的jQuery插件。 $.fn.setColor = function(){ this.css("color","#f00"); //基于包装集的函数一定要能够支持链式编程结构 return this; } 注意,在匿名函数的内部, 另外,基于包装集的函数一定要能够支持链式编程结构,所以一定要返回 下面我们将以一个最简单的jQuery幻灯片插件的制作为例子。在这个例子中使用的是基于包装集的jQuery插件。先来看一下这个幻灯片的HTML结构: <div class="slider-warp"> <div> <ul> <li> <img src="images/1.jpg" /> </li> <li> <img src="images/2.jpg" /> </li> <li> <img src="images/3.jpg" /> </li> </ul> </div> <div class="mySlider-arrow"><span class="prev"></span><span class="next"></span></div> </div> 在上面的HTML结构中,幻灯片使用一个 为这个幻灯片添加下面的一些基本的CSS样式。 .slider-warp{ width: 500px; height: 281px; position: relative; overflow: hidden; } .slider-warp ul{ padding: 0px; margin: 0px; position: absolute; } .slider-warp li{ list-style: none; } .slider-warp li img{ display: block; width: 100%; margin: 0px; padding: 0px; } .mySlider-nav{ position: absolute; z-index: 2; bottom: 2px; text-align: center; width: 100%; margin: 5px 0px; } .mySlider-nav span{ display: inline-block; width: 0px; height: 0px; margin: 0 4px; padding: 3px; background: transparent; border-radius: 5px; border: 2px solid white; cursor: pointer; opacity: 0.7; } .mySlider-nav span.active{ background: white; } .mySlider-arrow{ top: 50%; position: absolute; width: 100%; } .mySlider-arrow span{ display: block; width: 32px; height: 32px; right: 15px; position: absolute; margin-top: -16px; overflow: hidden; background: rgba(0,0,0,.2) no-repeat 50% 50%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg=='); background-size: 7px 11px; border-radius: 32px; text-indent: -999em; opacity: .6; transition: opacity .2s; cursor: pointer; } .mySlider-arrow .prev{ left: 15px; transform: rotate(-180deg); } .mySlider-nav p{ display: block; border: 1px solid white; width: 60px; right: 0px; position: absolute; margin: 5px; padding: 2px; bottom: 0px; color: white; font-family: "微软雅黑"; } 接下来我们开始编写插件。首先确定这个幻灯片插件的名称,我们命名为:jquery.mySlider.js。按前面所描述的规范,整个插件应该写在一个闭包中: (function($){ $.fn.mySlider = function(options){ /*...... * |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com