ยินดีต้อนรับสู่เอกสาร API ของ BoxAlert ซึ่งเป็นเครื่องมือสำหรับสร้าง Popup และ Toast Notification ที่สามารถปรับแต่งได้อย่างยืดหยุ่นในแอปพลิเคชันเว็บของคุณ คู่มือนี้จะช่วยให้คุณเข้าใจวิธีการใช้งานฟังก์ชัน boxAlert และ boxToast รวมถึงตัวเลือกทั้งหมดที่มีให้
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><link href="https://boxalert.easy2api.com/boxAlert.css" rel="stylesheet"><script src="https://boxalert.easy2api.com/boxAlert.js"></script>
boxAlertคำอธิบาย: ใช้สำหรับแสดง popup ที่ปรับแต่งได้ตามตัวเลือกที่กำหนด
| ตัวเลือก | ประเภท | ค่าเริ่มต้น | รายละเอียด |
|---|---|---|---|
language | string | "th" | ภาษาของข้อความ ("th" หรือ "en") |
title | string | - | หัวเรื่องของ popup |
text | string | - | ข้อความหลัก |
icon | string | - | ไอคอน ("success", "error", "warning", "info" หรือ URL รูปภาพ) |
inputs | array of objects | - | ฟิลด์ input (ดูรายละเอียดด้านล่าง) |
customButtons | array of objects | - | ปุ่มที่ปรับแต่งเอง (ดูรายละเอียดด้านล่าง) |
showCancelButton | boolean | false | แสดงปุ่ม "ยกเลิก" |
confirmButtonText | string | "ยืนยัน" (th) / "Confirm" (en) | ข้อความปุ่มยืนยัน |
cancelButtonText | string | "ยกเลิก" (th) / "Cancel" (en) | ข้อความปุ่มยกเลิก |
autoTimeout | number | - | ระยะเวลาปิดอัตโนมัติ (ms) |
onTimeout | function | - | ฟังก์ชันเมื่อหมดเวลา |
onConfirm | function | - | ฟังก์ชันเมื่อยืนยัน (รับ object จาก inputs) |
onCancel | function | - | ฟังก์ชันเมื่อยกเลิก |
width | string | - | ความกว้าง (เช่น "400px") |
animation | string | "fadeIn" | animation ("fadeIn", "slideIn") |
allowOutsideClick | boolean | false | อนุญาตให้คลิกนอกเพื่อปิด |
customStyle | object | - | สไตล์เพิ่มเติม (ดูรายละเอียดด้านล่าง) |
showcloseButton | boolean | true | แสดงปุ่มปิด (x) |
inputs| Property | ประเภท | รายละเอียด |
|---|---|---|
type | string | "text", "email", "password", "textarea", "select", "radio", "checkbox" |
name | string | ชื่อ input |
label | string | ข้อความ label |
placeholder | string | ข้อความ placeholder |
required | boolean | บังคับกรอก |
options | array | ตัวเลือกสำหรับ select/radio |
default | string | ค่าเริ่มต้น radio |
checked | boolean | checkbox ถูกเลือก |
validation | function | ฟังก์ชันตรวจสอบ |
errorMessage | string | ข้อความ error |
customButtons| Property | ประเภท | รายละเอียด |
|---|---|---|
text | string | ข้อความปุ่ม |
onClick | function | ฟังก์ชันเมื่อคลิก |
class | string | คลาส CSS |
color | string | สีข้อความ |
background | string | สีพื้นหลัง |
customStyle| Property | ประเภท | รายละเอียด |
|---|---|---|
overlayBackgroundColor | string | สีพื้นหลัง overlay |
overlayBackgroundImage | string | URL รูปภาพ overlay |
bodyBackgroundColor | string | สีพื้นหลัง popup |
bodyBackgroundImage | string | URL รูปภาพ popup |
confirmButtonColor | string | สีข้อความปุ่มยืนยัน |
progressBarColor | string | สี progress bar |
iconBorderColor | string | สีขอบไอคอน |
boxToastคำอธิบาย: ใช้สำหรับแสดง toast notification ที่ปรับแต่งได้
| ตัวเลือก | ประเภท | ค่าเริ่มต้น | รายละเอียด |
|---|---|---|---|
text | string | "บันทึกข้อมูลสำเร็จ!" (th) / "Data saved successfully!" (en) | ข้อความ toast |
icon | string | - | ไอคอน ("success", "error", "warning", "info") |
duration | number | 3000 | ระยะเวลาแสดง (ms) |
position | string | "top-right" | ตำแหน่ง ("top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center", "center") |
showProgress | boolean | false | แสดง progress bar |
closeOnClick | boolean | true | คลิกเพื่อปิด |
language | string | "th" | ภาษา ("th" หรือ "en") |
boxAlert({
title: "Box Alert",
text: "BoxAlert ยินดีต้อนรับ"
});
boxAlert({
title: "ยืนยันการลบ",
text: "คุณแน่ใจหรือไม่ว่าต้องการลบข้อมูลนี้?",
icon: "warning",
showCancelButton: true,
onConfirm: () => console.log("Data deleted"),
onCancel: () => console.log("Deletion canceled")
});
boxAlert({
title: "สมัครสมาชิก",
text: "กรุณากรอกข้อมูลเพื่อสมัครสมาชิก",
inputs: [
{ type: "text", name: "username", label: "ชื่อผู้ใช้", required: true },
{ type: "email", name: "email", label: "อีเมล", required: true },
{ type: "password", name: "password", label: "รหัสผ่าน", required: true }
],
onConfirm: (values) => console.log("Registration data:", values)
});
boxToast({
text: "บันทึกข้อมูลสำเร็จ!",
icon: "success",
duration: 5000,
position: "top-right",
showProgress: true
});
boxToast({
text: "เกิดข้อผิดพลาด!",
icon: "error",
duration: 5000
});