扩展 jq 对象方法

Posted hhj3645

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了扩展 jq 对象方法相关的知识,希望对你有一定的参考价值。

 //扩展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 () { } }); })

 

 

 

以上是关于扩展 jq 对象方法的主要内容,如果未能解决你的问题,请参考以下文章

JQ在光标处插入文字

JQ插件机制

JS和JQ的总结:对象

JQ fn扩展方法

jQ选择器学习片段(JavaScript 部分对应)

JQ的核心原理以及扩展等