ประสบการณ์สรุปประสบการณ์การพัฒนาเมโทรนิเมชั่น Bootstrap [หก] กล่องโต้ตอบและการประมวลผลและการเพิ่มประสิทธิภาพกล่องและการปรับให้เหมาะสม

ในกระบวนการพัฒนาเว็บที่หลากหลายการประมวลผลกล่องโต้ตอบและกล่องพรอมต์เป็นเทคโนโลยีการประมวลผลอินเทอร์เฟซที่พบบ่อยมาก หากใช้งานได้ดีสามารถให้ประสบการณ์หน้าเว็บที่ดีแก่ผู้ใช้ เช่นเดียวกับการพัฒนา bootstrap เรามักจะใช้เลเยอร์กล่องโต้ตอบป๊อปอัปเพื่อแสดงข้อมูลบนอินเทอร์เฟซเช่นการเพิ่มการแก้ไขและการดูรายละเอียด เมื่อลบกล่องยืนยันที่รวดเร็วอาจใช้ หากการดำเนินการสำเร็จเราสามารถใช้กล่องพรอมต์ที่สมบูรณ์ยิ่งขึ้นเพื่อจัดการ บทความนี้ส่วนใหญ่เปรียบเทียบประเด็นทางเทคนิคเหล่านี้ที่ใช้ในการพัฒนา bootstrap

1. การใช้กล่องโต้ตอบ bootstrap

bootstrap ปกติมีกล่องโต้ตอบหลายขนาดรวมถึงกล่องโต้ตอบขนาดเล็กที่มีสถานะเริ่มต้นกล่องโต้ตอบความกว้างปานกลางและกล่องโต้ตอบขนาดเต็ม อินเทอร์เฟซกล่องโต้ตอบของ bootstrap เป็นมิตรมาก เมื่อเราใช้คีย์ ESC หรือคลิกช่องว่างอื่น ๆ ด้วยเมาส์กล่องโต้ตอบจะถูกซ่อนไว้โดยอัตโนมัติ

คำจำกัดความของพวกเขาแตกต่างกันเช่นต่อไปนี้เป็นรหัสอินเตอร์เฟสกล่องโต้ตอบขนาดเล็กเริ่มต้น:

 - - data-toggle = "validator" enctype = "multipart/form-data"> <div> <div> <div> <div> <div> <dable> รหัสพาเรนต์ </label> <div> <select id = "pid" name = "pid" type = "text" placeholder = "รหัสหลัก ... <div> <อินพุต id = "name" name = "name" type = "text" placeholder = "ชื่อ ... "/> </div> </div> </div> <div> <divel <div> <อินพุต type = "hidden" id = "id" name = "id"/> <button type = "subment"> ยืนยัน </button> <button type = "ปุ่ม" data-dismiss = "modal"> ยกเลิก </button> </div>

อินเทอร์เฟซโดยประมาณมีดังนี้:

ให้ความสนใจกับรหัสสไตล์การโต้ตอบในรหัสข้างต้นดังนี้:

 <div>

หากเป็นฐานข้อมูลของอีกสองขนาดคุณจะต้องแก้ไขที่นี่เท่านั้น สองรหัสที่แสดงด้านล่างคือ:

 <div>

เช่นเดียวกับ

 <div>

เราสามารถตัดสินใจได้ว่าขนาดของคำจำกัดความของเลเยอร์กล่องโต้ตอบที่จะนำมาใช้ตามเลย์เอาต์ขององค์ประกอบอินเตอร์เฟส แต่วิธีการโทรของกล่องโต้ตอบเหล่านี้มีความสอดคล้องกัน

อินเทอร์เฟซกล่องโต้ตอบมีดังนี้:

 // show สามารถเลือกลูกค้า $ ("#btnselectcustomer"). show ();

อินเทอร์เฟซกล่องโต้ตอบปิดมีดังนี้:

 $ ("#add"). modal ("ซ่อน");

