Skip to content

Commit da39cc4

Browse files
zhangyan1991zhangyan1991
committed
定制标题
1 parent a8d8de8 commit da39cc4

File tree

8 files changed

+191
-1
lines changed

8 files changed

+191
-1
lines changed

‎6.1 定制标题/css/base.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
2+
form,fieldset,input,textarea,p,blockquote,th,td {
3+
padding: 0;
4+
margin: 0;
5+
}
6+
table {
7+
border-collapse: collapse;
8+
border-spacing: 0;
9+
}
10+
fieldset,img {
11+
border: 0;
12+
}
13+
address,caption,cite,code,dfn,em,strong,th,var {
14+
font-weight: normal;
15+
font-style: normal;
16+
}
17+
ol,ul {
18+
list-style: none;
19+
}
20+
caption,th {
21+
text-align: left;
22+
}
23+
h1,h2,h3,h4,h5,h6 {
24+
font-weight: normal;
25+
font-size: 100%;
26+
}
27+
q:before,q:after {
28+
content:'';
29+
}
30+
abbr,acronym { border: 0;
31+
}

‎6.1 定制标题/css/window.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.btn{
2+
text-decoration: none;
3+
padding:5px 10px;
4+
width: 50px;
5+
text-align: center;
6+
display: block;
7+
margin: 100px;
8+
background: #ddd;
9+
}
10+
11+
.window_boundingBox{
12+
position: fixed;
13+
border: 1px solid #ddd;
14+
width: 500px;
15+
height: 300px;
16+
left: 50%;
17+
margin-left: -250px;
18+
top:100px;
19+
box-shadow: 0 0 12px #888;
20+
}
21+
22+
.window_boundingBox input{
23+
width: 100px;
24+
position: absolute;
25+
bottom: 10px;
26+
left: 50%;
27+
margin-left: -50px;
28+
}
29+
30+
.window_header{
31+
background: #999;
32+
color: #fff;
33+
text-align: center;
34+
padding: 5px;
35+
font-size: 20px;
36+
}
37+
38+
.window_body{
39+
padding: 10px;
40+
}

‎6.1 定制标题/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>基于require.js重写代码</title>
6+
<link type="text/css" rel="stylesheet" href="css/base.css">
7+
<link type="text/css" rel="stylesheet" href="css/window.css">
8+
</head>
9+
10+
<body>
11+
<a href="#" class="btn">弹窗</a>
12+
<script type="text/javascript" data-main="js/main" src="js/require.js"></script>
13+
</body>
14+
</html>

‎6.1 定制标题/js/jquery-2.1.1.min.js

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎6.1 定制标题/js/main.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
require.config({
2+
paths:{
3+
jquery:'jquery-2.1.1.min'
4+
}
5+
});
6+
7+
require(['jquery','window'],function($,w){
8+
$('.btn').click(function(){
9+
new w.Window().alert({
10+
title:'提示',
11+
content:'Welcome!!!',
12+
handler:function(){
13+
alert('you click the button');
14+
},
15+
width:300,
16+
height:150,
17+
y:250,
18+
x:600
19+
});
20+
});
21+
});

‎6.1 定制标题/js/require.js

Lines changed: 36 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎6.1 定制标题/js/window.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
define(['jquery'],function($){
2+
function Window(){
3+
this.cfg = {
4+
width:500,
5+
height:300,
6+
title:'系统消息',
7+
content:"",
8+
handler:null
9+
};
10+
}
11+
12+
Window.prototype = {
13+
alert:function(cfg){
14+
var CFG = $.extend(this.cfg,cfg),
15+
boudingBox = $(
16+
'<div class="window_boundingBox">'+
17+
'<div class="window_header">'+CFG.title+'</div>'+
18+
'<div class="window_body">'+CFG.content+'</div>'+
19+
'<div class="window_footer"><input type="button" value="确定"></div>'+
20+
'</div>'
21+
),
22+
btn = boudingBox.find('.window_footer input')
23+
boudingBox.appendTo('body');
24+
btn.click(function(){
25+
CFG.handler && CFG.handler(); //判断是否传入执行操作的函数，如果传入就执行
26+
boudingBox.remove();
27+
});
28+
$.extend(this.cfg,cfg);
29+
boudingBox.css({
30+
width:CFG.width+'px',
31+
height:CFG.height+'px',
32+
left:(CFG.x||(window.innerWidth-CFG.width)/2)+'px',
33+
top:(CFG.y||(window.innerHeight-CFG.height)/2)+'px'
34+
});
35+
},
36+
confirm:function(){},
37+
prompt:function(){}
38+
}
39+
40+
return{
41+
Window : Window
42+
}
43+
})

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
* 3.1 制作简单的弹窗组件
77
* 3.2 带关闭按钮的弹窗组件
88
* 4.1 定制长宽和位置
9-
* 5.1 调整接口格式
9+
* 5.1 调整接口格式
10+
* 6.1 定制标题

0 commit comments

Comments
 (0)