jQuery是一个广泛使用的JavaScript库,用于HTML文档遍历、处理以及事件处理。它已经成为现今Web开发中不可或缺的重要工具。
一个比较有价值的jQuery插件是人员关系图插件,它可以帮助我们轻松地在网页中展示公司或组织的架构关系。下面是一个简单的例子,展示如何使用这个插件:
<!DOCTYPE html>
<html>
<head>
<title>人员关系图</title>
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="jquery.orgchart.css">
</head>
<body>
<div id="chart-container"></div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.orgchart.min.js"></script>
<script>
$(function() {
$('#chart-container').orgchart({
'data' : {'name': 'Jack',
'children': [
{'name': 'Bob', 'title': 'Manager'},
{'name': 'Peter', 'title': 'Manager'},
{'name': 'John', 'title': 'Manager'},
{'name': 'Tony', 'title': 'Manager'}
]
},
'nodeContent': 'title'
});
});
</script>
</body>
</html>
在上面的例子中,我们首先在
中引入了两个CSS文件,一个是jQuery Mobile的样式文件,另一个是人员关系图插件的样式文件。随后在中插入一个,用于展示人员关系图。最后在