扩展 jq 对象方法

Posted 2020-10-30 hhj3645

 //扩展Jquery对象方法
    $.fn.extend({
        //proTree树结构
        amTree: function (opts) {
            var Tree = function (element, opts) {
                this.element = element;
                //json数组
                this.JSONArr = opts.arr;
                //没有下级时的图标
                this.simIcon = opts.simIcon || "icon iconfont icon-qrcode";
                //树展开时图标
                this.mouIconOpen = opts.mouIconOpen || "icon iconfont icon-reduce";
                //树折叠时图标
                this.mouIconClose = opts.mouIconClose || "icon iconfont icon-zengjia-copy-copy";
                //回调函数
                this.callback = opts.callback || function () { };
                //默认展开的级数
                this.openLevel = opts.openLevel || 0;
                this.rootID = opts.rootID || "00000000-0000-0000-0000-000000000000"
                //初始化
                this.init();
            }
            //初始化事件
            Tree.prototype.init = function () {
                //事件
                this.JSONTreeArr = this.proJSON(this.JSONArr, this.rootID);
                this.treehtml = this.proHTML(this.JSONTreeArr, 0);
                this.element.append(this.treeHTML);
                this.bindEvent();
            }
            //生成树形JSON数据
            Tree.prototype.proJSON = function (oldArr, pid) {
                var newArr = [];
                var self = this;
                $.map(oldArr, function (item) {
                    if (item.pid == pid) {
                        var obj = {
                            id: item.id,
                            name: item.name
                        }
                        var child = self.proJSON(oldArr, item.id);
                        if (child.length > 0) {
                            obj.child = child
                        }
                        newArr.push(obj)
                    }

                })
                return newArr;                
            };
            //生成树形HTML
            Tree.prototype.proHTML = function (arr, lv) {
                var self = this;
                var ulHtml = "<ul class=‘treeUl tree‘ " + ((lv <= self.openLevel) ? "" : "style=‘display:none;‘") + ">";
                $.map(arr, function (item) {
                    var lihtml = "<li>";
                    if (item.child && item.child.length > 0) {
                        var currLv = lv + 1;
                        lihtml += "<i ischek=‘" + ((lv < self.openLevel) ? "true" : "false") + "‘ class=‘" + ((lv < self.openLevel) ? self.mouIconOpen : self.mouIconClose) + "‘ style=‘font-size:16px;‘ ></i>" +
                            "<span id=‘" + item.id + "‘ title=‘" + item.name + "‘>" + item.name + "</span>"
                        var _ul = self.proHTML(item.child, currLv);
                        lihtml += _ul + "</li>";
                    } else {
                        lihtml += "<i class=‘" + self.simIcon +" "+ "lay-bg" + "‘></i>" +
                            "<span id=‘" + item.id + "‘ title=‘" + item.name + "‘>" + item.name + "</span>";
                    }
                    ulHtml += lihtml;
                })
                ulHtml += "</ul>";
                return ulHtml;
            }
            Tree.prototype.bindEvent = function () {
                var self = this;
                this.element.find(".treeUl li i").click(function () {
                    var ischek = $(this).attr("ischek");
                    if (ischek == ‘true‘) {
                        var treeUl = $(this).closest("li").children(".treeUl");
                        $(this).removeClass(self.mouIconOpen).addClass(self.mouIconClose)
                        treeUl.hide();
                        $(this).attr("ischek", ‘false‘);
                    } else if (ischek == ‘false‘) {
                        var treeUl = $(this).closest("li").children(".treeUl");
                        treeUl.show();
                        $(this).removeClass(self.mouIconClose).addClass(self.mouIconOpen)
                        $(this).attr("ischek", ‘true‘)
                    }
                });

                this.element.find(".treeUl li span").click(function () {
                    var id = $(this).attr("id");
                    var name = $(this).text();
                    self.element.find(".treeUl li span").removeClass("curr");
                    $(this).addClass("curr");
                    self.callback(id, name)
                })
            }
            return new Tree($(this), opts)
        }
    });

// 选项卡
$.fn.extend({
                myList: function(opts){
                    var List = function (element, opts) {
                        this.element = element;
                        // 按钮数组
                        this.btnArr = opts.btnArr;
                        // 内容数组
                        this.contentArr = opts.contentArr;
                        // 事件
                        this.oEvent = opts.oEvent || "click";
                        // 回调函数
                        this.callback = opts.callback || function () {}
                        this.init();
                    }
                    List.prototype.init = function () {
                        this.listHtml = this.proHtml(this.btnArr,this.contentArr);
                        this.element.append(this.listHtml);
                        this.bindEvent(this.oEvent);
                    }
                    List.prototype.proHtml = function (btnArr,contentArr) {
                        var olHtml = "<ol class = ‘clearfix‘>";
                        for (var i in btnArr){
                            var btnHtml = "<li>" + btnArr[i] + "</li>"
                            olHtml += btnHtml;
                        }
                        olHtml += "</ol>";
                        var listHtml = olHtml;
                        var ulHtml = "<ul class = ‘clearfix‘>";
                        for (var i in contentArr){
                            var conHtml = "<li>" + contentArr[i] + "</li>"
                            ulHtml += conHtml;
                        }
                        ulHtml += "</ul>";
                        listHtml += ulHtml;
                        return listHtml;
                    }
                    List.prototype.bindEvent = function (oEvent) {
                        var self = this;
                        self.element.find("ul li").eq(0).css("display","block");
                        if (oEvent == ‘click‘){
                            self.element.find("ol li").click(function () {
                                self.element.find("ul li").eq($(this).index()).show().siblings().hide();
                                self.callback();
                            })
                        }
                        if (oEvent == ‘hover‘){
                            self.element.find("ol li").hover(function () {
                                self.element.find("ul li").eq($(this).index()).show().siblings().hide();
                                self.callback();
                            })
                        }
                    }
                    return new List($(this),opts);
                }
            })

            $(function() {
                $(".list").myList({
                    btnArr: ["选项1","选项2","选项3"],
                    contentArr: ["内容一","内容二","内容三"],
                    oEvent: "hover"
                });

                $(".tfboys").myList({
                    btnArr: ["王俊凯","王源","易烊千玺"],
                    contentArr: ["王俊凯有驾照了","源源很刚","千玺酷酷哒"],
                    callback: function () {

                    }
                });
            })