jQuery UI API - ตัวแทนโต้ตอบ (Dialog Widget)
หมวดหมู่
การใช้
คำอธิบาย: เนื้อหาที่เปิดในการซ้อนทับแบบโต้ตอบ
ใหม่เวอร์ชัน: 1.0
โต้ตอบเป็นหน้าต่างลอยที่มีแถบชื่อเรื่องและพื้นที่เนื้อหา หน้าต่างที่สามารถเคลื่อนย้ายปรับขนาดเริ่มต้นด้วยไอคอน 'X' เพื่อปิด
ถ้าความยาวของเนื้อหาเกินความสูงสูงสุดแถบเลื่อนจะปรากฏขึ้นโดยอัตโนมัติ
บาร์ปุ่มด้านล่างและโหมดการซ้อนทับกึ่งโปร่งใสเป็นธรรมดาที่จะเพิ่มตัวเลือก
โฟกัส
เมื่อคุณเปิดกล่องโต้ตอบโฟกัสโดยอัตโนมัติจะย้ายไปตามเกณฑ์ดังต่อไปนี้รายการแรกไปนี้:
- ด้วย
autofocusองค์ประกอบแรกที่อยู่ในกล่องโต้ตอบคุณสมบัติ - ครั้งแรกที่เนื้อหาภายในกล่องโต้ตอบ
:tabbableองค์ประกอบ - แผงแรกภายในปุ่มโต้ตอบ
:tabbableองค์ประกอบ - กล่องโต้ตอบปุ่มปิด
- กล่องโต้ตอบตัวเอง
เมื่อเปิดส่วนประกอบโต้ตอบ (Dialog Widget) ให้แน่ใจว่ากล่องเพื่อสลับโฟกัสระหว่างองค์ประกอบโดยแท็บกล่องโต้ตอบไม่รวมถึงองค์ประกอบภายนอก กิริยาโต้ตอบป้องกันไม่ให้ผู้ใช้คลิกเมาส์องค์ประกอบนอกกล่องโต้ตอบ
เมื่อปิดโต้ตอบโฟกัสโดยอัตโนมัติกลับไปก่อนหน้านี้กล่องโต้ตอบเปิดโฟกัสองค์ประกอบ
ซ่อนปุ่มปิด
ในบางกรณีคุณอาจต้องการที่จะซ่อนปุ่มปิดตัวอย่างเช่นแผงปุ่มมีปุ่มเพื่อปิดคดี ทางออกที่ดีที่สุดคือผ่าน CSS ตัวอย่างเช่นคุณสามารถกำหนดกฎง่ายๆเช่น:
.no ใกล้ชิด .ui-โต้ตอบ titlebar ใกล้ชิด {
display: none;
}
จากนั้นคุณสามารถเพิ่ม no-close ชั้นเรียนไปยังกล่องโต้ตอบโดยพลการใช้ในการซ่อนปุ่มปิด:
$ ( "#dialog") .dialog ({
dialogClass: "ไม่อย่างใกล้ชิด"
ปุ่ม: [
{
ข้อความ: "OK"
คลิกที่: ฟังก์ชั่น () {
$ (นี้) .dialog ( "ใกล้");
}
}
]
});
ชุดรูปแบบ
ส่วนประกอบโต้ตอบ (โต้ตอบ Widget) โดยใช้ jQuery UI กรอบ CSS เพื่อกำหนดรูปลักษณ์และความรู้สึกของสไตล์ หากคุณจำเป็นต้องใช้กล่องโต้ตอบเพื่อระบุรูปแบบที่คุณสามารถใช้ชื่อคลาส CSS ต่อไปนี้:
-
ui-dialog: ภาชนะนอกโต้ตอบ-
ui-dialog-titlebar: กล่องโต้ตอบมีชื่อและปุ่มปิดของแถบชื่อเรื่อง-
ui-dialog-title: ข้อความโต้ตอบของชื่อเรื่องรอบภาชนะ -
ui-dialog-titlebar-close: ปุ่มเพื่อปิดกล่องโต้ตอบ
-
-
ui-dialog-content: เนื้อหาโต้ตอบรอบภาชนะ และนี่ก็เป็นส่วนหนึ่งขององค์ประกอบที่มีอินสแตนซ์ -
ui-dialog-buttonpane: มีแผงปุ่มโต้ตอบ เฉพาะเมื่อตั้งค่าbuttonsเมื่อเลือกที่จะนำเสนอ-
ui-dialog-buttonset: ปุ่มรอบภาชนะ
-
-
นอกจากนี้เมื่อตั้ง modal ตัวเลือกเวลาที่มี ui-widget-overlay ชื่อชั้นองค์ประกอบถูกผนวกเข้ากับ <body>
วางใจ
- UI หลัก (UI หลัก)
- ห้องสมุดองค์ประกอบ (โรงงาน Widget)
- ที่ตั้ง (ตำแหน่ง)
- องค์ประกอบ Button (ปุ่ม Widget)
- เครื่องมือที่สามารถลากได้ (คนที่สามารถลาก Widget ที่) (ตัวเลือก; เมื่อ
draggableเมื่อใช้ร่วมกับตัวเลือก) - เครื่องมือปรับขนาดได้ (คน Widget ที่ปรับขนาดได้) (ไม่จำเป็นเมื่อและ
resizableเมื่อใช้ร่วมกับตัวเลือก) - ผลกระทบหลัก (หลักผลกระทบ) (ตัวเลือก; เมื่อ
showและhideเมื่อใช้ร่วมกับตัวเลือก)
ข้อมูลเพิ่มเติม
- ส่วนที่ต้องมีการทำงาน CSS มิฉะนั้นมันจะไม่ทำงาน ถ้าคุณสร้างธีมที่กำหนดเองใช้วิดเจ็ตที่ระบุ CSS แฟ้มเป็นจุดเริ่มต้น
ตัวอย่าง
ง่าย jQuery UI การโต้ตอบ (Dialog)
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> ส่วนประกอบโต้ตอบ (Dialog Widget) สาธิต </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ head>
<body>
<ปุ่ม id = "เปิด"> โต้ตอบเปิด </ ปุ่ม>
<div id = "โต้ตอบ" title = "โต้ตอบชื่อ"> ผมโต้ตอบ </ div>
<script>
$ ( "#dialog") .dialog ({AutoOpen: เท็จ});
$ ( "#opener") จำนวนคลิก (ฟังก์ชั่น () {
$ ( "#dialog") .dialog ( "เปิด");
});
</ script>
</ body>
</ html>