Skip to content

Commit 66b2866

Browse files
puagpuag
committed
test
1 parent 7081a75 commit 66b2866

17 files changed

+1478
-88
lines changed

‎common/pop.html

+304
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>豪情-前端作品集合</title>
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
7+
<meta name="keywords" content="豪情-前端开发"/>
8+
<meta name="description" content="豪情-前端开发"/>
9+
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
10+
<!--<link rel="stylesheet" type="text/css" href="../css/main.css"/>-->
11+
<link rel="stylesheet" type="text/css" href="../css/jkcodecolor.css"/>
12+
<link rel="shortcut icon" href="images/favicon.ico"/>
13+
<script type="text/javascript" src="../js/jing.js"></script>
14+
<script type="text/javascript" src="../js/libs/highlight.js"></script>
15+
<script type="text/javascript" src="../js/libs/lang-js.js"></script>
16+
<script type="text/javascript" src="../js/pop.js"></script>
17+
<style type="text/css">
18+
html,body{ height:100%;background: #f1f1f1;}
19+
.main{ width:700px;line-height:23px;margin:20px 0 20px 200px;border-radius:10px;border:solid #ccc 1px;box-shadow:0 0 8px rgba(0,0,0,.3);}
20+
.cont{ width:100%; height:100%;background: #fff;border-radius:10px;}
21+
.section{ padding:25px;}
22+
.section h1{ font-size:16px; font-weight:normal; font-family:'微软雅黑';}
23+
.section h2{ font-size:16px; font-weight:normal; font-family:'微软雅黑';}
24+
.overlay{ position:absolute;width:100%;height:100%;background:#373938;top:0;left:0;display:none;filter:alpha(opacity=70);opacity:0.7;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:solid #c79d5f 1px;}
25+
.list{ padding-top:15px;}
26+
.list li{list-style:decimal inside; }
27+
.list li pre{background: #333;}
28+
.code{display:none;height:1px;overflow:hidden;}
29+
.btn{ padding:0 5px; cursor:pointer;}
30+
.tab{border-collapse:collapse;border:1px solid #ccc;}
31+
.tab td{border:1px solid #ccc;padding:5px;}
32+
</style>
33+
</head>
34+
<body>
35+
<div class="wrap">
36+
<div class="main">
37+
<div class="cont">
38+
<div class="section">
39+
<h1>这是一个简单的弹出层组件，为了演示方便，做了一些特殊的处理。</h1>
40+
<ol class="list">
41+
<li>
42+
<span>普通的字面量传值，主题：默认风格</span>
43+
<textarea class="code">
44+
new Jing.uiwindow({
45+
title : '标题',
46+
content : '这是一个示例内容',
47+
callClose : function(){
48+
alert('我已经被关闭！');
49+
}
50+
});
51+
</textarea>
52+
<pre></pre>
53+
<p align="right">
54+
<input id="btn01" class="btn" type="submit" value="点击运行">
55+
</p>
56+
<script type="text/javascript">
57+
var btn = Jing.id('btn01');
58+
btn.onclick = function(){
59+
new Jing.pop({
60+
title : '标题',
61+
content : '这是一个示例内容',
62+
callClose : function(){
63+
64+
}
65+
});
66+
}
67+
</script>
68+
</li>
69+
<li>
70+
<span>传入一般的HTML元素，主题：WIN7风格</span>
71+
<div id="testcont">《精通js》这本书，承载了众多jqer期待的梦，结果可想而知。</div>
72+
<textarea class="code">
73+
new Jing.uiwindow({
74+
pattern : 'aero', // WIN7风格
75+
title : '标题',
76+
content : document.getElementById('testcont').innerHTML,
77+
callOpen : function(){
78+
document.getElementById('testcont').style.display = 'none';
79+
},
80+
callClose: function(){
81+
document.getElementById('testcont').style.display = 'block';
82+
}
83+
});
84+
</textarea>
85+
<pre></pre>
86+
<p align="right">
87+
<input id="btn02" class="btn" type="submit" value="点击运行">
88+
</p>
89+
<script type="text/javascript">
90+
var btn02 = Jing.id('btn02');
91+
btn02.onclick = function(){
92+
new Jing.uiwindow({
93+
pattern : 'aero', // WIN7风格
94+
title : '标题',
95+
content : document.getElementById('testcont').innerHTML,
96+
callOpen : function(){
97+
document.getElementById('testcont').style.display = 'none';
98+
},
99+
callClose: function(){
100+
document.getElementById('testcont').style.display = 'block';
101+
}
102+
});
103+
}
104+
</script>
105+
</li>
106+
<li>
107+
<span>弹出后，通过外部方法关闭，主题：MAC风格</span>
108+
<textarea class="code">
109+
new Jing.uiwindow({
110+
pattern : 'mac', // mac风格
111+
title : '标题',
112+
content : '<input type="button" id="firstBtn" value="通过外部方法关闭" />',
113+
callOpen : function(){
114+
var me = this,
115+
btn = document.getElementById('firstBtn');
116+
btn.onclick = function(){
117+
me.close();
118+
}
119+
}
120+
});
121+
</textarea>
122+
<pre></pre>
123+
<p align="right">
124+
<input id="btn03" class="btn" type="submit" value="点击运行">
125+
</p>
126+
<script type="text/javascript">
127+
var btn03 = Jing.id('btn03');
128+
btn03.onclick = function(){
129+
new Jing.uiwindow({
130+
pattern : 'mac', // mac风格
131+
title : '标题',
132+
content : '<input type="button" id="firstBtn" value="通过外部方法关闭" />',
133+
callOpen : function(){
134+
var me = this,
135+
btn = document.getElementById('firstBtn');
136+
btn.onclick = function(){
137+
me.close();
138+
}
139+
}
140+
});
141+
}
142+
</script>
143+
</li>
144+
<li>
145+
<span>弹出窗中窗，以字面量方式传值,主题：blue风格</span>
146+
<textarea class="code">
147+
new Jing.uiwindow({
148+
pattern : 'blue', // blue风格
149+
title : '标题',
150+
content : document.getElementById('testcontent'),
151+
callOpen : function(){
152+
var subBtn = document.getElementById('subBtn');
153+
subBtn.onclick = function(){
154+
new Jing.uiwindow({
155+
title : '我是新弹出的小窗口',
156+
content: '新弹出小窗口的测试内容',
157+
width : 200,
158+
height : 200
159+
});
160+
}
161+
}
162+
});
163+
</textarea>
164+
<pre></pre>
165+
<div id="testcontent" class="testtab" style="display:none;">
166+
<table class="tab" width="100%">
167+
<tr>
168+
<td>name</td>
169+
<td>address</td>
170+
</tr>
171+
<tr>
172+
<td>豪情</td>
173+
<td>ShangHai</td>
174+
</tr>
175+
<tr>
176+
<td colspan="2" align="center"><input id="subBtn" type="submit" value="再来一个小窗口" /></td>
177+
</tr>
178+
</table>
179+
</div>
180+
<p align="right">
181+
<input id="btn04" class="btn" type="submit" value="点击运行">
182+
</p>
183+
<script type="text/javascript">
184+
var btn04 = Jing.id('btn04');
185+
186+
btn04.onclick = function(){
187+
new Jing.uiwindow({
188+
pattern : 'blue', // blue风格
189+
title : '标题',
190+
content : '<input id="smallWin" type="submit" value="再来一个小窗口" />',
191+
callOpen : function(){
192+
var subBtn = document.getElementById('smallWin');
193+
console.log(subBtn);
194+
subBtn.onclick = function(){
195+
new Jing.uiwindow({
196+
pattern: 'blue', // blue风格
197+
title : '我是新弹出的小窗口',
198+
content: '新弹出小窗口的测试内容',
199+
width : 200,
200+
height : 200
201+
});
202+
}
203+
}
204+
});
205+
}
206+
</script>
207+
</li>
208+
<li>
209+
<span>标题栏设置，主题：无风格</span>
210+
<textarea class="code">
211+
new Jing.uiwindow({
212+
title : false, // 没有标题栏
213+
content : '<input type="button" id="secondBtn" value="通过外部方法关闭" />',
214+
callOpen : function(){
215+
var me = this,
216+
btn = document.getElementById('secondBtn');
217+
btn.onclick = function(){
218+
me.close();
219+
}
220+
}
221+
});
222+
</textarea>
223+
<pre></pre>
224+
<p align="right">
225+
<input id="btn05" class="btn" type="submit" value="点击运行">
226+
</p>
227+
<script type="text/javascript">
228+
var btn05 = Jing.id('btn05');
229+
btn05.onclick = function(){
230+
new Jing.uiwindow({
231+
title : false, // 没有标题栏
232+
content : '<input type="button" id="secondBtn" value="通过外部方法关闭" />',
233+
callOpen : function(){
234+
var me = this,
235+
btn = document.getElementById('secondBtn');
236+
btn.onclick = function(){
237+
me.close();
238+
}
239+
}
240+
});
241+
}
242+
</script>
243+
</li>
244+
<li>
245+
<span>拖动设置，主题：绿色风格</span>
246+
<textarea class="code">
247+
new Jing.uiwindow({
248+
pattern : 'green', // 绿色风格
249+
isDrag : false, // 不能拖动
250+
content : document.getElementById('testcont').innerHTML
251+
});
252+
</textarea>
253+
<pre></pre>
254+
<p align="right">
255+
<input id="btn06" class="btn" type="submit" value="点击运行">
256+
</p>
257+
<script type="text/javascript">
258+
var btn06 = Jing.id('btn06');
259+
btn06.onclick = function(){
260+
new Jing.uiwindow({
261+
pattern : 'green', // 绿色风格
262+
content : document.getElementById('testcont').innerHTML,
263+
isDrag : false // 不能拖动
264+
});
265+
}
266+
</script>
267+
</li>
268+
<li>
269+
<span>遮罩设置，主题：橙色风格</span>
270+
<textarea class="code">
271+
new Jing.uiwindow({
272+
pattern : 'orange', // 橙色风格
273+
isMask : false, // 没有遮罩
274+
content : document.getElementById('testcont').innerHTML
275+
});
276+
</textarea>
277+
<pre></pre>
278+
<p align="right">
279+
<input id="btn07" class="btn" type="submit" value="点击运行">
280+
</p>
281+
<script type="text/javascript">
282+
var btn07 = Jing.id('btn07');
283+
btn07.onclick = function(){
284+
new Jing.uiwindow({
285+
pattern : 'orange', // 橙色风格
286+
isMask : false, // 没有遮罩,
287+
content : document.getElementById('testcont').innerHTML
288+
});
289+
}
290+
</script>
291+
</li>
292+
</ol>
293+
</div>
294+
295+
</div>
296+
<div class="overlay"></div>
297+
</div>
298+
</div>
299+
<script type="text/javascript" src="../js/demo.js"></script>
300+
<script type="text/javascript">
301+
302+
</script>
303+
</body>
304+
</html>

‎common/test.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>test</title>
6+
</head>
7+
<body>
8+
<script type="text/javascript" src="../js/jing.js"></script>
9+
<script type="text/javascript" src="../js/pop.js"></script>
10+
<script type="text/javascript">
11+
new $.pop();
12+
</script>
13+
</body>
14+
</html>

‎css/jkcodecolor.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.jkhightlight{border:1px solid #817168;font:10pt Andale Mono;margin:10px 0;-moz-border-radius:6px;-webkit-border-radius:6px;-webkit-box-shadow:2px 2px 5px #8a4019;-moz-box-shadow:2px 2px 5px #8a4019;word-wrap:break-word;word-break:normal;}
2+
pre{margin:0;padding:0;}
3+
.jkhightlight pre{margin:0;padding:10px;overflow:hidden;font:15px/22px Consolas, Droid Sans Mono,Courier;color:#66ff66;border:1px solid #535252;-moz-border-radius:6px;-webkit-border-radius:6px;}
4+
.jkhightlight .keyword{color:#ffff00;}
5+
.jkhightlight .builtin{color:#ffccff;}
6+
.jkhightlight .string{color:#00cccc;white-space:normal;}
7+
.jkhightlight .string .before,.jkhightlight .string .after{color:#99ff99;}
8+
.jkhightlight .regexp{color:#3adf3a;}
9+
.jkhightlight .regexp .before,.jkhightlight .regexp .after{color:#509;font-weight:bold;}
10+
.jkhightlight .comment{color:#d2d4c9;}
11+
.jkhightlight .comment .before,.jkhightlight .comment .after{color:#baa;}
12+
.jkhightlight .hashkey{color:#ffcc66;}
13+
.jkhightlight .hasharrow{color:#c0c0c0;}
14+
.jkhightlight .paren{font-weight:bold;color:#ccccff;}
15+
.jkhightlight .operator{color:#ccccff;}
16+
.jkhightlight .error{background-color:#c00;color:#fff;}
17+
.jkhightlight .defun{font-weight:bold;}
18+
.jkhightlight .line-numbers{float:left;margin-left:-25px;margin-right:10px;width:3em;text-align:right;color:#999;font:0.9em tahoma,verdana,sans-serif;padding-top:0.05em;}
19+
.jkhightlight .line-numbers:after{content:"."}
20+
/* XML */
21+
.jkhightlight .xml-tag-close .before{color:#52a;}
22+
.jkhightlight .xml-entity{color:#b2a;}
23+
.jkhightlight .xml-entity .before,.jkhightlight .xml-entity .after{color:#607;}
24+
/* CSS */
25+
.jkhightlight .css-class{color:#000;font-style:italic;}
26+
.jkhightlight .css-pseudo-class{color:#777;}
27+
.jkhightlight .css-id{font-weight:bold;}
28+
.jkhightlight .css-color-spec{color:#a51;}
29+
.jkhightlight .css-length{color:#a19;}
30+
.jkhightlight .css-length .after{font-weight:bold;}
31+
.jkhightlight .css-declaration-kw{font-weight:bold;}
32+
.jkhightlight .css-comma{color:red;}

‎index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
<link rel="stylesheet" type="text/css" href="css/common.css"/>
1010
<link rel="stylesheet" type="text/css" href="css/home.css"/>
1111
<link rel="shortcut icon" href="images/favicon.ico"/>
12-
<script type="text/javascript" src="js/libs/modernizr.min.js"></script>
1312
<script type="text/javascript">
1413
if (top.location !== self.location) {
1514
top.location=self.location;
@@ -27,7 +26,7 @@ <h1>豪情</h1>
2726
<li>
2827
<a href="#"><i class="icon-font">&#xe003;</i>常用效果</a>
2928
<ul class="sub-menu">
30-
<li><a target="iframe" href="pop.html"><i class="icon-font">&#xe008;</i>弹出层</a></li>
29+
<li><a target="iframe" href="common/pop.html"><i class="icon-font">&#xe008;</i>弹出层</a></li>
3130
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>模拟select</a></li>
3231
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>图片轮换</a></li>
3332
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>日历</a></li>
@@ -50,11 +49,12 @@ <h1>豪情</h1>
5049
</div>
5150
<!--/siderbar-->
5251
<div class="main">
53-
<iframe id="mainIframe" name="iframe" src="main.html" frameborder="0"></iframe>
52+
<iframe id="mainIframe" name="iframe" scroll="no" src="main.html" frameborder="0"></iframe>
5453
</div>
5554
<!--/main-->
5655
</div>
5756
<!--/container-->
57+
<script type="text/javascript" src="js/libs/require.js"></script>
5858
<script type="text/javascript" src="js/init/home.init.js"></script>
5959
</body>
6060
</html>

0 commit comments

Comments
 (0)