Skip to content

Commit 562dd4d

Browse files
zhurczhurc
committed
修复站点在线编辑页面若干小问题 review by songyumeng
1 parent 4e42370 commit 562dd4d

File tree

13 files changed

+186
-474
lines changed

13 files changed

+186
-474
lines changed

‎examples/css/examples.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,5 +89,6 @@ h3.category-title {
8989
color: #7d7d7d;
9090
font-size: 13px !important;
9191
text-align: center;
92+
bottom: 0;
9293
}
9394

‎examples/editor.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!--头部-->
2+
<header class="header-wrapper main-header">
3+
4+
<nav class="navbar navbar-static-top">
5+
6+
7+
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
8+
<span class="sr-only"></span>
9+
</a>
10+
<div class="nav-header">
11+
12+
</div>
13+
</nav>
14+
</header>
15+
16+
<!-- 侧边栏 -->
17+
18+
<aside class="sidebar-wrapper main-sidebar">
19+
<!-- sidebar: style can be found in sidebar.less -->
20+
<section class="sidebar" id="sidebar">
21+
<!-- sidebar menu: : style can be found in sidebar.less -->
22+
<ul class="sidebar-menu" id="sidebar-menu">
23+
24+
</ul>
25+
</section>
26+
<!-- /.sidebar -->
27+
</aside>
28+
<!-- 内容区 -->
29+
<div class="content-wrapper edit-container">
30+
31+
<section class="content">
32+
<span class="fa fa-compress" id="showCodeBtn">&nbsp;源码</span>
33+
<div class="pane" id="codePane" style="display: none">
34+
<div class="codePaneTool">
35+
源代码编辑器
36+
<div class="fa fa-play-circle-o editorBtn" id="runBtn" onclick="run()">&nbsp;运行</div>
37+
<div class="fa fa-undo editorBtn" id="resetBtn" onclick="refresh()">&nbsp;重置</div>
38+
</div>
39+
<div id="editor">
40+
41+
</div>
42+
</div>
43+
<div class="col-md-12 pane" id="previewPane">
44+
<!--<iframe id='innerPage' name='innerPage'></iframe>-->
45+
</div>
46+
</section>
47+
48+
</div>
49+

‎examples/example.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!--头部-->
2+
<header class="header-wrapper main-header">
3+
4+
<nav class="navbar navbar-static-top">
5+
6+
7+
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
8+
<span class="sr-only"></span>
9+
</a>
10+
<div class="nav-header">
11+
12+
</div>
13+
</nav>
14+
</header>
15+
16+
<!-- 侧边栏 -->
17+
18+
<aside class="sidebar-wrapper main-sidebar" >
19+
<!-- sidebar: style can be found in sidebar.less -->
20+
<section class="sidebar" id="sidebar">
21+
<!-- sidebar menu: : style can be found in sidebar.less -->
22+
<ul class="sidebar-menu" id="sidebar-menu">
23+
24+
</ul>
25+
</section>
26+
<!-- /.sidebar -->
27+
</aside>
28+
29+
<!-- 内容区 -->
30+
<div class="content-wrapper examples-container">
31+
<ul id="charts-list">
32+
33+
</ul>
34+
</div>
35+
<!-- footer -->
36+
<footer class="main-footer">
37+
<div class="iclient-copyright" id="iclient-footer">版权所有 © 2000-2017 北京超图软件股份有限公司 京ICP备11032883号-8 京公网安备11010502008721 甲测资字11002074
38+
</div>
39+
</footer>

‎examples/iclient3d/editor.html‎