โดยทั่วไปแล้วกล่องโต้ตอบที่เราปรากฏขึ้นเป็นแบบฟอร์มที่สามารถดำเนินการส่งได้คล้ายกับการบันทึกข้อมูล ดังนั้นจึงจำเป็นต้องตรวจสอบข้อมูลของแบบฟอร์ม หากมีข้อผิดพลาดเราอาจต้องเตือนในอินเทอร์เฟซ ดังนั้นเมื่อหน้าเริ่มต้นกฎการตรวจสอบของแบบฟอร์มจะต้องเริ่มต้น ด้านล่างคือการดำเนินการเริ่มต้นแบบฟอร์มปกติของเรา

 // ผูกฟังก์ชันเหตุการณ์ที่เกี่ยวข้อง bindeVent () {// ตัดสินว่าข้อมูลฟอร์มผ่านการตรวจสอบ $ ("#ffadd") ตรวจสอบ ({meta: "ตรวจสอบ", ข้อผิดพลาด: 'span', errorclass: 'help-block block-error' }, ความสำเร็จ: ฟังก์ชั่น (ฉลาก) {label.closest ('. form-group'). RemoveClass ('Have-error'); }, submithandler: ฟังก์ชั่น (แบบฟอร์ม) {$ ("#add"). modal ("ซ่อน"); การประมวลผลของ $ ('#file-portrait'). FileInput ('Upload'); ฟังก์ชั่นโปรดติดต่อผู้ดูแลระบบเพื่อจัดการ ");});}}); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

แต่โดยทั่วไปแล้วรหัสเหล่านี้จะทำซ้ำมากดังนั้นเราจึงสามารถห่อหุ้มฟังก์ชั่นและนำรหัสมาใช้ซ้ำเพื่อใช้รหัสการประมวลผลที่ง่ายขึ้น แต่เรายังสามารถบรรลุเป้าหมายได้

 // การผูกฟังก์ชันเหตุการณ์ที่เกี่ยวข้อง bindeVent () {// เพิ่มและแก้ไขบันทึก formValidate ("ffadd", ฟังก์ชั่น (รูปแบบ) {$ ("#add"). modal ("ซ่อน"); // ส่งพารามิเตอร์โครงสร้างไปยังพื้นหลัง var postdata = $ ("#ffadd") $ PARSEJSON (JSON); ผู้ดูแลระบบเพื่อจัดการ ");});}); - -

2. การประมวลผลกล่องโต้ตอบยืนยันการยืนยัน

1) การใช้ปลั๊กอิน bootbox

นอกเหนือจากกล่องโต้ตอบปกติด้านบนเรามักจะพบกล่องโต้ตอบยืนยันอย่างกระชับ แม้ว่ารหัสข้างต้นสามารถใช้ในการสร้างกล่องโต้ตอบยืนยันได้ แต่ก็ไม่จำเป็นที่จะต้องลำบากโดยทั่วไป คุณสามารถใช้กล่องโต้ตอบยืนยันของปลั๊กอิน bootbox เพื่อจัดการ

bootbox.js เป็นไลบรารี JavaScript ขนาดเล็กที่ช่วยให้คุณสร้างกล่องโต้ตอบได้อย่างรวดเร็วเมื่อใช้เฟรมเวิร์ก Bootstrap และยังสามารถช่วยคุณสร้างจัดการหรือลบองค์ประกอบ DOM ที่จำเป็นหรือตัวจัดการเหตุการณ์ JS

bootbox.js ใช้สามวิธีในการออกแบบเลียนแบบ JavaScript ดั้งเดิมของพวกเขาบางวิธี ลายเซ็นวิธีการที่แน่นอนของพวกเขามีความยืดหยุ่นสำหรับแต่ละคนในการใช้พารามิเตอร์ต่าง ๆ เพื่อปรับแต่งฉลากและระบุค่าเริ่มต้น แต่พวกเขามักจะเรียกว่าเดียวกัน:

