jquery编写插件的方法

编写插件的两种方式:

  1.类级别开发插件(1%)

  2.对象级别开发(99%)

类级别的静态开发就是给jquery添加静态方法,三种方式

  1.添加新的全局函数

  2.使用$.extend(obj)

  3.使用命名空间

类级别开发插件(用的非常少,1%)

  分别举例:

//1.直接给jquer添加全局函数
jQuery.myAlert=function (str) {
    alert(str);
};

//2.用extend()方法。extend是jquery提供的一个方法,把多个对象合并起来,参数是object
jQuery.extend({
    myAlert2:function (str1) {
        alert(str1);
    },
    myAlert3:function () {
        alert(11111);
    }
});

//一定要注意两种类级别编写插件方式书写的区别。

//3.使用命名空间(如果不使用命名空间容易和其他引入的JS库里面的同名方法冲突)
jQuery.yuqing={
    myAlert4:function (str) {
        alert(str);
    },
    centerWindow:function (obj) {
        obj.css({
            'top':($(window).height()-obj.height())/2,
            'left':($(window).width()-obj.width())/2
        });
        //必须进行返回对象的操作,否则就不能继续往下进行链式操作了。。
        return obj;
    }
};

调用部分:

  //调用自定义插件方法
  $('#btn').click(function () {
      $.myAlert('我是调用jquery编写的插件弹出的警告框');
      $.myAlert2('我是调用jquery的extend()方法编写的插件弹出的警告框');
      $.myAlert3();
      $.yuqing.myAlert4("调用使用了命名空间编写的插件方法");
  });
 $.yuqing.centerWindow($('#div1')).css('background','red');

注意:jquery文件要一并引入。

对象级别开发插件(常用99%)

jquery官方给了一套对象级别开发插件的模板:

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各种参数、各种属性
        };