Lines changed: 8 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -22,65 +22,17 @@
2222
<![endif]-->
2323
</head>
2424
<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
25-
26-
<div class="wrapper">
27-
<!--头部-->
28-
<header class="header-wrapper main-header">
29-
30-
<nav class="navbar navbar-static-top">
31-
32-
33-
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
34-
<span class="sr-only"></span>
35-
</a>
36-
<div class="nav-header">
37-
38-
</div>
39-
</nav>
40-
</header>
41-
42-
<!-- 侧边栏 -->
43-
44-
<aside class="sidebar-wrapper main-sidebar">
45-
<!-- sidebar: style can be found in sidebar.less -->
46-
<section class="sidebar" id="sidebar">
47-
<!-- sidebar menu: : style can be found in sidebar.less -->
48-
<ul class="sidebar-menu" id="sidebar-menu">
49-
50-
</ul>
51-
</section>
52-
<!-- /.sidebar -->
53-
</aside>
54-
<!-- 内容区 -->
55-
<div class="content-wrapper edit-container">
56-
57-
<section class="content">
58-
<a class="fa fa-compress" id="showCodeBtn">&nbsp;源码</a>
59-
<div class="pane" id="codePane" style="display: none">
60-
<div class="codePaneTool">
61-
源代码编辑器
62-
<div class="fa fa-play-circle-o editorBtn" id="runBtn" onclick="run()">&nbsp;运行</div>
63-
<div class="fa fa-undo editorBtn" id="resetBtn" onclick="refresh()">&nbsp;重置</div>
64-
</div>
65-
<div id="editor">
66-
67-
</div>
68-
</div>
69-
<div class="col-md-12 pane" id="previewPane">
70-
<iframe id='innerPage' name='innerPage'></iframe>
71-
</div>
72-
</section>
73-
74-
</div>
75-
</div>
25+
<div class="wrapper"></div>
7626
<script type="text/javascript" src="../js/scrollTo.min.js"></script>
77-
7827
<script type="text/javascript" src="../../web/libs/js/app.min.js"></script>
7928
<script>
80-
$('.nav-header').load('../../web/header.html');
29+
$('.wrapper').load('../editor.html', function () {
30+
$('.nav-header').load('../../web/header.html');
31+
var body = $('body');
32+
body.append("<script type='text/javascript' src='./config.js'><\/script>");
33+
body.append("<script type='text/javascript' src='../js/sidebar.js'><\/script>");
34+
body.append("<script type='text/javascript' src='../js/editor.js'><\/script>");
35+
});
8136
</script>
82-
<script type="text/javascript" src="./config.js"></script>
83-
<script type="text/javascript" src="../js/sidebar.js"></script>
84-
<script type="text/javascript" src="../js/editor.js"></script>
8537
</body>
8638
</html>

‎examples/iclient3d/examples.html‎

Lines changed: 8 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -22,59 +22,18 @@
2222
<![endif]-->
2323
</head>
2424
<body class="hold-transition skin-blue sidebar-mini">
25-
26-
<div class="wrapper">
27-
<!--头部-->
28-
<header class="header-wrapper main-header">
29-
30-
<nav class="navbar navbar-static-top">
31-
32-
33-
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
34-
<span class="sr-only"></span>
35-
</a>
36-
<div class="nav-header">
37-
38-
</div>
39-
</nav>
40-
</header>
41-
42-
<!-- 侧边栏 -->
43-
44-
<aside class="sidebar-wrapper main-sidebar" >
45-
<!-- sidebar: style can be found in sidebar.less -->
46-
<section class="sidebar" id="sidebar">
47-
<!-- sidebar menu: : style can be found in sidebar.less -->
48-
<ul class="sidebar-menu" id="sidebar-menu">
49-
50-
</ul>
51-
</section>
52-
<!-- /.sidebar -->
53-
</aside>
54-
55-
<!-- 内容区 -->
56-
<div class="content-wrapper examples-container">
57-
<ul id="charts-list">
58-
59-
</ul>
60-
</div>
61-
<!-- footer -->
62-
<footer class="main-footer">
63-
<div class="iclient-copyright" id="iclient-footer">版权所有 © 2000-2017 北京超图软件股份有限公司 京ICP备11032883号-8 京公网安备11010502008721 甲测资字11002074
64-
</div>
65-
</footer>
66-
67-
</div>
25+
<div class="wrapper"></div>
6826
<!-- ./wrapper -->
6927
<script type="text/javascript" src="../js/scrollTo.min.js"></script>
70-
7128
<script type="text/javascript" src="../../web/libs/js/app.min.js"></script>
7229
<script>
73-
$('.nav-header').load('../../web/header.html');
30+
$('.wrapper').load('../example.html', function () {
31+
$('.nav-header').load('../../web/header.html');
32+
var body = $('body');
33+
body.append("<script type='text/javascript' src='./config.js'><\/script>");
34+
body.append("<script type='text/javascript' src='../js/sidebar.js'><\/script>");
35+
body.append("<script type='text/javascript' src='../js/example.js'><\/script>");
36+
});
7437
</script>
75-
<script type="text/javascript" src="./config.js"></script>
76-
<script type="text/javascript" src="../js/sidebar.js"></script>
77-
<script type="text/javascript" src="../js/example.js"></script>
78-
7938
</body>
8039
</html>

‎examples/js/editor.js‎

Lines changed: 23 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@ $(document).ready(function () {
44
});
55

66
var aceEditor;
7-
var myWidth = 0, myHeight = 0;
87
var containExamples = true;
98

