<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery文件树形结构菜单插件 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<style type="text/css">
* {
padding: 0;
margin: 0;
font-family: "microsoft yahei";
}
ul li {
list-style-type: none;
}
.box {
width: 200px;
/*border: 1px solid red;*/
}
ul {
margin-left: 20px;
/*border: 1px solid blue;*/
}
.menuUl li {
margin: 10px 0;
}
.menuUl li span:hover {
text-decoration: underline;
cursor: pointer;
}
.menuUl li i { margin-right: 10px; top: 0px; cursor: pointer; color: #161616; }
</style>
</head>
<body>
<div class="innerUl"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/proTree.js" ></script>
<script type="text/javascript">
//后台传入的 标题列表
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
}
];
//标题的图标是集成bootstrap 的图标 更改 请参考bootstrap的字体图标替换自己想要的图标
$(".innerUl").ProTree({
arr: arr,
simIcon: "glyphicon glyphicon-asterisk",//单个标题字体图标 不传默认glyphicon-file
mouIconOpen: "fa fa-folder-open-o",//含多个标题的打开字体图标 不传默认glyphicon-folder-open
mouIconClose:"fa fa-folder-o",//含多个标题的关闭的字体图标 不传默认glyphicon-folder-close
callback: function(id,name) {
alert("你选择的id是" + id + "，名字是" + name);
}
})
</script>
</body>
</html>