bootbox.alert (ข้อความโทรกลับ)

bootbox.prompt (ข้อความโทรกลับ)

bootbox.confirm (ข้อความโทรกลับ)

พารามิเตอร์ที่จำเป็นเท่านั้นคือการแจ้งเตือนคือข้อความ จำเป็นต้องมีการโทรกลับเพื่อยืนยันและโทรแจ้งเพื่อตรวจสอบการตอบสนองของผู้ใช้ แม้ว่าการโทรกลับการโทรกลับจะถูกกำหนดเมื่อผู้ใช้ปฏิเสธกล่องโต้ตอบเพราะวิธีการห่อของเราไม่สามารถบล็อกได้เช่นภาษาพื้นเมืองของพวกเขามีประโยชน์: พวกเขาเป็นแบบอะซิงโครนัสมากกว่าซิงโครนัส

ทั้งสามวิธีเรียกวิธีการสาธารณะหนึ่งในสี่ของวิธีการสาธารณะซึ่งคุณสามารถสร้างโดยใช้กล่องโต้ตอบที่กำหนดเองของคุณเอง:

 bootbox.dialog (ตัวเลือก)

สำหรับเอกสารช่วยเหลือ API เพิ่มเติมโปรดดู: http://bootboxjs.com/documentation.html

เตือน

 bootbox.alert ("Hello World!", function () {example.show ("Hello World Callback");});

ยืนยัน

 bootbox.confirm ("คุณแน่ใจหรือไม่", ฟังก์ชั่น (ผลลัพธ์) {example.show ("ยืนยันผลลัพธ์:"+ผลลัพธ์);});

