โดย abdkode » 08/01/2019 5:48 pm
sweet alert เป็น css และ js ที่ช่วยในการทำ alert ต่างๆ ในโปรเจ็คดูสวยงามมากขึ้น
ในการติดตั้ง sweetalert2 สามารถทำได้ 3 วิธี
หรือ
หรือดาวโหลด จาก CDN:
jsdelivr.com/package/npm/sweetalert2
ในการทดสอบการใช้งาน ให้สร้างไฟล์ index.html
โค้ด: เลือกทั้งหมด
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<title>Test Sweetalert</title>
<metaname="viewport"content="width=device-width, initial-scale=1">
<linkrel="stylesheet"type="text/css"href="sweetalert2/dist/sweetalert2.min.css"/>
<scriptsrc="sweetalert2/dist/sweetalert2.min.js"></script>
</head>
<body>
<buttontype="button"onclick="swalFunction()">Alert</button>
</body>
<script>
function swalFunction() {
swal('สวัสดีชาวโลก');
}
</script>
</html>
นอกจากนั้นเราสามารถปรับแต่งเพิ่มให้เข้ากับโปรเจ็คเรา ขึ้นอยู่กับว่าเราต้องการใช้มันเพื่ออะไร
โค้ด: เลือกทั้งหมด
<script>
function swalFunction() {
swal({
type: 'error',
title: 'Oops...',
text: 'Something went wrong!'
});
}
</script>
โค้ด: เลือกทั้งหมด
<script>
Swal({
title: 'Are you sure?',
text: "Do you want to Delete thist data!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
Swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
</script>
การปรับแต่งเพิ่มเติมสามารถศึกษาได้จากเว็บไซต์ต้นทางได้เลย
https://sweetalert2.github.io/
การทำ popup(ป็อบอัพ) เพื่อแจ้งเตื่อนหริอเพิ่มการค้นหาด้วย Bootstrap(บูตสแต็บ)sweet alert เป็น css และ js ที่ช่วยในการทำ alert ต่างๆ ในโปรเจ็คดูสวยงามมากขึ้น
[img]https://uppic.cc/d/KPEG[/img]
ในการติดตั้ง sweetalert2 สามารถทำได้ 3 วิธี
[code]$ npm install sweetalert2[/code]
หรือ
[code]$ bower install sweetalert2[/code]
หรือดาวโหลด จาก CDN: [url=https://www.jsdelivr.com/package/npm/sweetalert2]jsdelivr.com/package/npm/sweetalert2[/url]
ในการทดสอบการใช้งาน ให้สร้างไฟล์ index.html
[code]<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<title>Test Sweetalert</title>
<metaname="viewport"content="width=device-width, initial-scale=1">
<linkrel="stylesheet"type="text/css"href="sweetalert2/dist/sweetalert2.min.css"/>
<scriptsrc="sweetalert2/dist/sweetalert2.min.js"></script>
</head>
<body>
<buttontype="button"onclick="swalFunction()">Alert</button>
</body>
<script>
function swalFunction() {
swal('สวัสดีชาวโลก');
}
</script>
</html>[/code]
[img]https://uppic.cc/d/KPT2[/img]
นอกจากนั้นเราสามารถปรับแต่งเพิ่มให้เข้ากับโปรเจ็คเรา ขึ้นอยู่กับว่าเราต้องการใช้มันเพื่ออะไร
[code]<script>
function swalFunction() {
swal({
type: 'error',
title: 'Oops...',
text: 'Something went wrong!'
});
}
</script>[/code]
[img]https://uppic.cc/d/KPTT[/img]
[code]<script>
Swal({
title: 'Are you sure?',
text: "Do you want to Delete thist data!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
Swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
</script>[/code]
[img]https://uppic.cc/d/KPUb[/img]
การปรับแต่งเพิ่มเติมสามารถศึกษาได้จากเว็บไซต์ต้นทางได้เลย [url]https://sweetalert2.github.io/[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=44757&hilit=modal]การทำ popup(ป็อบอัพ) เพื่อแจ้งเตื่อนหริอเพิ่มการค้นหาด้วย Bootstrap(บูตสแต็บ)[/url]