CARA MENGGUNAKAN SWEETALERT.
Cara penggunaan sweetalert sangat mudah. Berikut ini adalah langkah-langkah yang harus Anda lakukan.
1. Download
sweet-alert.min.js dan
sweet-alert.css2. Masukkan bootstrap css, sweetalert css dan sweetalert js tersebut ke dalam file Anda, seperti contoh berikut ini.
|
|
<!doctype html>
<html>
<head>
<title>alert</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="sweet-alert.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<script src="sweet-alert.min.js" type="text/javascript"></script>
</body>
</html>
|
3. Tambahkan html untuk membentuk kotak alertnya, sehingga file anda akan menjadi seperti ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!doctype html>
<html>
<head>
<title>alert</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="sweet-alert.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Note: this file is only intended for development use! -->
<div class="sweet-overlay"></div>
<!-- SweetAlert box -->
<div class="sweet-alert">
<div class="icon error">
<span class="x-mark">
<span class="line left"></span>
<span class="line right"></span>
</span>
</div>
<div class="icon warning">
<span class="body"></span>
<span class="dot"></span>
</div>
<div class="icon info"></div>
<div class="icon success">
<span class="line tip"></span>
<span class="line long"></span>
<div class="placeholder"></div>
<div class="fix"></div>
</div>
<div class="icon custom"></div>
<h2>Title</h2>
<p class="text-muted">Text</p>
<p>
<button class="cancel btn btn-lg btn-default">Cancel</button>
<button class="confirm btn btn-lg">OK</button>
</p>
</div>
<script src="sweet-alert.min.js" type="text/javascript"></script>
</body>
</html>
|
4. Tambahkan javascript sesuai kebutuhan Anda. Sebagai contoh disini saya akan membuat alert success dengan tombol OK. maka index saya akan menjadi seperti berikut ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!doctype html>
<html>
<head>
<title>alert</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="sweet-alert.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Note: this file is only intended for development use! -->
<div class="sweet-overlay"></div>
<!-- SweetAlert box -->
<div class="sweet-alert">
<div class="icon error">
<span class="x-mark">
<span class="line left"></span>
<span class="line right"></span>
</span>
</div>
<div class="icon warning">
<span class="body"></span>
<span class="dot"></span>
</div>
<div class="icon info"></div>
<div class="icon success">
<span class="line tip"></span>
<span class="line long"></span>
<div class="placeholder"></div>
<div class="fix"></div>
</div>
<div class="icon custom"></div>
<h2>Title</h2>
<p class="text-muted">Text</p>
<p>
<button class="cancel btn btn-lg btn-default">Cancel</button>
<button class="confirm btn btn-lg">OK</button>
</p>
</div>
<script src="sweet-alert.min.js" type="text/javascript"></script>
<script>
swal("Good job!", "You clicked the button!", "success")
</script>
</body>
</html>
|
Dan berikut ini adalah hasilnya jika kita jalankan.
Contoh lain, misalnya anda ingin membuat konfirmasi anda bisa melakukannya dengan mengubah baris 51 menjadi seperti ini.
1
2
3
4
5
6
7
8
9
10
11
12
|
swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
|
Dan berikut ini adalah hasilnya untuk konfirmasi..
Anda bisa melihat contoh contoh lain
di sini.
0 Response to "CARA MENGGUNAKAN SWEETALERT"
Post a Comment