หรือรหัส:

 bootbox.confirm ("คุณแน่ใจหรือไม่ว่าคุณจะลบระเบียนที่เลือก?", ฟังก์ชั่น (ผลลัพธ์) {ถ้า (ผลลัพธ์) {// ในที่สุดลบเครื่องหมายจุลภาคสุดท้าย, ids = ids.substring (0, ids.length - 1); // จากนั้นส่งข้อมูลคำขอแบบ asynchronous Postdata, ฟังก์ชั่น (JSON) {var data = $ .parsejson (JSON); -

แจ้ง

 bootbox.prompt ("ชื่อของคุณคืออะไร", ฟังก์ชัน (ผลลัพธ์) {ถ้า (ผลลัพธ์ === null) {example.show ("คำสั่งยกเลิก");} else {example.show ("hi <b>"+ผลลัพธ์+"</b>");}});

กล่องโต้ตอบที่กำหนดเอง

ผลของการใช้รหัสและอินเทอร์เฟซมีดังนี้:

 bootbox.dialog (…)

[2)

2) การใช้ปลั๊กอิน Sweetalert

แม้ว่าเอฟเฟกต์ข้างต้นจะสอดคล้องกับรูปแบบของ bootstrap แต่อินเทอร์เฟซนั้นค่อนข้างน่าเบื่อหน่าย เอฟเฟกต์ข้างต้นไม่ใช่สิ่งที่ฉันชอบมากฉันพบเอฟเฟกต์ที่ดูสวยงามมากขึ้นดังที่แสดงด้านล่าง

เอฟเฟกต์นี้ถูกนำไปใช้โดยการแนะนำปลั๊กอิน Sweetalert (http://t4t5.github.io/sweetalert/)

 SWAL ({title: "Operation Prompt", ข้อความ: newTips, ประเภท: "คำเตือน", showcancelButton: จริง, ยืนยัน BUTTONCOLOR: "#DD6B55", CANCELBUTTONTEXT: "CANCEL", INVENTBUTTONTEXT: "ใช่

รหัสการใช้งานที่มีเอฟเฟกต์อินเทอร์เฟซที่คล้ายกันด้านบนมีดังนี้:

โดยทั่วไปแล้วรหัสป๊อปอัพสามารถทำได้ง่ายมากดังที่แสดงด้านล่าง

3. การประมวลผลกล่องพรอมต์ข้อมูล

การประมวลผลสองรายการข้างต้นถูกนำไปใช้โดยใช้กล่องโต้ตอบป๊อปอัพและบล็อกอินเทอร์เฟซ โดยทั่วไปเราทำข้อมูลแจ้งโดยหวังว่าจะไม่ส่งผลกระทบต่อการดำเนินงานต่อไปของเราหรืออย่างน้อยก็ให้เอฟเฟกต์การหายตัวไปโดยอัตโนมัติสั้น ๆ

ดังนั้นที่นี่เราจะแนะนำปลั๊กอิน JNotify และปลั๊กอินขนมปังปิ้ง

1) การใช้กล่องพรอมต์ jnotify

JNotify Box, ปลั๊กอินที่พรอมต์ JQuery ที่ยอดเยี่ยม หลังจากส่งแบบฟอร์มเราตอบกลับพื้นหลังผ่าน AJAX และส่งคืนผลลัพธ์และแสดงข้อมูลการส่งคืนในเบื้องหน้า JNotify สามารถแสดงข้อมูลผลลัพธ์การดำเนินการได้อย่างสง่างามมาก JNotify เป็นปลั๊กอินที่ใช้ข้อมูลตามข้อมูลที่ใช้ jQuery ซึ่งรองรับวิธีการแจ้งข้อมูลสามวิธี: ความสำเร็จในการดำเนินการ, การดำเนินการล้มเหลวและการแจ้งเตือนการทำงาน JNotify Browser มีความเข้ากันได้ดีมากรองรับการเปลี่ยนเนื้อหาพรอมต์รองรับตำแหน่งตำแหน่งของกล่องพรอมต์และสามารถกำหนดค่าพารามิเตอร์ปลั๊กอินได้

 jsuccess (ข้อความ, {ตัวเลือก}); jerror ("การดำเนินการล้มเหลวโปรดลองอีกครั้ง !!"); jnotify ("หมายเหตุ: โปรดปรับปรุง <strong> ข้อมูลส่วนบุคคลของคุณ! </strong>");

การกำหนดค่าโดยละเอียดของพารามิเตอร์ JNotify:

 autohide: จริง, // ไม่ว่าจะซ่อนแถบพรอมต์ clickoverlay โดยอัตโนมัติ: เท็จ, // ไม่ว่าจะคลิกเลเยอร์มาสก์เพื่อปิดแถบพรอมต์ minwidth: 200, // ความกว้างต่ำสุด timeshown: 1500, // เวลาแสดง: Milliseconds HISTIMEEFFECT: 200, // TIME LongTrip: 15, // การกระจัดเมื่อแถบพรอมต์ปรากฏขึ้นและซ่อนแนวแนวนอน: "ขวา", // ตำแหน่งแนวนอน: ซ้าย, กลาง, ขวา, ตำแหน่ง: "ด้านล่าง", // ตำแหน่งแนวตั้ง: ด้านบน, ก้น, ก้นบึ้ง: true, // ความโปร่งใสของเลเยอร์หน้ากาก onclosed: fn // หลังจากปิดกล่องพรอมต์แล้วดำเนินการฟังก์ชั่นคุณสามารถโทรหา jnotify อื่น ๆ อีกครั้ง ดังที่ได้กล่าวไว้ข้างต้นการโทรทั้งสามจะถูกเรียกตามลำดับ

ด้านล่างนี้เป็นวิธีการสาธารณะที่ฉันห่อหุ้มในคลาสสคริปต์เพื่อให้ได้การแสดงผลของเอฟเฟกต์พรอมต์

 // แสดงข้อผิดพลาดหรือข้อความพรอมต์ (ต้องการไฟล์ที่เกี่ยวข้อง jnotify) ฟังก์ชั่นอาบน้ำ (เคล็ดลับ, timeshown, autohide) {jerror (เคล็ดลับ, {autohide: autohide || true, // เพิ่มใน v2.0 timeshown: timeshown || 1500 oncompleted: function () {// เพิ่มใน v2.0 // alert ('jnofity เสร็จสมบูรณ์!'); 'center', แนวตั้ง: 'top', showoverlay: จริง, coloroverlay: '#000', oncompleted: function () {// เพิ่มใน v2.0 // การแจ้งเตือน ('Jnofity เสร็จสมบูรณ์!');

ด้วยวิธีนี้เมื่อเราใช้วิธีการโพสต์ของ Ajax เราสามารถแจ้งตามความต้องการที่แตกต่างกัน

 var postdata = $ ("#ffadd"). serializeArray (); $ .post (url, postdata, function (JSON) {var data = $ .parsejson (json); ถ้า (data.success) {// เพิ่มการประมวลผลการอัปโหลดของภาพบุคคล $ ('#file-portrait') refresh (upload ') {showerror ("บันทึกล้มเหลว:" + data.errorMessage, 3000);

2) การใช้ปลั๊กอิน TOAST

ToArtr เป็นไลบรารี JavaScript สำหรับการสร้างข้อความเตือนข้อความ GNOME/GROWL แบบไม่ปิดกั้น ToArtr สามารถตั้งค่าโหมดการแจ้งเตือนสี่โหมด: ความสำเร็จข้อผิดพลาดคำเตือนและพรอมต์ ตำแหน่งของหน้าต่างพรอมต์และเอฟเฟกต์ภาพเคลื่อนไหวสามารถตั้งค่าได้ตามจำนวนพลังงาน ในเว็บไซต์อย่างเป็นทางการคุณสามารถเลือกพารามิเตอร์เพื่อสร้าง JS ซึ่งสะดวกมากในการใช้งาน

ที่อยู่ปลั๊กอินคือ: http://codeseven.github.io/toastr/

มันสามารถสร้างเอฟเฟกต์ต่อไปนี้: คำเตือนอันตรายความสำเร็จข้อมูลการโต้ตอบที่รวดเร็วเอฟเฟกต์มีดังนี้

รหัสการใช้งาน JS แสดงอยู่ด้านล่าง

 // แสดงคำเตือนไม่มีชื่อ toAstr.warning ('ชื่อของฉันคือ Inigo Montoya คุณฆ่าพ่อของฉันเตรียมที่จะตาย!') // แสดงความสำเร็จชื่อ toAstr.success ('มีความสนุกสนานบุกปราสาท! toastr.clear ()

คำจำกัดความของพารามิเตอร์ของปลั๊กอินนี้มีดังนี้

 // การตั้งค่าพารามิเตอร์หากใช้ค่าเริ่มต้นรุ่นต่อไปนี้ของ toAstr.options = {"closeButton": false, // ไม่ว่าจะแสดงปุ่มปิด "debug": false, // ว่าจะใช้โหมดดีบั๊ก // เวลาแอนิเมชั่นหายไป "หมดเวลา": "5000", // เวลาที่แสดง "ExtendedTimeOut": "1,000", // เวลาแสดงผลขยายเวลา "showining": "Swing", // วิธีการบัฟเฟอร์แอนิเมชั่นในระหว่างการแสดง "hideasing": "linear", // วิธีการบัฟเฟอร์แอนิเมชั่น " // วิธีการเคลื่อนไหวเมื่อหายไป}; // ความสำเร็จแจ้งให้ผูก $ ("#success") คลิก (function () {toastr.success ("ขอแสดงความยินดีกับความสำเร็จของคุณ");})

ข้างต้นเป็นบทสรุปของฉันเกี่ยวกับประสบการณ์ของฉันในการประมวลผลและการเพิ่มประสิทธิภาพของกล่องโต้ตอบและกล่องแจ้งเตือนในโครงการ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้และปรับปรุงเว็บอินเตอร์เฟส หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดให้ความสนใจกับเว็บไซต์ Wulin.com!