//扩展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 () { } }); })
原文地址:https://www.cnblogs.com/hhj3645/p/8807434.html
时间: 2024-10-30 00:18:34