html+css+jQuery文件展示特效树形菜单
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div class="innerUl"></div>
4、书写css代码。
<style>
* { padding: 0; margin: 0; font-family: "microsoft yahei"; }
ul li { list-style-type: none; }
.box { width: 200px; }
ul { margin-left: 20px; }
.menuUl li { margin: 10px 0; }
.menuUl li span:hover { text-decoration: underline; cursor: pointer; }
.menuUl li i { width:16px; height:16px; display:inline-block; margin-right: 10px; top: 0px; cursor: pointer; color: #161616;}
.fa-file-o{ background:url(c1.jpg) no-repeat center center !important;}
Ul li:first-child i {background:url(c2.jpg) no-repeat center center;}
</style>
5、书写并添加js代码。
<script src="js/jquery.min.js"></script>
<script src="js/proTree.js" ></script>
<script>
var arr = [{
id: 1,
name: "一级标题",
pid: 0
}, {
id: 2,
name: "二级标题",
pid: 0
}, {
id: 3,
name: "2.1级标题",
pid: 2
}, {
id: 4,
name: "2.2级标题",
pid: 2
}, {
id: 5,
name: "1.1级标题",
pid: 1
}, {
id: 6,
name: "1.2级标题",
pid: 1
}, {
id: 7,
name: "1.21级标题",
pid: 6
}, {
id: 8,
name: "三级标题",
pid: 0
}, {
id: 9,
name: "1.22级标题",
pid: 6
}, {
id: 10,
name: "1.221级标题",
pid: 9
}, {
id: 11,
name: "1.2211级标题",
pid: 10
}, {
id: 12,
name: "1.2212级标题",
pid: 10
}
];
$(".innerUl").ProTree({
arr: arr,
simIcon: "fa fa-file-o",
mouIconOpen: "fa fa-folder-open-o",
mouIconClose:"fa fa-folder-o",
callback: function(id,name) {
alert("你选择的id是" + id + "，名字是" + name);
}
})
</script>
6、书写proTree.js代码。
(function($) {
var Tree = function(element, options) {
this.element = element;
this.JSONArr = options.arr;
this.simIcon = options.simIcon || "";
this.mouIconOpen = options.mouIconOpen || "fa fa-folder-open-o";
this.mouIconClose = options.mouIconClose || "fa fa-folder-o";
this.callback = options.callback || function() {};
this.init();
}
Tree.prototype.init = function() {
this.JSONTreeArr = this.proJSON(this.JSONArr, 0);
this.treeHTML = this.proHTML(this.JSONTreeArr);
this.element.append(this.treeHTML);
this.bindEvent();
}
Tree.prototype.proJSON = function(oldArr, pid) {
var newArr = [];
var self = this;
oldArr.map(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;
};
Tree.prototype.proHTML = function(arr) {
var ulHtml = "<ul class='menuUl'>";
var self = this;
arr.map(function(item) {
var lihtml = "<li>";
if(item.child && item.child.length > 0) {
lihtml += "<i ischek='true' class='" + self.mouIconOpen + "'></i>" +
"<span id='" + item.id + "'>" + item.name + "</span>"
var _ul = self.proHTML(item.child);
lihtml += _ul + "</li>";
} else {
lihtml += "<i class='" + self.simIcon + "'></i>" +
"<span id='" + item.id + "'>" + item.name + "</span>";
}
ulHtml += lihtml;
})
ulHtml += "</ul>";
return ulHtml;
}
Tree.prototype.bindEvent = function() {
var self = this;
this.element.find(".menuUl li i").click(function() {
var ischek = $(this).attr("ischek");
if(ischek == 'true') {
var menuUl = $(this).closest("li").children(".menuUl");
$(this).removeClass(self.mouIconOpen).addClass(self.mouIconClose)
menuUl.hide();
$(this).attr("ischek", 'false');
} else if(ischek == 'false') {
var menuUl = $(this).closest("li").children(".menuUl");
menuUl.show();
$(this).removeClass(self.mouIconClose).addClass(self.mouIconOpen)
$(this).attr("ischek", 'true')
}
});
this.element.find(".menuUl li span").click(function() {
var id = $(this).attr("id");
var name = $(this).text();
self.callback(id, name)
})
}
$.fn.extend({
ProTree: function(options) {
return new Tree($(this), options)
}
})
})(jQuery);
7、代码整体结构。
8、查看效果。
