Dailog على أساس bootstarp

مقدمة إلى bootstrip

يعد Bootstrap ، من Twitter ، حاليًا إطارًا شهيرًا للواجهة الأمامية.

يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع. تم تطويره بواسطة مصمم Twitter Mark Otto و Jacob Thornton ، وهو إطار CSS/HTML.

يوفر Bootstrap مواصفات HTML و CSS أنيقة ، والتي يتم كتابتها بلغة CSS الديناميكية أقل. كان Bootstrap شائعًا منذ إطلاقه وكان مشروعًا مفتوح المصدر شهير على Github ، بما في ذلك الأخبار العاجلة لـ MSNBC التابعة لـ NASA. تعتمد الأطر الأكثر دراية لمطوري المحمول المحليين ، مثل إطار المصدر المفتوح WEX5 ، أيضًا على رمز مصدر 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. إذا كانت الصفحة تحتوي على مربعات مشروطة متعددة ، فيجب كتابة رموز مخفية متعددة مخفية مخفية ، والتي لا شك فيها زائدة عن الحاجة.

ب. نظرًا لأن الوسائط الافتراضية لا تحتوي على زر تأكيد وإلغاء ، بالطبع يمكننا كتابة زريين في Div المخفي في المربع الوسيط ، لكننا نحتاج أيضًا إلى كتابة JS لمراقبة العمليات التي يتم تنفيذها بعد النقر فوق زر التأكيد. في الوقت نفسه ، ترتبط العمليات التي يتم تنفيذها بواسطة زر التأكيد بالبيانات التي نقرها المستخدم عند المنبثقة. كيف يتم تمرير البيانات ، لا توفر لنا bootstrap.

ج. يحل الإصدار 1.0.0 من Oaodailog مشكلة الاستخدام غير المريح لمربعات مشروط من 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: "Delete Promper Box" ، المحتوى: "يرجى تأكيد ما إذا تم حذفه حقًا ، ولن يتم استعادته بعد الحذف!" ، OK: function () {oao.dialog.close () ؛}}) ؛

هذه طريقة أساسية والأكثر شيوعًا لاستخدام مربع التأكيد المنبثق.

1.5. API

OAO.Dialog (): هذه الطريقة هي طريقة لإنشاء مربع منبثق. المعلمة التي تم تمريرها هي كائن JSON. بالطبع ، لا يمكنك تمرير أي شيء ، وسيظهر صندوق منبثق فارغ ، وهو أمر لا توجد مشكلة. يصف ما يلي المعنى والقيم الافتراضية لكل معلمة.

• oao.dialog.close (): أغلق مربع مشروط

1.6. الوظائف المراد دعمها 1. حاليًا ، يدعم محتوى المربع المنبثق فقط النص و HTML الثابت ، ولا يدعم طلبات URL.

2. حاليًا ، يمكن عرض زرين فقط على الأكثر ، ولا يتم دعم الأزرار المخصصة.

3. الموضع الحالي وحجم المربع المنبثق لا يدعم التخصيص

4. حاليًا ، يمكن أن يظهر مربعًا منبثقًا واحدًا فقط في وقت واحد ، ولا يدعم ظهر مربع مشروط آخر في المربع المنبثق (لا يتم دعم Bootstrap Modal في الطبقة الأساسية)

ترقبوا ، أراك في الإصدار التالي.

 /*! Shanghai ICP No. 13024515-1 Shanghai Yixin E-Commerce Co. ، Ltd. ** تم ترخيص هذا تحت GNU LGPL ، الإصدار 2.1 أو لاحقًا.* لمزيد من التفاصيل ، راجع: الوظيفة (الإعدادات) {var defaultSetTings = {title: "proper" ، المحتوى: "" ، okval: "تأكيد" ، cancalval: "إلغاء" ، موافق: الوظيفة () {$ ("#oaomodal"). modal ('Hide') ؛} ، إلغاء: function () {$ ("#oaomodal"). دولار. aria-labelledby =/"mymodallabel/" aria-hidden =/"true/"> "+" <div class =/"modal-dialog/"> "+" <div class =/"modal-content/"> "+" <div class =/"modal-header/" "+" <button/"class =/" close/"data-data-dailmis. aria-label =/"close/"> <span aria-hidden =/"true/"> × </span> </utton> "+" <h4 class =/"modal-title/"> </h4> "+" </viv> "+" <div class =/"modal-body/" style =/"text-alg: class =/"modal-footer/"> "+" <button type =/"button/" class =/"btn btn-default modalcancel/"> </ button> "+" <button type =/ $ modelHTML = $ (modelHtml) ؛ $ (". modalok" ، $ modelHtml) .Text (oao.settings.okval) ؛ $ ( .settings.cancalval) ؛ $ (". modal-title" ، $ modelHtml) .Text (oao.settings.title) ؛ $ (". modal-body" ، $ modelHTM l) .html (oao.settings.content) ؛ if (! oao.settings.ok) {$ (". modalok" ، $ modelhtml) .remove () ؛} if (! oao. settings.cancel) {$ (". modalcancel" ، $ modelHtml) .Remove () ؛} $ ("body"). append ($ modelhtml) ؛} // method للحوار المنبثق oao.dialog = function (الإعدادات) {settings = oao.init (الإعدادات) ؛ oao.initContent () ؛ // طريقة الاتصال $ ('#oaomodal'). {if (oao.settings.close) {oao.settings.close () ؛} $ ("#oaomodal"). إزالة () ؛}) if (oao.settings.ok) {$ ("#oaomodal .modalok") .modalcancel "). انقر فوق (الإعدادات. Function () {$ ("#Oaomodal"). Modal ('Hide') ؛}