مقدمة إلى 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. بالطبع ، لا يمكنك تمرير أي شيء ، وسيظهر صندوق منبثق فارغ ، وهو أمر لا توجد مشكلة. يصف ما يلي المعنى والقيم الافتراضية لكل معلمة.
اسم السمة | نوع السمة | يوضح | القيمة الافتراضية |
عنوان | خيط | عنوان الصندوق المنبثق | تَلمِيح |
محتوى | خيط | يمكن أن يكون المحتوى الرئيسي لمربع المنبثقة نصًا ورمز HTML | باطل |
أوكفال | خيط | نص مخصص للتأكيد | يتأكد |
نعم | وظيفة/منطقية | انقر لتأكيد طريقة التنفيذ | إيقاف تشغيل الوظيفة |
CancelVal | خيط | نص مخصص لزر إلغاء | يلغي |
السرطانية | وظيفة/منطقية | انقر فوق "إلغاء" طريقة التنفيذ | إيقاف تشغيل الوظيفة |
• 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') ؛}