รู้เบื้องต้นเกี่ยวกับ bootstrip
Bootstrap จาก Twitter ปัจจุบันเป็นเฟรมเวิร์กส่วนหน้ายอดนิยม
Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น พัฒนาโดยนักออกแบบ Twitter Mark Otto และ Jacob Thornton มันเป็นกรอบ CSS/HTML
Bootstrap ให้ข้อมูลจำเพาะ HTML และ CSS ที่สง่างามซึ่งเขียนขึ้นในภาษา CSS แบบไดนามิกน้อยลง Bootstrap ได้รับความนิยมตั้งแต่เปิดตัวและเป็นโครงการโอเพ่นซอร์สยอดนิยมของ GitHub รวมถึงข่าวด่วนของ MSNBC ของ NASA เฟรมเวิร์กที่คุ้นเคยกับนักพัฒนามือถือในประเทศมากขึ้นเช่นเฟรมเวิร์กโอเพนซอร์ส WEX5 Front-end นั้นขึ้นอยู่กับซอร์สโค้ด Bootstrap สำหรับการเพิ่มประสิทธิภาพประสิทธิภาพ
1.1. ช่วยเหลือคำหลักเอกสาร
Boostrap Modal Box Oaodailog
1.2. สถานการณ์การใช้งาน
เมื่อมีการคลิกปุ่มบนหน้าเว็บผู้ใช้จะต้องยืนยันการยืนยันและผู้ใช้สามารถดำเนินการต่อเพื่อดำเนินการต่อหรือผู้ใช้คลิกปุ่มยกเลิกเพื่อยกเลิกการดำเนินการ
เมื่อคุณคลิกเพื่อดูบนหน้าเว็บและข้อมูลที่แสดงจะต้องแสดงโดยใช้กล่องป๊อปอัพคุณสามารถใช้ oaodailog
1.3. แผนผังแผนผัง
Modal ขึ้นอยู่กับ boostrap3.0, jQuery1.9
1.4. คำแนะนำสำหรับการใช้งาน
ทำไมคุณถึงต้องการ Oaodailog?
. เนื่องจากโมดอลที่จัดทำโดย boostrap3.0 รหัสที่ซ่อนอยู่ของโมดอลจะต้องกำหนดไว้ในหน้าก่อน ผู้ใช้เขียนเนื้อหาที่จะแสดงลงใน DIV หากหน้ามีกล่องโมดอลหลายกล่องต้องเขียนรหัสที่ซ่อนอยู่หลายกล่องซึ่งต้องเขียนซ้ำซึ่งซ้ำซ้อนอย่างไม่ต้องสงสัย
ข. เนื่องจาก Modal เริ่มต้นไม่มีปุ่มยืนยันและยกเลิกแน่นอนว่าเราสามารถเขียนสองปุ่มใน div ที่ซ่อนอยู่ของกล่อง modal แต่เราต้องเขียน JS เพื่อตรวจสอบการดำเนินการที่ดำเนินการหลังจากคลิกปุ่มยืนยัน ในเวลาเดียวกันการดำเนินการที่ดำเนินการโดยปุ่มยืนยันเกี่ยวข้องกับข้อมูลที่ผู้ใช้คลิกเมื่อป๊อปอัพ วิธีการส่งผ่านข้อมูล Bootstrap ไม่ได้ให้เรา
ค. Oaodailog เวอร์ชัน 1.0.0 ส่วนใหญ่แก้ปัญหาการใช้กล่องโมดอลที่ไม่สะดวกของ bootstrap และรหัสซ้ำซ้อน
ภาพการทำซ้ำ:
เริ่มต้นใช้งาน
1. แนะนำ oaodailog.js
รหัส:
<script type = "text/javascript" src = "$ {ctx}/static/jquery/jqueryapi/oaodialog/oao.dialog.js" charset = "utf-8"> </script>2. โทรรหัสที่แสดงกล่องป๊อปอัพ
รหัส:
oao.dialog ({title: "ลบกล่องพรอมต์", เนื้อหา: "โปรดยืนยันว่ามันถูกลบจริง ๆ มันจะไม่ถูกกู้คืนหลังจากการลบ!", ตกลง: function () {oao.dialog.close ();}});นี่เป็นวิธีพื้นฐานและทั่วไปในการใช้กล่องป๊อปอัพยืนยัน
1.5. API
OAO.Dialog (): วิธีนี้เป็นวิธีการสร้างกล่องป๊อปอัพ พารามิเตอร์ที่ผ่านเป็นวัตถุ JSON แน่นอนคุณไม่สามารถผ่านอะไรไปได้และกล่องป๊อปอัพที่ว่างเปล่าจะปรากฏขึ้นซึ่งไม่มีปัญหา ต่อไปนี้อธิบายถึงความหมายและค่าเริ่มต้นของแต่ละพารามิเตอร์
ชื่อแอตทริบิวต์ | ประเภทแอตทริบิวต์ | อธิบาย | ค่าเริ่มต้น |
ชื่อ | สาย | ชื่อกล่องป๊อปอัพ | คำใบ้ |
เนื้อหา | สาย | เนื้อหาหลักของกล่องป๊อปอัพสามารถเป็นข้อความและรหัส HTML | โมฆะ |
Okval | สาย | ข้อความที่กำหนดเองสำหรับปุ่มยืนยัน | ยืนยัน |
ตกลง | ฟังก์ชั่น/บูลีน | คลิกเพื่อยืนยันวิธีการดำเนินการ | ปิดฟังก์ชั่น |
ยกเลิก | สาย | ข้อความที่กำหนดเองสำหรับปุ่มยกเลิก | ยกเลิก |
เกี่ยวกับการเปลี่ยนแปลง | ฟังก์ชั่น/บูลีน | คลิกยกเลิกวิธีการดำเนินการ | ปิดฟังก์ชั่น |
• oao.dialog.close (): ปิดกล่องโมดอล
1.6. ฟังก์ชั่นที่จะรองรับ 1 ปัจจุบันเนื้อหาของกล่องป๊อปอัพรองรับข้อความและ HTML แบบคงที่เท่านั้นและไม่รองรับคำขอ URL
2. ปัจจุบันมีเพียงสองปุ่มเท่านั้นที่สามารถแสดงได้มากที่สุดและไม่รองรับปุ่มที่กำหนดเอง
3. ตำแหน่งและขนาดปัจจุบันของกล่องป๊อปอัพไม่รองรับการปรับแต่ง
4. ปัจจุบันมีกล่องป๊อปอัพเพียงชิ้นเดียวเท่านั้นที่สามารถปรากฏขึ้นได้ในแต่ละครั้งและไม่รองรับโผล่ขึ้นมาอีกกล่องโมดอลในกล่องป๊อปอัพ (Bootstrap Modal ไม่รองรับในเลเยอร์พื้นฐาน)
คอยติดตามพบคุณในเวอร์ชันถัดไป
/*!* oaodialog 1.0.0* ผู้แต่ง: Xufei* วันที่: 2015-7-9 1: 32* http: //www.oaoera.com* ลิขสิทธิ์© 2014 www.oaoera.com Inc. สงวนลิขสิทธิ์ Shanghai ICP หมายเลข 13024515-1 Shanghai Yixin e-Commommerce Co. , Ltd. ** นี่ได้รับใบอนุญาตภายใต้ GNU LGPL, เวอร์ชัน 2.1 หรือใหม่กว่า* สำหรับรายละเอียดดู: http://creativeCommonmons.org/licenses/lgpl/2.1/**/// ฟังก์ชั่น (การตั้งค่า) {var defaultSettings = {title: "พรอมต์", เนื้อหา: "", okval: "ยืนยัน", cancalval: "ยกเลิก", ok: function () {$ ("#oaomodal"). modal ('ซ่อน'); $ .extend ({}, ค่าเริ่มต้น, การตั้งค่า || {}); return oao.settings;} oao.initContent = function () {var modelhtml = "<div id =" oaomodal/"class =/ aria-labelledby =/"mymodallabel/" aria-hidden =/"true/"> "+" <div class =/"modal-dialog/"> "+" <div class =/"modal-content/"> "+" <div class =/"modal-header/"> "+" Aria-label =/"close/"> <span aria-hidden =/"true/"> × </span> </button> "+" <h4 class =/"modal-title/"> </h4> "+" </div> "+" <div class =/"modal-body/" style = " class =/"modal-footer/"> "+" <button type =/"button/" class =/"btn btn-default modalcancel/"> </button> "+" <button type =/"button/" class = "btn btn-primary modalok/"> </button> "+" $ modelhtml = $ (modelhtml); $ (". modalok", $ modelhtml) .text (oao.settings.okval); $ (". modalcancel", $ modelhtml) .Text (OAO .settings.cancalval); $ (". modal-title", $ modelhtml) .text (oao.settings.title); $ (". modal-body", $ modelhtm l) .html (oao.settings.content); ถ้า (! oao.settings.ok) {$ (". modalok", $ modelhtml). remove ();} ถ้า (! oao settings.cancel) {$ (". modalcancel", $ modelhtml) .remove ();} $ ("body"). ผนวก ($ modelhtml);} // เมธอด สำหรับกล่องโต้ตอบป๊อปอัพ oao.dialog = ฟังก์ชั่น (การตั้งค่า) {การตั้งค่า = oao.init (การตั้งค่า); oao.initcontent (); // วิธีการโทร $ ('#oaomodal') บน ('hidden.bs.modal', ฟังก์ชั่น (e) {ถ้า (oao.settings.close) {oao.settings.close ();} $ ("#oaomodal"). ลบ ();}) ถ้า (oao.settings.ok) {$ ("#oaomodal .Modalok") .Modalcancel "). คลิก (การตั้งค่า Cancel);} $ ("#oaomodal "). modal ('show'). css ({" margin-top ": function () {return ($ (this) .height ()/ 2-200);}}); function () {$ ("#oaomodal"). modal ('ซ่อน');}