109
function initPage() {
1110
initSideBar();
1211
initEditor();
1312
screenResize();
14-
// dragCode();
1513
}
1614

1715
function initSideBar() {
@@ -24,23 +22,7 @@ function initSideBar() {
2422
}
2523

2624
function screenResize() {
27-
if (typeof( $(window).innerWidth()) == 'number') {
28-
myWidth = $(window).innerWidth();
29-
myHeight = $(window).innerHeight();
30-
}
31-
else if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight)) {
32-
myWidth = document.documentElement.clientWidth;
33-
myHeight = document.documentElement.clientHeight;
34-
}
3525
window.onresize = function () {
36-
if (typeof( $(window).innerWidth() ) == 'number') {
37-
myWidth = window.innerWidth;
38-
myHeight = window.innerHeight;
39-
}
40-
else if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight)) {
41-
myWidth = document.documentElement.clientWidth;
42-
myHeight = document.documentElement.clientHeight;
43-
}
4426
mapHeight();
4527
};
4628
}
@@ -57,7 +39,6 @@ function initCodeEditor() {
5739
aceEditor.setValue($('#editor').val());
5840
aceEditor.clearSelection();
5941
aceEditor.moveCursorTo(0, 0);
60-
6142
}
6243

6344
//初始化编辑器以及预览内容
@@ -113,41 +94,28 @@ function run() {
11394

11495
//填充预览效果内容
11596
function loadPreview(content) {
116-
var iFrame = document.getElementById("innerPage").contentWindow;
117-
iFrame.document.open();
118-
iFrame.addEventListener('load', mapHeight);
119-
iFrame.document.write(content);
120-
iFrame.document.close();
97+
var iFrame = createIFrame(),
98+
iframeDocument = iFrame.contentWindow.document;
99+
100+
iframeDocument.open();
101+
iframeDocument.write(content);
102+
iframeDocument.close();
103+
iframeDocument.addEventListener('load', function () {
104+
mapHeight();
105+
});
121106
mapHeight();
122107
}
123108

124-
/**设置显示源码的拖拽效果**/
125-
function dragCode() {
126-
$("#drag").mousedown(function () {
127-
document.onselectstart = function () {
128-
return false;
129-
};
130-
document.onmousemove = function (e) {
131-
var bottomX = (e || window.event).clientX - 202;
132-
if (bottomX <= 0) {
133-
bottomX = 0;
134-
}
135-
if (bottomX >= myWidth - 202) {
136-
bottomX = myWidth - 202;
137-
}
138-
$("#codePane").width(bottomX);
139-
$("#editor").width(bottomX);
140-
aceEditor.resize();
141-
$("#previewPane").css({'left:': (myWidth - bottomX - 202) + "px"});
142-
$("#innerPage").width(myWidth - bottomX - 202);
143-
aceEditor.resize();
144-
};
145-
document.onmouseup = function () {
146-
document.onmousemove = null;
147-
$("#overiframe").hide();
148-
};
149-
});
109+
function createIFrame() {
110+
var preViewPane = $("#previewPane");
111+
preViewPane.empty();
112+
var iframe = document.createElement("iframe");
113+
$(iframe).attr("id", "innerPage");
114+
$(iframe).attr("name", "innerPage");
115+
preViewPane.append(iframe);
116+
return iframe;
150117
}
118+
151119
//重置编辑器
152120
function refresh() {
153121
initEditor();
@@ -191,27 +159,28 @@ function bindEvents() {
191159
});
192160
var codePane = $("#codePane");
193161
var previewPane = $("#previewPane");
194-
var expand = !1;
162+
var expand = !!1;
195163
$("#showCodeBtn").click(function () {
196164
if (expand) {
165+
//编辑器和预览宽度5:7
197166
$(this).text(" 展开");
198167
$(this).addClass("fa-arrows-alt");
199168
$(this).removeClass(" fa-compress");
200169
codePane.show(10, function () {
170+
previewPane.removeClass("col-md-12");
201171
previewPane.addClass("col-md-7");
202172
codePane.addClass("col-md-5");
203173
});
204-
205174
} else {
175+
//预览独占一行
206176
$(this).text(" 源码");
207177
$(this).addClass(" fa-compress");
208178
$(this).removeClass("fa-arrows-alt");
209179
codePane.hide(200, function () {
210180
codePane.removeClass("col-md-5");
211181
previewPane.removeClass("col-md-7");
182+
previewPane.addClass("col-md-12");
212183
});
213-
214-
215184
}
216185
expand = !expand;
217186
});

0 commit comments

Comments
 (0)