اليوم ، دعونا نلخص تطبيق عنصر واجهة مستخدم من bootstrap. حسنًا ، لا تتحدث هراء ، دعنا نصل إلى هذه النقطة.
1. مقدمة في السياق
متطلبات واحدة: ترتيب صف الجدول ، ويدعم ترتيب متعدد الاختيار ، ويمكن أن يكون متقطعًا متعدد الاختيار. ماذا يعني ذلك؟ دعونا نلقي نظرة على الاداءات التي يجب تنفيذها:
المطلب هو: يجب نقل الخطوط المحددة 6 و 8 و 9 بين الصف 2 والصف 3. وضع جانباً العمل ، من منظور تقني ، إذا كنت ترغب في استخدام أقل عملية لتحقيق التأثيرات المذكورة أعلاه ، فكر المدون في وظيفة النقر الأيمن. إذا أمكنك النقر بزر الماوس الأيمن على الماوس على السطر 2 أو السطر 3 ، ونقل الخط المحدد إلى الموضع المقابل من خلال وظيفة القائمة النقر بزر الماوس الأيمن ، أليس هذا هو الأسهل؟ نحن فقط نفعل ذلك ، لذلك نبحث عن المكون ونبحث عن "Bootstrap النقر بزر الماوس الأيمن". أخيرًا ، وجدنا مكوننا السياق. بعد دراسة متأنية ، شعرنا أن التأثير كان على ما يرام ، لذلك شاركناه هنا للرجوع إليه البستانيين الذين يحتاجون إلى استخدامه.
ContextMenu عنوان المصدر المفتوح: https://github.com/sydcanem/bootstrap-contextmenu
يستخدم ContextMenu العرض التوضيحي: http://sydcanem.com/bootstrap-contextmenu/
2. تأثير السياق
انقر بزر الماوس الأيمن الأولي
تنطبق على المشروع
بعد تنفيذ وظيفة القائمة
3. مثال رمز السياق
في الواقع ، إنه شيء بسيط ، دعنا نلقي نظرة على كيفية استخدامه.
1. الرجوع إلى الملف المقابل. المفتاح هو اثنين
<script src = "/scripts/jquery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </cript> <script src = "/content/boottrap-contextmenu/boottrap-contup src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </script>
2. تحضير HTML
<div id = "context-menu"> <ul rod = "menu"> <li> <A tabindex = "-1" href = "#" downporator = "top"
3. تهيئة JS
الرمز ليس صعبًا ، فهو مجرد منطق لعمليات صف الجدول. أين تشرح:
(1) بعد تنفيذ إزالة وإدراج في صف الجدول ، تحتاج وظيفة النقر بزر الماوس الأيمن إلى إعادة صياغة. خلاف ذلك ، بعد النقر بزر الماوس الأيمن مرة واحدة ، لن يعمل بعد الآن.
(2) إذا كان هناك العديد من عناصر وظائف القائمة ، فأنت بحاجة إلى استخدام خطوط تقسيم لتجميعها. فقط أضف <li> </li> لإنجازه.
<div id = "context-menu2"> <ul rom = "menu"> <li> <a tabindex = "-1"> الإجراء </a> </li> <li> <a tabindex = "-1"> إجراء آخر </a> </li> <li> <li> الرابط </a> </li> </viv>
(3) إذا كنت ترغب في نقل الماوس إلى القائمة لعرض خلفية زرقاء ، فأنت بحاجة إلى الرجوع إلى ملف CSS آخر.
نسخة الكود كما يلي: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel = "stylesheet">
الآثار هي كما يلي:
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو بعض الاستخدامات البسيطة لمكون سياق bootstrap. قد لا يكون ذلك مثاليًا ، ولكن يمكن حله جيدًا لمتطلبات قائمة النقر الأيمن العام.