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