ตัวอย่างเช่น jQuery UI - โต้ตอบ (Dialog)
เปิดเนื้อหาในการซ้อนทับแบบโต้ตอบ
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับส่วนประกอบโต้ตอบดูเอกสาร API ส่วนประกอบโต้ตอบ (Dialog Widget ที่)
ฟังก์ชั่นเริ่มต้น
หน้าต่างข้อความพื้นฐานอยู่ในตำแหน่งที่อยู่ในโซนการรับชมในชั้นฝาครอบผ่าน IFRAME และหน้าเนื้อหาแยกออกจากกัน (เช่นเลือกองค์ประกอบ) มันประกอบด้วยแถบชื่อเรื่องและองค์ประกอบพื้นที่เนื้อหาและสามารถเคลื่อนย้ายปรับขนาดเริ่มต้นด้วยไอคอน 'X' เพื่อปิด
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI การโต้ตอบ (Dialog) - ฟังก์ชั่นเริ่มต้น </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#dialog") .dialog ();
});
</ script>
</ head>
<body>
<div id = "โต้ตอบ" title = "โต้ตอบพื้นฐาน">
<p> นี่คือการเริ่มต้นกล่องโต้ตอบสำหรับการแสดงข้อมูล หน้าต่างที่สามารถเคลื่อนย้ายปรับขนาดเริ่มต้นด้วยไอคอน 'X' เพื่อปิด </ p>
</ div>
</ body>
</ html>
นิเมชั่น
คุณสามารถระบุลักษณะพิเศษ / ซ่อนแสดงคุณสมบัติการเคลื่อนไหวเพื่อแสดงกล่องโต้ตอบ คุณต้องดูไฟล์ที่แยกต่างหากสำหรับผลที่คุณต้องการที่จะใช้เทคนิคพิเศษ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI การโต้ตอบ (Dialog) - อะนิเมะ </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "#dialog") .dialog ({
AutoOpen: เท็จ
แสดง: {
ผลกระทบ: "ตาบอด"
ระยะเวลา: 1000
}
ซ่อน: {
ผลกระทบ: "ระเบิด"
ระยะเวลา: 1000
}
});
$ ( "#opener") จำนวนคลิก (ฟังก์ชั่น () {
$ ( "#dialog") .dialog ( "เปิด");
});
});
</ script>
</ head>
<body>
<div id = "โต้ตอบ" title = "โต้ตอบขั้นพื้นฐาน">
<p> นี่คือการแสดงภาพเคลื่อนไหวของกล่องโต้ตอบสำหรับการแสดงข้อมูล หน้าต่างที่สามารถเคลื่อนย้ายปรับขนาดเริ่มต้นด้วยไอคอน 'X' เพื่อปิด </ p>
</ div>
<ปุ่ม id = "เปิด"> โต้ตอบเปิด </ ปุ่ม>
</ body>
</ html>
โหมดพื้นฐาน
คำกริยาโต้ตอบส่วนที่เหลือของหน้าเพื่อป้องกันไม่ให้ผู้ใช้ภายนอกของกล่องโต้ตอบการโต้ตอบจนปิดกล่องโต้ตอบ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI การโต้ตอบ (Dialog) - กิริยาพื้นฐาน </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "# โต้ตอบกิริยา") .dialog ({
ความสูง: 140,
กิริยา: จริง
});
});
</ script>
</ head>
<body>
<div id = "โต้ตอบกิริยา" title = "ไดอะล็อกคำกริยาพื้นฐาน">
<p> เพิ่มกิริยาหน้าจอซ้อนทับให้ดูโดดเด่นมากขึ้นโต้ตอบเพราะมันหรี่ให้เนื้อหาอื่น ๆ บนหน้าเว็บ </ p>
</ div>
<p> SED หรือเส้นผ่าศูนย์กลาง ID Libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. แบบพกพา aliquet ราศีสิงห์หรือ Magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, Arcu Felis ultricies วัด, Amet นั่ง auctor Elit อยู่ Lectus. </ p>
</ body>
</ html>
ยืนยันคำกริยา
ยืนยันการดำเนินการทำลายก็อาจจะเป็นความรู้สึกที่เป็นไปได้ การตั้งค่า modal ตัวเลือกที่จะเป็นจริงและ buttons เพื่อกำหนดตัวเลือกการประถมศึกษาและมัธยมศึกษากระทำของผู้ใช้
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI การโต้ตอบ (Dialog) - การยืนยันกิริยา </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "# โต้ตอบยืนยัน") .dialog ({
ปรับขนาด: เท็จ
ความสูง: 140,
กิริยา: จริง
ปุ่ม: {
"ลบรายการทั้งหมด": ฟังก์ชั่น () {
$ (นี้) .dialog ( "ใกล้");
}
ยกเลิก: ฟังก์ชั่น () {
$ (นี้) .dialog ( "ใกล้");
}
}
});
});
</ script>
</ head>
<body>
<div id = "โต้ตอบยืนยัน" title = "ถังขยะ">
<p> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนแจ้งเตือน" style = "ลอย: ด้านซ้าย; margin: 0 20px 7px 0;"> </ span> รายการเหล่านี้จะถูกลบอย่างถาวรและไม่สามารถกู้คืน คุณแน่ใจหรือไม่? </ p>
</ div>
<p> SED หรือเส้นผ่าศูนย์กลาง ID Libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. แบบพกพา aliquet ราศีสิงห์หรือ Magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, Arcu Felis ultricies วัด, Amet นั่ง auctor Elit อยู่ Lectus. </ p>
</ body>
</ html>
แบบฟอร์มคำกริยา
Modal กล่องโต้ตอบเพื่อขอให้ผู้ใช้ป้อนข้อมูลในกระบวนการหลายขั้นตอน ฝังตัวอยู่ในรูปแบบแท็กพื้นที่เนื้อหาตั้ง modal ตัวเลือกที่จะเป็นจริงและ buttons เพื่อกำหนดตัวเลือกการประถมศึกษาและมัธยมศึกษากระทำของผู้ใช้
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI การโต้ตอบ (Dialog) - แบบฟอร์ม Modal </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<style>
ร่างกาย {font-size: 62.5%;}
ป้ายใส่ {display: บล็อก;}
input.text {margin ล่าง: 12px; ความกว้าง: 95%; padding: .4em;}
fieldset {padding: 0; ชายแดน: 0; ขอบด้านบน: 25 พิกเซล;}
h1 {font-size: 1.2em; margin: .6em 0;}
div # ผู้ใช้มี {ความกว้าง: 350px; margin: 20px 0;}
div # ผู้ใช้มีตาราง {margin: 1em 0; border-ล่มสลาย: การล่มสลายความกว้าง: 100%;}
div # ผู้ใช้ประกอบด้วย td ตาราง div # ผู้ใช้มีตาราง TH {ชายแดน: #eee 1px ของแข็ง padding: .6em 10px; text-align: ซ้าย;}
.ui โต้ตอบ .ui รัฐข้อผิดพลาด {padding: .3em;}
.validateTips {ชายแดน: 1px ของแข็งโปร่งใส; padding: 0.3em;}
</ style>
<script>
$ (ฟังก์ชั่น () {
ชื่อ var = $ ( "#name")
อีเมล = $ ( "#email")
รหัสผ่าน = $ ( "#password")
allFields = $ ([]) .add (ชื่อ) .add (อีเมล) .add (รหัสผ่าน)
เคล็ดลับ = $ ( ".validateTips");
updateTips ฟังก์ชั่น (T) {
เคล็ดลับ
.Text (T)
.addClass ( "UI-รัฐไฮไลท์");
setTimeout (ฟังก์ชั่น () {
tips.removeClass ( "UI-รัฐเน้น" 1500);
} 500);
}
ฟังก์ชั่น checkLength (O, N, นาที, สูงสุด) {
ถ้า (o.val (). ความยาว> Max || o.val (). ความยาว <นาที) {
o.addClass ( "UI-รัฐผิดพลาด");
updateTips ( "" + N + "ต้องอยู่ภายใต้" +
นาที + "ระหว่าง." "และ" แม็กซ์ + +);
กลับเท็จ;
} else {
กลับจริง;
}
}
ฟังก์ชั่น checkRegexp (O, regexp, n) {
ถ้า (! (regexp.test (o.val ()))) {
o.addClass ( "UI-รัฐผิดพลาด");
updateTips (n);
กลับเท็จ;
} else {
กลับจริง;
}
}
$ ( "# โต้ตอบแบบ") .dialog ({
AutoOpen: เท็จ
ความสูง: 300
ความกว้าง: 350
กิริยา: จริง
ปุ่ม: {
"สร้างบัญชี": ฟังก์ชั่น () {
var bValid = true;
allFields.removeClass ( "UI-รัฐผิดพลาด");
bValid = bValid && checkLength (ชื่อ "ชื่อ", 3, 16);
bValid = bValid && checkLength (อีเมล์, "อีเมล", 6, 80);
bValid = bValid && checkLength (รหัสผ่าน "รหัสผ่าน", 5, 16);
bValid = bValid && checkRegexp (ชื่อ / ^ [az] ([0-9a-z _]) + $ / i "ชื่อผู้ใช้ต้อง az, 0-9, ใต้และจะต้องเริ่มต้นด้วยตัวอักษร.");
// จาก jquery.validate.js (โดย Joern) สนับสนุนโดยสกอตต์อนซาเลซ: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp (อีเมล / ^ ((([az] | \ D | [# \ $% & '\ * \ + \ - \ / = \ \ ^ _ `{\ |} ~ !?] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([az] | \ D | [# \ $% & '\ * \ + \ - \ / = \ \!? ^ _` {\ |} ~] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) +) *) | ((\ x22) ((((\ x20 | \ x09) * ( \ x0d \ X0A)) (\ x20? | \ x09) +) (([\ x01- \ x08 \ x0b \ x0c \ x0e- \ x1f \ x7f]? | \ X21 | [\ x23- \ x5b] | [ \ x5d- \ x7e] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (\\ ([\ x01- \ x09 \ x0b \ x0c \ x0d- \ x7f] | [\ u00A0 - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF])))) * (((\ x20 | \ x09) * (\ x0d \ X0A)) (\ x20 | \ x09) +) (\ x22? ))) @ ((([az] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([az] | \ D | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ D | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([az]. | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([az] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ D | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] |.. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \ $ / i "เช่น UI @ jquery.com ");
bValid = bValid && checkRegexp (รหัสผ่าน / ^ ([0-9a-za-Z]) + $ / "ฟิลด์รหัสผ่านที่ได้รับอนุญาตเท่านั้น: AZ 0-9");
ถ้า (bValid) {
$ ( "เนื่องจากจำนวน tbody") .append ( "<tr>" +
"<td>" + name.val () + "</ td>" +
"<td>" + email.val () + "</ td>" +
"<td>" + password.val () + "</ td>" +
"</ tr>");
$ (นี้) .dialog ( "ใกล้");
}
}
ยกเลิก: ฟังก์ชั่น () {
$ (นี้) .dialog ( "ใกล้");
}
}
ใกล้: ฟังก์ชั่น () {
allFields.val ( "") .removeClass ( "UI-รัฐผิดพลาด");
}
});
$ ( "# สร้างผู้ใช้")
.button ()
จำนวนคลิก (ฟังก์ชั่น () {
$ ( "# โต้ตอบแบบ") .dialog ( "เปิด");
});
});
</ script>
</ head>
<body>
<div id = "โต้ตอบแบบ" title = "สร้างผู้ใช้ใหม่">
<p class = "validateTips"> ทุกเขตข้อมูลฟอร์มจะต้อง </ p>
<form>
<fieldset>
<label สำหรับ = "ชื่อ"> ชื่อ </ label>
<ประเภทขาเข้า = "text" name = "ชื่อ" id = "ชื่อ" class = "text UI-Widget เนื้อหา UI-มุมทั้งหมด">
<label สำหรับ = "อีเมล"> กล่องจดหมาย </ label>
<ประเภทขาเข้า = "text" name = "อีเมล" id = "อีเมล" value = "" class = "text UI-Widget เนื้อหา UI-มุมทั้งหมด">
<label สำหรับ = "รหัสผ่าน"> รหัสผ่าน </ label>
<ประเภทขาเข้า = "รหัสผ่าน" name = "รหัสผ่าน" id = "รหัสผ่าน" value = "" class = "text UI-Widget เนื้อหา UI-มุมทั้งหมด">
</ fieldset>
</ form>
</ div>
<div id = "ผู้ใช้มี" class = "UI-Widget">
<h1> ใช้ที่มีอยู่: </ h1>
<table id = "ผู้ใช้" class = "UI-Widget UI-Widget เนื้อหา">
<thead>
<ระดับ Tr = "UI-Widget หัว">
<Th> ชื่อ </ TH>
<Th> กล่องจดหมาย </ TH>
<Th> รหัสผ่าน </ TH>
</ tr>
</ thead>
<tbody>
<tr>
<td> จอห์นโด </ td>
<td> [email protected] </ td>
<td> johndoe1 </ td>
</ tr>
</ tbody>
</ table>
</ div>
<ปุ่ม id = "สร้างผู้ใช้"> สร้างผู้ใช้ใหม่ </ ปุ่ม>
</ body>
</ html>
ข้อความ Modal
Modal กล่องโต้ตอบเพื่อยืนยันข้อมูลและการกระทำก่อนที่จะดำเนินการต่อไปที่จะดำเนินการ การตั้งค่า modal ตัวเลือกที่จะเป็นจริงและ buttons เพื่อระบุตัวเลือกการดำเนินการหลัก (OK)
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI การโต้ตอบ (Dialog) - ข้อความกิริยา </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$ (ฟังก์ชั่น () {
$ ( "# โต้ตอบข้อความ") .dialog ({
กิริยา: จริง
ปุ่ม: {
ตกลง: ฟังก์ชั่น () {
$ (นี้) .dialog ( "ใกล้");
}
}
});
});
</ script>
</ head>
<body>
<div id = "โต้ตอบข้อความ" title = "ดาวน์โหลดเสร็จ">
<p>
<ระดับ Span = "UI-ไอคอน UI-ไอคอนวงกลมตรวจสอบ" style = "ลอย: ด้านซ้าย; margin: 0 50px 7px 0;"> </ span>
ไฟล์ของคุณได้รับการดาวน์โหลดประสบความสำเร็จไปยังโฟลเดอร์
</ p>
<p>
ปัจจุบันใช้พื้นที่จัดเก็บ <b> 36% </ b>
</ p>
</ div>
<p> SED หรือเส้นผ่าศูนย์กลาง ID Libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. แบบพกพา aliquet ราศีสิงห์หรือ Magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, Arcu Felis ultricies วัด, Amet นั่ง auctor Elit อยู่ Lectus. </ p>
</ body>
</ html>