Skip to content

Commit b96f701

Browse files
dabengdabeng
committed
upload responsive design demo
1 parent 38d9cff commit b96f701

File tree

1 file changed

+80
-0
lines changed

1 file changed

+80
-0
lines changed

‎demo/responsive-design.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Organization Chart Plugin</title>
6+
<link rel="icon" href="img/logo.png">
7+
<link rel="stylesheet" href="css/font-awesome.min.css">
8+
<link rel="stylesheet" href="css/jquery.orgchart.css">
9+
<link rel="stylesheet" href="css/style.css">
10+
<style type="text/css">
11+
#chart-container { height: 620px; }
12+
.orgchart { background: white; }
13+
</style>
14+
</head>
15+
<body>
16+
<div id="chart-container"></div>
17+
18+
<script type="text/javascript" src="js/jquery.min.js"></script>
19+
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
20+
<script type="text/javascript">
21+
$(function() {
22+
23+
var datascource = {
24+
'name': 'Lao Lao',
25+
'title': 'general manager',
26+
'children': [
27+
{ 'name': 'Bo Miao', 'title': 'department manager' },
28+
{ 'name': 'Su Miao', 'title': 'department manager',
29+
'children': [
30+
{ 'name': 'Tie Hua', 'title': 'senior engineer' },
31+
{ 'name': 'Hei Hei', 'title': 'senior engineer',
32+
'children': [
33+
{ 'name': 'Pang Pang', 'title': 'engineer' },
34+
{ 'name': 'Dan Dan', 'title': 'UE engineer' ,
35+
'children': [
36+
{ 'name': 'Er Dan', 'title': 'engineer' },
37+
{ 'name': 'San Dan', 'title': 'engineer',
38+
'children': [
39+
{ 'name': 'Si Dan', 'title': 'intern' },
40+
{ 'name': 'Wu Dan', 'title': 'intern' }
41+
]
42+
}
43+
]}
44+
]
45+
}
46+
]
47+
},
48+
{ 'name': 'Hong Miao', 'title': 'department manager' },
49+
{ 'name': 'Chun Miao', 'title': 'department manager',
50+
'children': [
51+
{ 'name': 'Bing Qin', 'title': 'senior engineer' },
52+
{ 'name': 'Yue Yue', 'title': 'senior engineer',
53+
'children': [
54+
{ 'name': 'Er Yue', 'title': 'engineer' },
55+
{ 'name': 'San Yue', 'title': 'UE engineer' }
56+
]
57+
}
58+
]
59+
}
60+
]
61+
};
62+
63+
var oc = $('#chart-container').orgchart({
64+
'data' : datascource,
65+
'nodeContent': 'title',
66+
});
67+
68+
$(window).resize(function() {
69+
var width = $(window).width();
70+
if(width > 576) {
71+
oc.init({'verticalLevel': undefined});
72+
} else {
73+
oc.init({'verticalLevel': 2});
74+
}
75+
});
76+
77+
});
78+
</script>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)