jQuery扩展

Posted 2020-11-19 smilesunday

一、jQuery.fn.extend()与jQuery.extend()

jQuery.fn如何扩展。

jQuery插件 $.fn(object)与$.extend(object)

jQuery提供了两个方法帮助开发插件

• $.extend(object);扩展jQuery类本身；
• $.fn.extend(object);扩展jQuery对象；

1、扩展对象

$.fn 等于 $.prototype；这样就好理解了，就好比对String.porotype增加一个函数，然后所有的字符串对象都能够直接调用， 
jQuery也是如果。给jQuery增加一个函数，然后所有的jQuery对象都能够调用。jQuery对象就是$("#id")或 
$(document.getElementById("Id"))这些;
在写法上可以
$.fn或$.fn.extend({})

//扩展jQuery对象；$.fn.extend({})
        $.fn.modify = function () {
            $(this).val(‘********‘).css(‘color‘, ‘yellow‘);
        }
        $.fn.extend({
            clear: function () {
                $(this).val(‘‘);
            }
        });

 

2、扩展jQuery对象本身

我们知道$就是jQuery对象。所以
$.extend其实就是扩展"jQuery"这个对象本身的函数。实际上相当于你创建了一个object对象,然后object.abc = function(){}

//扩展jQuery类本身
        $.modify = function (obj) {
            obj.val(‘********‘).css(‘color‘, ‘blue‘);
        }
        $.extend({
            clear: function (obj) {
                obj.val(‘‘);
            }
        });

调用：

$("#txt").focus(function () {
            // $(this).clear(); 使用jQuery对象扩展的方法
            $.modify($("#txt")); //使用扩展jQuery类本身的方法
        });

3、扩展一个对象

var menu = (function (window, undefined) {
    var id = "tab_menu";
    var This;
    var $menu = $("#" + id);
    var Menu = function () {
        This = this;
        this.Init.apply(this, arguments);
    }
    Menu.prototype.BindMenu = function () {
        /*为选项卡绑定右键*/
        $(".tabs li").on(‘contextmenu‘, function (e) {
            /*选中当前触发事件的选项卡 */
            var subtitle = $(this).text();
            $(‘#mainTab‘).tabs(‘select‘, subtitle);
            //显示快捷菜单
            $(‘#tab_menu‘).menu(‘show‘, {
                left: e.pageX,
                top: e.pageY
            });
            return false;
        });
    };
    Menu.prototype.Init = function () {
        $menu.menu({
            onClick: function (item) {
                var currTab = tab.GetCurrTab();
                if (item.id === "tab_menu-tabrefresh") {
                    //刷新
                    tab.Refresh();
                } else if (item.id === "tab_menu-openFrame") {
                    //在新窗口打开该标签
                    window.open(currTab.ref);
                } else if (item.id === "tab_menu-openFrame2") {
                    //在新Tab打开该标签
                    tab.Add({ id: currTab.id, title: currTab.id, ref: currTab.ref.replace(‘/‘, ‘%‘) });
                } else if (item.id === "tab_menu-tabcloseall") {
                    //全部关闭
                    tab.RemoveAll();
                } else if (item.id === "tab_menu-tabcloseother") {
                    //关闭除当前之外的TAB
                    tab.RemoveOthers();
                } else if (item.id === "tab_menu-tabcloseleft") {
                    //关闭当前左侧的TAB
                    var prevall = $(‘.tabs-selected‘).prevAll();
                    if (prevall.length === 0) {
                        return false;
                    }
                    prevall.each(function (i, n) {
                        if ($(‘a.tabs-close‘, $(n)).length > 0) {
                            //var t = $(‘a:eq(0) span‘, $(n)).text();
                            var t = $(n).index();
                            $(‘#mainTab‘).tabs(‘close‘, t);
                        }
                    });
                    return false;
                } else if (item.id === "tab_menu-tabcloseright") {
                    //关闭当前右侧的TAB
                    var nextall = $(‘.tabs-selected‘).nextAll();
                    if (nextall.length === 0) {
                        return false;
                    }
                    nextall.each(function (i, n) {
                        if ($(‘a.tabs-close‘, $(n)).length > 0) {
                            var t = $(n).index();
                            //  var t = $(‘a:eq(0) span‘, $(n)).text();
                            $(‘#mainTab‘).tabs(‘close‘, t);
                        }
                    });
                    return false;
                } else if (item.id === "tab_menu-tabclose") {
                    //关闭当前
                    tab.Remove(currTab.id);
                }
            }
        });
    };

    return new Menu();
})(window);

菜单的扩展

调用：

 //右击菜单绑定
    menu.BindMenu();