แนะนำ

ยินดีต้อนรับสู่เอกสาร API ของ BoxAlert ซึ่งเป็นเครื่องมือสำหรับสร้าง Popup และ Toast Notification ที่สามารถปรับแต่งได้อย่างยืดหยุ่นในแอปพลิเคชันเว็บของคุณ คู่มือนี้จะช่วยให้คุณเข้าใจวิธีการใช้งานฟังก์ชัน boxAlert และ boxToast รวมถึงตัวเลือกทั้งหมดที่มีให้

การติดตั้ง

ติดตั้งผ่าน CDN
jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

CSS
<link href="https://boxalert.easy2api.com/boxAlert.css" rel="stylesheet">

JavaScript
<script src="https://boxalert.easy2api.com/boxAlert.js"></script>

Reference

ฟังก์ชัน boxAlert

คำอธิบาย: ใช้สำหรับแสดง popup ที่ปรับแต่งได้ตามตัวเลือกที่กำหนด

ตัวเลือก (Options)

ตัวเลือก ประเภท ค่าเริ่มต้น รายละเอียด
languagestring"th"ภาษาของข้อความ ("th" หรือ "en")
titlestring-หัวเรื่องของ popup
textstring-ข้อความหลัก
iconstring-ไอคอน ("success", "error", "warning", "info" หรือ URL รูปภาพ)
inputsarray of objects-ฟิลด์ input (ดูรายละเอียดด้านล่าง)
customButtonsarray of objects-ปุ่มที่ปรับแต่งเอง (ดูรายละเอียดด้านล่าง)
showCancelButtonbooleanfalseแสดงปุ่ม "ยกเลิก"
confirmButtonTextstring"ยืนยัน" (th) / "Confirm" (en)ข้อความปุ่มยืนยัน
cancelButtonTextstring"ยกเลิก" (th) / "Cancel" (en)ข้อความปุ่มยกเลิก
autoTimeoutnumber-ระยะเวลาปิดอัตโนมัติ (ms)
onTimeoutfunction-ฟังก์ชันเมื่อหมดเวลา
onConfirmfunction-ฟังก์ชันเมื่อยืนยัน (รับ object จาก inputs)
onCancelfunction-ฟังก์ชันเมื่อยกเลิก
widthstring-ความกว้าง (เช่น "400px")
animationstring"fadeIn"animation ("fadeIn", "slideIn")
allowOutsideClickbooleanfalseอนุญาตให้คลิกนอกเพื่อปิด
customStyleobject-สไตล์เพิ่มเติม (ดูรายละเอียดด้านล่าง)
showcloseButtonbooleantrueแสดงปุ่มปิด (x)
รายละเอียด inputs
Propertyประเภทรายละเอียด
typestring"text", "email", "password", "textarea", "select", "radio", "checkbox"
namestringชื่อ input
labelstringข้อความ label
placeholderstringข้อความ placeholder
requiredbooleanบังคับกรอก
optionsarrayตัวเลือกสำหรับ select/radio
defaultstringค่าเริ่มต้น radio
checkedbooleancheckbox ถูกเลือก
validationfunctionฟังก์ชันตรวจสอบ
errorMessagestringข้อความ error
รายละเอียด customButtons
Propertyประเภทรายละเอียด
textstringข้อความปุ่ม
onClickfunctionฟังก์ชันเมื่อคลิก
classstringคลาส CSS
colorstringสีข้อความ
backgroundstringสีพื้นหลัง
รายละเอียด customStyle
Propertyประเภทรายละเอียด
overlayBackgroundColorstringสีพื้นหลัง overlay
overlayBackgroundImagestringURL รูปภาพ overlay
bodyBackgroundColorstringสีพื้นหลัง popup
bodyBackgroundImagestringURL รูปภาพ popup
confirmButtonColorstringสีข้อความปุ่มยืนยัน
progressBarColorstringสี progress bar
iconBorderColorstringสีขอบไอคอน

ฟังก์ชัน boxToast

คำอธิบาย: ใช้สำหรับแสดง toast notification ที่ปรับแต่งได้

ตัวเลือก (Options)

ตัวเลือกประเภทค่าเริ่มต้นรายละเอียด
textstring"บันทึกข้อมูลสำเร็จ!" (th) / "Data saved successfully!" (en)ข้อความ toast
iconstring-ไอคอน ("success", "error", "warning", "info")
durationnumber3000ระยะเวลาแสดง (ms)
positionstring"top-right"ตำแหน่ง ("top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center", "center")
showProgressbooleanfalseแสดง progress bar
closeOnClickbooleantrueคลิกเพื่อปิด
languagestring"th"ภาษา ("th" หรือ "en")

ตัวอย่างการใช้งาน

Popup Basic
boxAlert({
    title: "Box Alert",
    text: "BoxAlert ยินดีต้อนรับ"
});
                    
Popup ยืนยัน
boxAlert({
    title: "ยืนยันการลบ",
    text: "คุณแน่ใจหรือไม่ว่าต้องการลบข้อมูลนี้?",
    icon: "warning",
    showCancelButton: true,
    onConfirm: () => console.log("Data deleted"),
    onCancel: () => console.log("Deletion canceled")
});
                    
Popup ฟอร์ม
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)
});
                    
Toast Success
boxToast({
    text: "บันทึกข้อมูลสำเร็จ!",
    icon: "success",
    duration: 5000,
    position: "top-right",
    showProgress: true
});
                    
Toast Error
boxToast({
    text: "เกิดข้อผิดพลาด!",
    icon: "error",
    duration: 5000
});