关于jQuery写插件及其演示

来源：互联网发布：2017东南大学软件学院编辑：程序博客网时间：2024/04/30 09:37

关于写jQuery插件是很有必要的，这是前端学习当中必须经过的一个过程

对于初次写插件先想清楚原理
(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);

这是一个基础的模板

其中的var options = $.extend(defaults, options);

1.$.extend()方法

$.extend()方法在JQuery中有两个用法，第一次是扩展方法，

第二个方法是

jQuery.extend([deep], target, object1, [objectN])

返回值:Object

把2个对象合并得到新的target,deep是可选的（递归合并）

合并 settings 和 options，修改并返回 settings。

jQuery 代码:

var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };jQuery.extend(settings, options);

结果:

settings == { validate: true, limit: 5, name: "bar" }

描述:

合并 defaults 和 options, 不修改 defaults。

jQuery 代码:

var empty = {};var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(empty, defaults, options);

结果:

settings == { validate: true, limit: 5, name: "bar" }empty == { validate: true, limit: 5, name: "bar" }

2中扩展：

第一种，看代码

view source
print?
$(function(){
jQuery.extend({
modalshow: function (options) {
var defaults = {
triggerID: 'LoginShow',
callback: function () { }
}<br>　　　　　　　//这里是$.extend的第二种用法<br>　　　　　　　var opts = $.extend({},defaults, options);
if ($("#" + opts.triggerID)[0] == null) {
var $triggerBTN = $('<input type="button" value="LoginShow" id=' + opts.triggerID + '/>');
$triggerBTN.bind("click", function () {
alert(opts.triggerID);
});
$("body").append($triggerBTN);
} else {
$("#" + opts.triggerID).bind("click", function () {
alert(opts.triggerID);
})
}
}
});
$.modalshow();//这里是调用的地方,id为'loginshow'的button可以先不再HTML中添加可以自动生成
})

第二种扩展

view source
print?
$(function(){
jQuery.fn.extend({
modalshow: function (options) {
var defaults = {
//这里的this是JQuery对象
triggerID: this.attr("id"),
callback: function () { }
}<br>　　　　　　 //这里是$.extend的第二种用法<br>　　　　　　 var opts = $.extend(defaults, options);
$("#" + opts.triggerID).bind("click", function () {
alert(opts.triggerID);
})
}
});
$("#loginShow").modalshow();//这里是调用的地方，这里需要先在HTML中加入元素
})

我在这里写了一个比较完整的插件是关于选项卡的
//这个是html文件  我写的插件时引入的Tab.js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题</title>
<style type="text/css">
     *{
      padding:0px;
      margin: 0px; 
     }
     .clear{
      clear: both;
     }
     .menu li{
      float: left;
      width: 100px;
      height: 30px;
      line-height: 30px;
      border:1px solid #ccc;
      border-bottom: 5px solid #ccc;;


     }
     .main{
      margin-top: 0px;
      width: 406px;
      height: 206px;
      overflow: hidden;
     }
     .main div{
         width: 403px;
         height: 200px;
         line-height: 200px;
         text-align: center;
         border:1px solid #000; 
     }
     .menu .on{
      border-bottom: 6px solid red;
     }
</style>
<script type="text/javascript" src="Jquery.js"></script>
    <script type="text/javascript" src="Tab.js"></script>
</head>
<body>
<div class="tabs">
<ul class="menu">
<li class="on">111</li>
<li>222</li>
<li>333</li>
<div class="clear"></div>
</ul>
<div class="main">
<div class="tab">AAA</div>
<div class="tab">BBB</div>
<div class="tab">CCC</div>
</div>
</div>


<script type="text/javascript">
$(document).ready(function() {
$('.tabs').myTab({
operate:'mouseover',
auto:false,
time:1000,
delay:true,
delaytime:0
})
        //利用闭包的原理，对于myTab函数中的一些元素进行初始化
});
</script>
</body>
</html>







//下面的是Tab.js文件注释我写的比前清楚了




/***
 * 标题：选项卡插件
 * 编写时间：2015年7月14号
 * 作者：Helios
 * 邮箱：67487158@qq.com
***/








;(function($){
$.fn.myTab=function(options){
return this.each(function(){
var defaults={
operate: 'click',
                auto: true,
                time: 4000,
                delay: true,
                delayTime: 500
}


var opts = $.extend(defaults, options),  //这里面两个参数的顺序不能改变，因为后面的那个时不会被覆盖掉的
//$.extend(defaults, options);表示的是如果options中的参数总是有值的话，那么options中的值将会代替defaults中的值
//如果options参数传入的值为空，那么就可以使用默认设置的值。
   self = $(this),  //获取当前的tabs
   items = self.children('ul.menu').children('li'),   //获取上面的是那三个
   tabBox = self.children('div.main'),  //获取到了main这个节点
   tabBoxItems = tabBox.children('div'),  // 获取mian下面的div
   timer;   //设置了一个定时器


var tabHandle = function(index){   //这是进行函数对选中的li和对应的div进行变换
items.siblings('li').removeClass('on').end().eq(index).addClass('on');
tabBoxItems.siblings().hide().end().eq(index).show();
//end()函数的用法，就是结束对当前节点的操作继续对以前的那个节点继续操作
},


  delay = function(elem){  //这个延时函数
  opts.delay ? setTimeout(function(){tabHandle(elem);},opts.delaytime) :tabHandle(elem); 
},
  start = function(){   //开始函数  如果参数设置了自动  就执行下面的第二行代码，如果没有设置的话就开启了定时器
  if(!opts.auto) return ;
  setInterval(autoRun,opts.time);


},
  autoRun =function(){   //自动播放函数
  var on = self.find('li.on'),    //获取当前on所在的li
  firstItem = items.eq(0),//设置默认第一个li
  len = items.length,  //
  index = on.index()+1,
  item = index ===len ? firstItem : on.next('li'),   //当前的索引如果等于li的总长度就返回默认的第一个，如果不是就是下一个
  i = index ===len ? 0 : index;   //   如果播放到了最后一个就跳转到第一个




  on.removeClass('on');    //移除当前li上面的样式
  item.addClass('on');  //把该选中的增加样式
  tabBoxItems.siblings().hide().end().eq(index).show();  // 更换div中的内容  和tabHandle 执行一样的操作


}
//bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
//第一个参数传递事件，第二个参数还改事件对应的函数
items.bind(opts.operate, function () {
                var index = items.index($(this));
                delay(index)
            });


            if (opts.auto) {  //如果设置了auto的话判断成功
                start();
                self.hover(function () {      
                    clearInterval(timer);
                    timer = undefined;
                }, function () {
                    start();
                })
            }
})
}
})(jQuery);

0 0