Skip to content

Commit 3dc11d3

Browse files
iclient9站点头部和导航栏调整。review by zhurch
1 parent 0146162 commit 3dc11d3

File tree

23 files changed

+352
-46
lines changed

23 files changed

+352
-46
lines changed
Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
/**
2-
* iClient3D 示例配置文件:包含示例的分类、名称、缩略图、文件路径
2+
* 3D-WebGL 示例配置文件:包含示例的分类、名称、缩略图、文件路径
33
*/
4+
var identification = {
5+
name: "3D-WebGL"
6+
};
7+
48
var exampleConfig = {
5-
"iClient3D": {
6-
name: "iClient3D",
9+
"3D-WebGL": {
10+
name: "3D-WebGL",
711
content: {
812
"3D": {
913
name: "3D",
@@ -26,14 +30,14 @@ var exampleConfig = {
2630
*不分层
2731
*/
2832
var sideBarIconConfig = {
29-
"iClient3D": "fa-globe"
33+
"3D-WebGL": "fa-globe"
3034
};
3135

3236
/**
33-
*key值:为exampleConfig配置的key值
37+
*key值:为exampleConfig配置的key值
3438
*value值:fontawesome字体icon名
3539
*与sideBarIconConfig的区别:sideBarIconConfig包括侧边栏所有层级目录的图标,exampleIconConfig仅包括一级标题的图标
3640
*/
3741
var exampleIconConfig = {
38-
"iClient3D": "fa-globe"
42+
"3D-WebGL": "fa-globe"
3943
};
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="../../web/libs/css/adminLTE.min.css">
1111
<link rel="stylesheet" href="../../web/libs/css/skin-blue.min.css">
1212
<link rel="stylesheet" href="../../web/libs/css/blue.css">
13-
<link rel="stylesheet" href="../../web/css/header.css">
13+
<link rel="stylesheet" href="../css/header.css">
1414
<link rel="stylesheet" href="../css/sideBar.css">
1515
<link rel="stylesheet" href="../css/editor.css">
1616
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
@@ -27,7 +27,7 @@
2727
<script type="text/javascript" src="../../web/libs/js/app.min.js"></script>
2828
<script>
2929
$('.wrapper').load('../editor.html', function () {
30-
$('.nav-header').load('../../web/header.html');
30+
$('.nav-header').load('../header.html');
3131
var body = $('body');
3232
body.append("<script type='text/javascript' src='./config.js'><\/script>");
3333
body.append("<script type='text/javascript' src='../js/sidebar.js'><\/script>");
Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="stylesheet" href="../../web/libs/css/adminLTE.min.css">
1212
<link rel="stylesheet" href="../../web/libs/css/skin-blue.min.css">
1313
<link rel="stylesheet" href="../../web/libs/css/blue.css">
14-
<link rel="stylesheet" href="../../web/css/header.css">
14+
<link rel="stylesheet" href="../css/header.css">
1515
<link rel="stylesheet" href="../css/sideBar.css">
1616
<link rel="stylesheet" href="../css/examples.css">
1717
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
@@ -22,13 +22,14 @@
2222
<![endif]-->
2323
</head>
2424
<body class="hold-transition skin-blue sidebar-mini">
25-
<div class="wrapper"></div>
25+
<div class="wrapper" id="webGL3D"></div>
2626
<!-- ./wrapper -->
2727
<script type="text/javascript" src="../js/scrollTo.min.js"></script>
2828
<script type="text/javascript" src="../../web/libs/js/app.min.js"></script>
2929
<script>
3030
$('.wrapper').load('../example.html', function () {
31-
$('.nav-header').load('../../web/header.html');
31+
var header = $('.nav-header');
32+
header.load('../header.html');
3233
var body = $('body');
3334
body.append("<script type='text/javascript' src='./config.js'><\/script>");
3435
body.append("<script type='text/javascript' src='../js/sidebar.js'><\/script>");

examples/css/editor.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ html, body, .wrapper {
3333
#codePane {
3434
height: 100%;
3535
box-shadow: 2px 0px 6px #cccccc;
36+
border-left: 1px solid #e7e7e7;
3637
}
3738

3839
.codePaneTool {
@@ -59,6 +60,7 @@ html, body, .wrapper {
5960

6061
#previewPane {
6162
height: 100%;
63+
border-left: 1px solid #e7e7e7;
6264
}
6365

6466
#innerPage {

examples/css/examples.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
padding: 0 20px;
1616
list-style: none;
1717
overflow: inherit;
18+
border-left: 1px solid #e7e7e7;
1819
}
1920

2021
h3.category-title {

examples/css/header.css

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
.navbar {
2+
font-size: 16px;
3+
}
4+
5+
.navbar .project-title {
6+
text-decoration: none;
7+
vertical-align: middle;
8+
font-family: HiraginoSansGB-W6;
9+
font-size: 24px;
10+
color: #FFFFFF;
11+
letter-spacing: -0.16px;
12+
}
13+
14+
.navbar-nav > li > .dropdown-menu {
15+
margin-top: 2px !important;
16+
}
17+
18+
.navbar #headerMenu {
19+
text-align: center;
20+
margin: 7.5px -15px;
21+
}
22+
23+
.navbar #headerMenu > li > a {
24+
font-family: 'HiraginoSansGB-W6';
25+
font-size: 16px;
26+
color: #FFFFFF;
27+
letter-spacing: -0.1px;
28+
text-decoration: none;
29+
padding: 4px 9px;
30+
border: solid 2px transparent;
31+
border-radius: 4px;
32+
margin-right: 0;
33+
line-height: 20px;
34+
}
35+
36+
.navbar #headerMenu > li > a:hover {
37+
background-color: #3c8dbc;
38+
}
39+
40+
.navbar #headerMenu > .open > a {
41+
background-color: #3c8dbc;
42+
}
43+
44+
.nav_apis_box_li > li:hover {
45+
color: #ffffff;
46+
background-color: #0099cc;
47+
}
48+
49+
.nav_apis_box_li > li {
50+
text-align: center;
51+
font-size: 14px;
52+
height: 30px;
53+
color: #7c7c7c;
54+
border-bottom: 1px solid #e7e7e7;
55+
line-height: 30px;
56+
cursor: pointer;
57+
font-weight: bold;
58+
}
59+
60+
#title {
61+
font-family: 'HiraginoSansGB-W6';
62+
font-size: 24px;
63+
color: #FFFFFF;
64+
letter-spacing: -0.1px;
65+
}
66+
67+
.main-header .sidebar-toggle {
68+
float: left;
69+
background-color: transparent;
70+
background-image: none;
71+
padding: 15px 17px;
72+
font-family: 'fontAwesome';
73+
}
74+
75+
.main-header .sidebar-toggle:before {
76+
content: "\f03b";
77+
}
78+
79+
@media screen and (max-width: 767px) {
80+
#title {
81+
font-size: 18px;
82+
}
83+
}
84+
85+
@media screen and (max-width: 767px) {
86+
.navbar-nav > li > .dropdown-menu {
87+
margin-top: 0 !important;
88+
}
89+
90+
.navbar-brand {
91+
padding: 15px 0;
92+
}
93+
}
94+
95+
@media screen and (max-width: 430px) {
96+
#title {
97+
font-size: 12px;
98+
}
99+
100+
.sidebar-toggle {
101+
padding: 15px 15px !important;
102+
}
103+
}
104+
105+
.navbar-brand {
106+
float: left;
107+
height: 50px;
108+
padding: 15px 15px;
109+
font-size: 18px;
110+
line-height: 20px;
111+
padding-right: 0;
112+
}
113+
114+
#suffix-title {
115+
font-family: 'HiraginoSansGB-W6';
116+
font-size: 16px;
117+
color: #FFFFFF;
118+
}
119+
120+
@media screen and (max-width: 430px){
121+
#suffix-title {
122+
font-size: 12px;
123+
}
124+
}
125+
126+
@media screen and (max-width: 992px) {
127+
.navbar-header {
128+
float: none
129+
}
130+
131+
.navbar-toggle {
132+
display: block;
133+
float: right
134+
}
135+
136+
.navbar-collapse.collapse {
137+
display: none !important;
138+
}
139+
140+
.navbar-collapse {
141+
border-top: 1px solid transparent;
142+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
143+
}
144+
145+
.navbar-nav > li {
146+
float: none;
147+
}
148+
149+
.collapse.in {
150+
display: block !important;
151+
}
152+
}
153+

examples/css/sideBar.css

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.main-sidebar {
22
position: fixed;
3-
border: 1px solid #e7e7e7;
43
}
54

65
.menuTitle a.active {
@@ -11,13 +10,23 @@
1110
background-color: #f2f2f2;
1211
}
1312

14-
.skin-blue .sidebar .second-menu,.skin-blue .sidebar .third-menu{
13+
.skin-blue .sidebar-menu > li.treeview:hover > a {
14+
border-left: 3px solid #999999;
15+
}
16+
17+
.skin-blue .sidebar-menu > li.treeview.active > a {
18+
border-left: 3px solid #999999;
19+
}
20+
21+
.skin-blue .sidebar .second-menu, .skin-blue .sidebar .third-menu {
1522
padding-left: 0;
1623
}
17-
.skin-blue .sidebar .third-menu a{
24+
25+
.skin-blue .sidebar .third-menu a {
1826
padding-left: 30px;
1927
}
20-
.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{
28+
29+
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
2130
padding-top: 0;
2231
}
2332

@@ -36,6 +45,7 @@
3645

3746
.skin-blue .treeview-menu > li > a {
3847
color: #000000;
48+
padding-left: 35px;
3949
}
4050

4151
.skin-blue .sidebar-menu > li > .treeview-menu {
@@ -49,10 +59,10 @@
4959

5060
.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a {
5161
color: #000000;
52-
background: #e9e9e9;
62+
background: #DCDCDC;
5363
border-left-color: #e9e9e9;
5464
}
5565

5666
.skin-blue .treeview-menu > li.active > a, .skin-blue .treeview-menu > li > a:hover {
5767
color: #000000;
58-
}
68+
}

examples/header.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<div class="navbar-header">
2+
<a href="#" class="navbar-brand" id="title">SuperMap iClient 9D</a>
3+
4+
<div class="navbar-brand" id="suffix-title" style="padding-left: 10px"></div>
5+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
6+
aria-expanded="false">
7+
<i class="fa fa-bars"></i>
8+
</button>
9+
</div>
10+
11+
<div class="collapse navbar-collapse navbar-custom-menu" id="navbar-collapse">
12+
13+
<ul class="nav navbar-nav">
14+
<li class="overview-menu" id="headerIndex">
15+
<a href="#" class="center">
16+
首页
17+
</a>
18+
</li>
19+
<li class="guide-menu" id="headerMaps">
20+
<a href="#">
21+
开发指南
22+
</a>
23+
</li>
24+
<li class="dropdown nav-dropdown-menu example-menu">
25+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
26+
示例
27+
<i class="fa fa-sort-down"></i>
28+
</a>
29+
<ul class="dropdown-menu ">
30+
<li><a href="#"><h5>for Leaflet</h5></a></li>
31+
<li><a href="#"><h5>for OpenLayers</h5></a></li>
32+
<li><a href="#"><h5>for MapboxGL</h5></a></li>
33+
<li><a href="#"><h5>3D-WebGL</h5></a></li>
34+
</ul>
35+
</li>
36+
<li class="api-menu" id="headerPricing">
37+
<a href="#">
38+
API
39+
</a>
40+
</li>
41+
<li class="dropdown nav-dropdown-menu download-menu">
42+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
43+
下载
44+
<i class="fa fa-sort-down"></i>
45+
</a>
46+
<ul class="dropdown-menu ">
47+
<li class="build"><a href="#"><h5>在线构建</h5></a></li>
48+
</ul>
49+
</li>
50+
</ul>
51+
</div>
52+
<script type="text/javascript">
53+
$('.example-menu .dropdown-menu li').on('click', function () {
54+
var host = window.location.protocol + "//" + window.location.host + (window.location.port ? "/iClient9" : "");
55+
if (this.innerText.indexOf("WebGL") > 0) {
56+
var typeName3d = this.innerText.replace(/[\-]/g, '');
57+
window.location.href = host + "/examples/" + typeName3d.toLowerCase() + "/examples.html";
58+
}
59+
else {
60+
var typeNameElse = this.innerText.substring(4, this.innerText.length - 1);
61+
window.location.href = host + "/examples/" + typeNameElse.toLowerCase() + "/examples.html";
62+
}
63+
});
64+
$('.download-menu .build').on('click', function () {
65+
var host = window.location.protocol + "//" + window.location.host + (window.location.port ? "/iClient9" : "");
66+
window.location.href = host + "/build/build.html";
67+
});
68+
$('.nav #headerIndex,.navbar-header #title').on('click', function (evt) {
69+
window.location.href = window.location.protocol + "//" + window.location.host + (window.location.port ? "/iClient9/web/index.html" : "");
70+
});
71+
$(document).ready (function () {
72+
var suffixHeader = document.getElementById("suffix-title");
73+
suffixHeader.innerText = "for " + identification.name;
74+
});
75+
76+
</script>

0 commit comments

Comments
 (0)