في عمليات تطوير الويب المختلفة ، تعد معالجة مربعات الحوار وصناديق المطالبات تقنية شائعة جدًا لمعالجة الواجهة. إذا تم استخدامه بشكل جيد ، فقد يمنح المستخدمين تجربة صفحة جيدة. وينطبق الشيء نفسه على تطوير bootstrap. غالبًا ما نستخدم طبقات مربع الحوار المنبثقة لعرض البيانات على واجهات مثل إضافة التفاصيل وتحريرها وعرضها. عند الحذف ، يمكن استخدام مربع تأكيد موجه. إذا نجحت العملية ، فيمكننا استخدام مربع مطالبة أكثر ثراءً للتعامل معها. تقارن هذه المقالة بشكل أساسي هذه النقاط التقنية المستخدمة في تطوير bootstrap.
1. استخدام مربع الحوار bootstrap
يحتوي Bootstrap العادي على عدة أحجام من مربعات الحوار ، بما في ذلك مربعات الحوار الصغيرة ذات الحالة الافتراضية ، وصناديق الحوار متوسطة العرض ، وصناديق الحوار ذات الحجم الكامل. واجهة مربع الحوار من bootstrap ودودة للغاية. عندما نستخدم مفتاح ESC أو انقر فوق مسافات فارغة أخرى مع الماوس ، سيتم إخفاء مربع الحوار تلقائيًا.
تعاريفهم مختلفة تمامًا ، مثل ما يلي هو رمز واجهة الحوار الصغيرة الافتراضية:
<! --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-toggle = "div> <viv> <label> معرف الأصل </label> <div> <تحديد المعرف =" pid " <input id = "name" name = "name" type = "text" placeholder = "name ... <type type = "hidden" id = "id" name = "id"/> <button type = "submit"> تأكيد </button> <button type = "button" datisiss = "modal"
الواجهة التقريبية هي كما يلي:
انتبه إلى رمز نمط الحوار في الرمز أعلاه ، على النحو التالي:
<viv>
إذا كانت قاعدة بيانات للحجمين الآخرين ، فأنت بحاجة فقط إلى تعديلها هنا. الرموز الموضحة أدناه هما:
<viv>
إلى جانب
<viv>
يمكننا أن نقرر حجم تعريف طبقة الحوار التي يجب تبنيها بناءً على تخطيط عناصر الواجهة ، ولكن طرق استدعاء مربعات الحوار هذه متسقة.
واجهة مربع الحوار كما يلي:
// show يمكن تحديد العميل $ ("#btnselectcustomer"). show () ؛واجهة مربع الحوار الختامية هي كما يلي:
$ ("#add"). modal ("Hide") ؛بشكل عام ، مربع الحوار الذي نشعر به هو نموذج يمكنه إجراء عمليات التقديم المشابهة لحفظ البيانات. لذلك ، من الضروري التحقق من بيانات النموذج. إذا كان هناك خطأ ، فقد نحتاج إلى تذكيره على الواجهة. لذلك ، عند تهيئة الصفحة ، يجب تهيئة قواعد التحقق من النموذج. فيما يلي عمليات تهيئة النموذج العادية لدينا.
// pind ذات الصلة وظيفة الحدث bindevent () {// ugn {reform the form refortive $ ("#ffadd"). التحقق من صحة ({meta: } ، النجاح: {label.closest ('. element.parent ('div') إذا كان (Data.success) {// إضافة معالجة Portrait $ ( Showtips ("أنت غير مصرح لاستخدام هذه الوظيفة ، يرجى الاتصال بالمسؤول للتعامل معها.") ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}) ؛ }}}) ؛ }}}) ؛ }}ولكن بشكل عام ، سيتم تكرار هذه الرموز كثيرًا ، حتى نتمكن من تغليف الوظائف وإعادة استخدام بعض التعليمات البرمجية لاستخدام رمز معالجة أبسط ، ولكن يمكننا أيضًا تحقيق الهدف.
// bind أحداث الأحداث ذات الصلة وظيفة bindevent () {// إضافة وتحرير السجلات formValidate ("ffadd" ، الدالة (النموذج) {$ ("#add"). modal ("hide") ؛ // إرسال معلمات البناء إلى الخلفية var data = $ ("#ffadd"). serializearray () $ .parsejson (JSON) ؛ هو - هي.")؛ })؛ })؛ }) ؛ }2. حذف معالجة مربع التأكيد
1) استخدام المكونات الإضافية
بالإضافة إلى مربع الحوار العادي أعلاه ، نواجه غالبًا مربع حوار تأكيد موجز. على الرغم من أنه يمكن أيضًا استخدام الكود أعلاه لإنشاء مربع حوار التأكيد ، إلا أنه ليس من الضروري أن تكون مزعجة للغاية بشكل عام. يمكنك استخدام مربع حوار التأكيد في صندوق التمهيد المكون الإضافي للتعامل معه.
Bootbox.js هي مكتبة JavaScript صغيرة تساعدك على إنشاء مربع حوار بسرعة عند استخدام إطار Bootstrap ، ويمكن أن تساعدك أيضًا في إنشاء أو إدارة أو حذف أي عناصر DOM المطلوبة أو معالجات أحداث JS.
يستخدم Bootbox.js ثلاث طرق لتصميم محاكاة JavaScript الأصلية بعض الطرق. يعد توقيع الطريقة الدقيقة مرنًا لكل منهم لاتخاذ معلمات مختلفة لتخصيص التسمية وتحديد القيم الافتراضية ، ولكن غالبًا ما يطلق عليها نفس الشيء:
bootbox.alert (رسالة ، رد الاتصال)
bootbox.prompt (رسالة ، رد الاتصال)
BOOTBOX.CONFIRM (رسالة ، رد الاتصال)
المعلمات المطلوبة الوحيدة هي تنبيه هي رسالة ؛ يتطلب رد الاتصال لتأكيد المكالمات والمطالعة لتحديد استجابة المستخدم. حتى عند تحديد رد الاتصال على الإنذار عندما يرفض المستخدم مربع الحوار لأن طريقة التغليف الخاصة بنا لا يمكن أن تمنع مثل لغتهم الأم: فهي غير متزامنة وليست متزامنة.
هذه الطرق الثلاث تستدعي ربع طريقة عامة ، والتي يمكنك أيضًا إنشاءها باستخدام مربع الحوار المخصص الخاص بك:
bootbox.dialog (خيارات)
لمزيد من وثائق مساعدة API ، يرجى الاطلاع على: http://booboxjs.com/documentation.html
يُحذًِر
Bootbox.alert ("Hello World!" ، function () {example.show ("Hello World Callback") ؛}) ؛يتأكد
BOOTBOX.CONFIRM ("هل أنت متأكد؟" ، الدالة (النتيجة) {example.show ("تأكيد النتيجة:"+result) ؛}) ؛أو الكود:
bootbox.confirm ("هل أنت متأكد من أنك تحذف السجل المحدد؟" ، الوظيفة (النتيجة) {if (result) {// أخيرًا ، قم بإزالة الفاصلة الأخيرة ، ids = ids.substring (0 ، ids.length - 1) ؛ (json) {var data = $. parsejson (json) ؛ }}) ؛اِسْتَدْعَى
BOOTBOX.PROMPT ("ما هو اسمك؟" ، الدالة (النتيجة) {if (result === null) {example.show ("properfeded") ؛} آخر {example.show ("hi <b>"+result+"</b>") ؛}}) ؛مربع الحوار المخصص
تأثير استخدام الكود والواجهة هو كما يلي:
Bootbox.dialog (...)
[2)
2) استخدام المكونات الإضافية Sweetalert
على الرغم من أن التأثير أعلاه يتسق للغاية مع نمط bootstrap ، إلا أن الواجهة رتيبة بعض الشيء. التأثير أعلاه ليس ما أحبه كثيرًا ، واجهت تأثيرًا يبدو أكثر جمالًا ، كما هو موضح أدناه.
يتم تنفيذ هذا التأثير من خلال تقديم المكون الإضافي Sweetalert (http://t4t5.github.io/sweetalert/).
SWAL ({title: "Operation Proper" ، النص: Newtips ، النوع: "تحذير" ، ShowCancelButton: True ، ConfarceButtonColor: "#dd6b55" ، cancelbuttontext:رمز التنفيذ ذو تأثيرات واجهة مماثلة أعلاه هو كما يلي:
بشكل عام ، يمكن جعل الرمز المنبثق بسيطًا للغاية ، كما هو موضح أدناه.
3. معالجة مربع موجه المعلومات
يتم تنفيذ المعالجة أعلاه باستخدام مربعات الحوار المنبثقة وحظر الواجهة. بشكل عام ، نقوم بمطالبات المعلومات ، على أمل ألا تؤثر على عملياتنا الإضافية ، أو على الأقل توفير تأثير اختفاء تلقائي قصير جدًا.
لذا ، سنقدم المكونات الإضافية JNotify و Toast المكانية.
1) استخدام مربع موجه Jnotify
مربع مطالبة JNOTify ، وهو مكون مكون من jQuery Result Result Propin. بعد إرسال النموذج ، نرد على الخلفية من خلال AJAX وإرجاع النتائج وعرض معلومات الإرجاع في المقدمة. يمكن لـ jnotify عرض معلومات نتيجة العملية بأناقة للغاية. Jnotify هو مكون موجه للمطالبة بالمعلومات المستند إلى jQuery ، والذي يدعم ثلاث طرق موجه للمعلومات: نجاح العملية ، فشل العملية وتذكير التشغيل. يتمتع Jnotify Browser بتوافق جيد للغاية ، ويدعم تغيير المحتوى المطري ، ويدعم وضع موقع مربعات المطالبات ، ويمكنه تكوين معلمات المكونات.
JSuccess (Message ، {Option}) ؛ jerror ("فشل العملية ، يرجى المحاولة مرة أخرى !!") ؛ Jnotify ("ملاحظة: يرجى تحسين المعلومات الشخصية الخاصة بك! </strong>") ؛التكوين التفصيلي لمعلمات jnotify:
AutoHide: True ، // ما إذا كان يجب إخفاء شريط المطالبة تلقائيًا clickoverlay: false ، // ما إذا كان يجب النقر فوق طبقة القناع لإغلاق شريط minwidth: 200 ، // الحد الأدنى للوقت التجتني: 1500 ، // عرض الوقت: milliseconds showtimeefect: 15 ، // الإزاحة عند عرض الشريط المطالبه وإخفاء الأفق: "يمين" ، // الموضع الأفقي: اليسار ، المركز ، اليمين: "أسفل" ، // الموضع العمودي: TOP ، المركز ، BOTTORSHOWOVERLAY: TRUE ، // عرض الطبقة الملونة: "#000". Mask Layer Onclosed: fn // بعد إغلاق مربع المطالبة ، تنفيذ الوظيفة ، يمكنك استدعاء jnotify مرة أخرى. كما ذكر أعلاه ، يتم استدعاء المكالمات الثلاثة بالتسلسل.
فيما يلي الطريقة العامة التي قمت بتغليفها في فئة البرنامج النصي لتحقيق عرض التأثيرات السريعة.
. () {//تمت إضافته في V2.0 // ALERT ('jnofity اكتمل!') ؛ "TOP" ، Downerlay: True ، ColorOverlay: "#000" ، OnCompleted: Function () {// تمت إضافته في V2.0 // ALERT ("jnofity اكتمل!") ؛وبهذه الطريقة ، عندما نستخدم طريقة نشر Ajax ، يمكننا المطالبة وفقًا لاحتياجات مختلفة.
var postdata = $ ("#ffadd"). serializearray () ؛ $ .post (url ، postdata ، function (json) {var data = $ .parsejson (json) ؛ if (data.success) {// أضف معالجة التحميل للـ portrait $ ('#file-portrait'). دش ("حفظ فشل:" + data.errormessage ، 3000) ؛2) استخدام المكون الإضافي toast
Toastr هي مكتبة JavaScript لإنشاء تذكيرات رسالة على غرار Gnome/Growl ، غير الحظر. ، يمكن لـ Toastt تعيين أربعة أوضاع للإخطار: النجاح ، والخطأ ، والتحذير ، والمطالبة. يمكن تعيين موقع نافذة المطالبة وتأثيرات الرسوم المتحركة بعدد من الطاقة. على الموقع الرسمي ، يمكنك تحديد المعلمات لإنشاء JS ، وهو مريح للغاية للاستخدام.
عنوان البرنامج المساعد هو: http://codeseven.github.io/toast/
يمكن أن ينشئ التأثيرات التالية: التحذير ، الخطر ، النجاح ، معلومات الحوار السريع ، التأثير هو كما يلي.
يتم عرض رمز استخدام JS أدناه.
// أظهر تحذيرًا ، لا يوجد عنوان toastr.warning ("اسمي inigo montoya. لقد قتلت والدي ، واستعد للموت!") toastr.clear ()تعريف المعلمة لهذا المكون الإضافي كما يلي.
// إعداد المعلمات ، إذا تم استخدام القيمة الافتراضية ، فإن الجيل التالي من toastr.options = {"closeButton": false ، // ما إذا كان يجب عرض الزر الإغلاق "Debug": false ، // ما إذا كان يجب استخدام وضع التصحيح "الموضع": // // وقت الرسوم المتحركة يختفي "المهلة": "5000" ، // وقت العرض "ExtendedTimeout": "1000" ، // وقت العرض الموسع "عرض": "Swing" ، // طريقة التخزين المؤقت للرسوم المتحركة أثناء العرض "Hideise": "shinear" ، // الرسوم المتحركة للتخزين المؤقت عند اختفاء "show": "fadein" // طريقة الرسوم المتحركة عند اختفاء} ؛ // يطالب النجاح بربط $ ("#Success"). انقر فوق (Function () {toastr.success ("تهانينا على نجاحك") ؛})ما سبق هو ملخص لتجربتي في معالجة وتحسين مربعات الحوار وصناديق المطالبات في المشروع. آمل أن يكون من المفيد للجميع أن يتعلموا وتحسين واجهة الويب. إذا كنت تريد معرفة المزيد من المعلومات ، فيرجى الانتباه إلى موقع Wulin.com!