//options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
var endOptions=$.extend(defaults,options); this.each(function () { //实现功能的代码 }); }; })(jQuery);

模板要点:

1.函数全部放在闭包里,外面的函数就调用不到里面的参数了,比较安全
2.前面加分号,避免不必要的麻烦

举个栗子:

  需求:开发一个插件,要求奇数行颜色是yellow,偶数行颜色是green,鼠标移到的行变为blue,移除变为原来的颜色

   HTML布局:

<table id="tab">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
        <th>体重</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
        <td>178cm</td>
        <td>79kg</td>
    </tr>
    <tr>
        <td>美美</td>
        <td>34</td>
        <td>167cm</td>
        <td>60kg</td>
    </tr>
    <tr>
        <td>小青</td>
        <td>23</td>
        <td>170cm</td>
        <td>55kg</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
        <td>178cm</td>
        <td>79kg</td>
    </tr>
    <tr>
        <td>美美</td>
        <td>34</td>
        <td>167cm</td>
        <td>60kg</td>
    </tr>
    <tr>
        <td>小青</td>
        <td>23</td>
        <td>170cm</td>
        <td>55kg</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
        <td>178cm</td>
        <td>79kg</td>
    </tr>
    <tr>
        <td>美美</td>
        <td>34</td>
        <td>167cm</td>
        <td>60kg</td>
    </tr>
    <tr>
        <td>小青</td>
        <td>23</td>
        <td>170cm</td>
        <td>55kg</td>
    </tr>
</table>
View Code

  css样式

table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid palevioletred;
}
th,td{
    height: 30px;
    text-align: center;
    border: 1px solid deeppink;
}
.evenRow1{background: yellow;}
.oddRow1{background: green;}
.curRow1{background: blue;}
View Code

  jquery调用代码:

$('#tab').table({
    evenRowClass:'evenRow1',
    oddRowClass:'oddRow1',
    curRowClass:'curRow1',
    eventType1:'click'
});

 jquery插件代码:

 1 ;(function ($) {
 2     $.fn.table=function (options) {
 3         var defaults={
 4             //各种参数、各种属性
 5             evenRowClass:'evenRow',
 6             oddRowClass:'oddRow',
 7             curRowClass:'curRow',
 8             eventType1:'mouseover',
 9             eventType2:'mouseout'
10         };
11         
12         var endOptions=$.extend(defaults,options);
13         
14         this.each(function () {
15             var _this = $( this );
16             _this.find('tr:even').addClass(endOptions.evenRowClass);
17             _this.find('tr:odd').addClass(endOptions.oddRowClass);
18 //鼠标移入和移出,但实际开发中不直接使用mouseover这种方法 19 /*$(this).find('tr').mouseover(function () { 20 $(this).addClass(endOptions.curRowClass); 21 }).mouseout(function () { 22 $(this).removeClass(endOptions.curRowClass); 23 });*/ 24 25 //实际开发中要用bian()方法绑定 26 //因为用bind()方法绑定非常灵活,事件可以自己定义 27 //mouseover mouseout...事件底层都是用bind()去实现的,mouseout 等只是快捷方式 28 _this.find('tr').bind(endOptions.eventType1,function () { 29 $(this).addClass(endOptions.curRowClass); 30 }); 31 _this.find('tr').bind(endOptions.eventType2,function () { 32 $(this).removeClass(endOptions.curRowClass); 33 }) 34 }); 35 }; 36 })(jQuery);

插件注释:

15行:var _this = this;  变量存储,因为很多地方用到$(this);所以将其存储为变量使用更加的方便,也提高了运行效率。

19-23行与28-33行实现的功能是相同的,但是推荐使用28-33行的写法,使用bian()进行事件的绑定,因为使用会非常的灵活。

可变的地方,如样式名称等最好写在defaults里,方便用户自行配置。

 

再来一个对象级别实现jquery插件的栗子(⊙o⊙)哦!!实现选项卡功能~~

HTML布局

<div id="tab">
    <ul id="nav">
        <li class="active">HTML</li>
        <li>CSS</li>
        <li>JAVASCRIPT</li>
    </ul>
    <div id="cont">
        <div style="display: block;">HTML</div>
        <div>CSS</div>
        <div>JAVASCRIPT</div>
    </div>
</div>

css样式:

* {
    margin: 0;
    padding: 0;
}

#nav li {
    list-style: none;
    float: left;
    height: 25px;
    line-height: 25px;
    border: 1px solid #0000FF;
    border-bottom: none;
    padding: 5px;
    margin: 10px;
    margin-bottom: 0;
}

#cont div {
    width: 210px;
    height: 150px;
    border: 1px solid #0000FF;
    margin-left: 10px;
    clear: both;
    display: none;
}

.active {
    background: #AFEEEE;
}

调用的JS代码

<script type="text/javascript">
    $('#tab').tab({
        tabType: 'mouseover'
    });
</script>

注意哦:不要忘记先引入jquery.js文件喔,然后在引入我们编写的插件tab.js,才能正确调用到tab()方法。。。

插件tab.js

;(function($) {
    $.fn.tab = function(options) {
        var defaults = {
            tabActiveClass: 'active',
            tabNav: '#nav>li',
            tabCont: '#cont>div',
            tabType: 'click'
        };

        var endOptions = $.extend(defaults, options);
        $(this).each(function() {
            var _this = $(this);
            _this.find(endOptions.tabNav).bind(endOptions.tabType, function() {
                $(this).addClass(endOptions.tabActiveClass).siblings().removeClass(endOptions.tabActiveClass);
                var index = $(this).index();
                _this.find(endOptions.tabCont).eq(index).show().siblings().hide();
            });
        });
    };
})(jQuery);

这个小栗子和上一个表格插件的栗子相似度是很高的,多敲几遍,理解意思,其实jquery扩展插件并不难哦~~

 

如有不对的地方,还请各路大神赐教!

 

什么是成功?就是所有失败的路都走过了,只剩下一条路还没有走,这条路就叫成功!
posted @ 2016-08-28 08:58  晴晴加油  阅读(12844)  评论(12编辑  收藏  举报