Skip to content

Commit 64f0606

Browse files
DevYanDevYan
committed
实现confirm方法(一)(已包含16章所有示例代码)
1 parent 70aa203 commit 64f0606

File tree

10 files changed

+426
-1
lines changed

10 files changed

+426
-1
lines changed

‎16.1 实现confirm方法(一)/css/base.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
}
32+
html body{
33+
height: 100%;
34+
}

‎16.1 实现confirm方法(一)/css/window.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
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+
12+
.window_boundingBox{
13+
position: fixed;
14+
border: 1px solid #ddd;
15+
width: 500px;
16+
height: 300px;
17+
left: 50%;
18+
margin-left: -250px;
19+
top:100px;
20+
box-shadow: 0 0 12px #888;
21+
background: #fff;
22+
}
23+
24+
.window_mask{
25+
width: 100%;
26+
height: 100%;
27+
background: #000;
28+
opacity: .3;
29+
position: absolute;
30+
left: 0;
31+
top: 0;
32+
}
33+
34+
.window_alertBtn{
35+
width: 100px;
36+
position: absolute;
37+
bottom: 10px;
38+
left: 50%;
39+
margin-left: -50px;
40+
}
41+
42+
.window_header{
43+
background: #999;
44+
color: #fff;
45+
text-align: center;
46+
padding: 5px;
47+
font-size: 20px;
48+
}
49+
50+
.window_body{
51+
padding: 10px;
52+
}
53+
54+
.window_footer{
55+
position: absolute;
56+
bottom: 0;
57+
padding-bottom: 10px;
58+
text-align: center;
59+
width: 100%;
60+
}
61+
62+
.window_cancelBtn{
63+
margin-left: 20px;
64+
}
65+
66+
.window_closeBtn{
67+
position: absolute;
68+
right: 0;
69+
top: 0;
70+
font-size: 20px;
71+
color: #fff;
72+
background: red;
73+
cursor: pointer;
74+
padding: 5px;
75+
}
76+
77+
/*skin for window_skin_a*/
78+
.window_skin_a.window_boudingBox{
79+
box-shadow: none;
80+
border: 5px solid #ddc;
81+
border-radius: 5px;
82+
}
83+
84+
.window_skin_a .window_alertBtn{
85+
width: 50px;
86+
left: auto;
87+
right: 20px;
88+
margin-left: 0;
89+
background:red;
90+
border: none;
91+
color: #fff;
92+
padding: 10px;
93+
}
94+
95+
.window_skin_a .window_header{
96+
background: red;
97+
text-align: left;
98+
padding: 10px;
99+
font-weight: bold;
100+
}
101+
102+
.window_skin_a .window_closeBtn{
103+
width: 45px;
104+
height: 45px;
105+
border-radius: 45px;
106+
line-height: 45px;
107+
padding: 0;
108+
text-align: center;
109+
background: blue;
110+
font-size: 24px;
111+
font-weight: bold;
112+
right: -15px;
113+
top: -15px;
114+
}

‎16.1 实现confirm方法(一)/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>实现confirm方法(一)</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 btn_alert">alert弹窗</a>
12+
<a href="#" class="btn btn_confirm">confirm弹窗</a>
13+
<script type="text/javascript" data-main="js/main" src="js/require.js"></script>
14+
</body>
15+
</html>

‎16.1 实现confirm方法(一)/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.

‎16.1 实现confirm方法(一)/js/jquery-ui.min.js

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

‎16.1 实现confirm方法(一)/js/main.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
require.config({
2+
paths:{
3+
jquery:'jquery-2.1.1.min',
4+
jqueryUI:'jquery-ui.min'
5+
}
6+
});
7+
8+
require(['jquery','window'],function($,w){
9+
$('.btn_alert').click(function(){
10+
var win = new w.Window().alert({
11+
title:'提示',
12+
content:'Welcome!!!',
13+
width:300,
14+
height:150,
15+
y:250,
16+
x:600,
17+
hasCloseBtn:true,
18+
text4AlertBtn:'OK',
19+
dragHandle:'.window_header',
20+
skinClassName:'window_skin_a',
21+
// handler4AlertBtn:function(){
22+
// alert('你点击了确定按钮');
23+
// },
24+
// handler4CloseBtn:function(){
25+
// alert('你点击了关闭按钮');
26+
// }
27+
}).on('alert',function(){
28+
alert('你点击了确定按钮')
29+
}).on('alert',function(){
30+
alert('确定按钮第二次回调')
31+
}).on('alert',function(){
32+
alert('确定按钮第三次回调')
33+
}).on('close',function(){
34+
alert('第一次点击了关闭按钮')
35+
}).on('close',function(){
36+
alert('关闭按钮第二次回调')
37+
});
38+
});
39+
40+
$('.btn_confirm').click(function(){
41+
var win = new w.Window().confirm({
42+
title:'系统消息',
43+
content:'您确定要删除这个文件吗',
44+
width:300,
45+
height:150,
46+
y:50,
47+
x:600,
48+
text4ConfirmBtn:'是',
49+
text4CancelBtn:'否',
50+
dragHandle:'.window_header'
51+
}).on('confirm',function(){
52+
alert('确定');
53+
}).on('cancel',function(){
54+
alert('取消');
55+
});
56+
});
57+
58+
});

‎16.1 实现confirm方法(一)/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.

0 commit comments

Comments
 (0)