CARA MENGGUNAKAN SWEETALERT

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.css
2. Masukkan bootstrap css, sweetalert css dan sweetalert js tersebut ke dalam file Anda, seperti contoh berikut ini.

1
2
3
4
5
6
7
8
9
10
11
<!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.

CARA MENGGUNAKAN SWEETALERT

CARA MENGGUNAKAN SWEETALERT.

0 Response to "CARA MENGGUNAKAN SWEETALERT"

Posting Komentar