في المقالة السابقة ، قدمت العديد من المكونات المفيدة في سلسلة مكونات bootstrap (موصى بها). بعد ذلك ، تقدم هذه المقالة العديد من المكونات المفيدة في سلسلة مكونات bootstrap (الموصى بها 2). سوف يتعلم الأصدقاء المهتمين معًا!
7. بيان مكون الإدخال متعدد القيمة
فيما يتعلق بالإدخال متعدد القيم في مربعات النص ، كان دائمًا مطلبًا شائعًا. اليوم ، يوصي المدون بمكون إدخال متعدد القيمة مفيد للجميع. لا تشكرني ، من فضلك اتصل بي "وشاح أحمر"!
1. عرض التأثير
صندوق إدخال محلي متعدد القيمة
مربع إدخال متعدد القيمة عن بعد
2. وصف رمز المصدر
بفضل مجتمع المصدر المفتوح وأولئك الذين يرغبون في المشاركة. عنوان مفتوح المصدر.
3. أمثلة رمز
(1) مدخلات محلية متعددة القيمة
أولاً ، تحتاج إلى الرجوع إلى الملفات التالية
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-master/src/jquery.manifest.css src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-master/build/parts/jquery.ui.widget.js
ملفات JS و CSS من bootstrap ليست ضرورية. هذه المقالة من أجل الأسلوب الجيد ، لذلك يتم الرجوع إليها. لا يعتمد مكون البيان على bootstrap ، ولكنه يعتمد على jQuery. بالإضافة إلى ذلك ، يحتاج أيضًا إلى الرجوع إلى ثلاثة ملفات: jquery.manifest.css ، jquery.ui.widget.js ، و jquery.marcopolo.js.
ثم هناك تهيئة HTML و JS
<type type = 'text' autocomplete = "Off" id = "txt_man"/> <script type = "text/javaScript"> $ (function () {$ ('#txt_man'). manesest () ؛}) ؛ </script>من خلال خطوات بسيطة على النحو الوارد أعلاه ، يمكن إنتاج التأثير أعلاه. أليس الأمر بسيطًا جدًا؟ دعونا نلقي نظرة على بعض استخداماتها
// الخصائص الشائعة: احصل على مجموعة من جميع العناصر في مربع النص VAR DATIORS = $ ('#txt_man'). البيان ('القيم') ؛ // الطريقة الشائعة 1: قم بإزالة العنصر الأخير $ ('#txt_man'). البيان ('إزالة' ، ': last') ؛ // الطريقة الشائعة 2: إضافة عنصر جديد في مربع نص العنصر. يتم تحديد تنسيق المعلمة الثانية بتنسيق بيانات json $ ('#txt_man'). البيان ('add' ، {id: "1" الوظيفة (الحدث ، البيانات ، العنصر $ ، الأولي) {// ALERT ("العنصر المضافة حديثًا هو:"+بيانات) ؛}) ؛ // الحدث الشائع 2: إزالة الحدث العنصر $ ('#txt_man'). {}) ؛(2) إدخال متعدد القيمة عن بُعد
تتطلب طريقة إدخال البحث عن بُعد منا تقديم عنوان عنوان URL ، والحصول على البيانات ، ثم العودة إلى المتصفح. من أجل البساطة ، تستخدم هذه المقالة عنوان URL مباشرة على موقع الكود المصدري لعرض التأثير.
أولاً ، تحتاج إلى الرجوع إلى ملف JS
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-master/src/jquery.manifest.css src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-master/build/parts/jquery.ui.widget.js"> </script> <script src = "~/content/jQuery-manifest-master/build/parts/jquery.marcopolo.js"> </script> <script src = "~/content/jQuery-manifest-master/build/jQuery.manifest.js"> </script>
بالمقارنة مع ما سبق ، هناك إشارة إضافية إلى ملف jquery.marcopolo.js.
ثم هناك تهيئة HTML و JS
<form action = "https://api.foursquare.com/v2/venues/search؟callback=؟" method = "get"> <viv> <viv> <input type = 'text' id = "txt_man2"/> <img src = "~/content/jquery-manifest-master/lavid.gif"/> </viv> </form> <script type = "text/javaScript (البيانات ، عنصر $ ، $ mpitem) {return data.name ؛} ، formatvalue: function (data ، $ value ، $ item ، $ mpitem) {return data.id ؛} ، marcopolo: {data: {client_id: "no2mtqvbqanw3q3sg233ofvmegegeyowizdt4e1qhrpzo0bfcn4x '، client_secret:' lg2wrkks1sxz2fmkdg01ldw1kdtekktulmxm0xevwrn0llhb ' '20150601'} ، formatdata: function (data) {return data.response.venues ؛} ، formatiTem: function (data ، $ item) {return data.name ؛} ، minchars: 3 ، param: 'Query'} ، regied: true}) ؛}) ؛ </script>بالنسبة لأهمية كل معلمة ، يجب أن يكون من السهل فهمها إذا كنت بحاجة إليها. راقب المدون بإيجاز قيمة إرجاع طريقة البحث عن بُعد هذه
إذا كان صديق بارك يعتزم استخدام هذه الطريقة عن بُعد بمفرده ، فيمكنك الرجوع إلى تنسيق البيانات هذا لتنفيذها.
8. Text Box Search Component Bootstrap-typeahead
في الواقع ، لدى العديد من المكونات هذه الوظيفة فيما يتعلق بوظيفة البحث في مربع النص. على سبيل المثال ، هناك مكون الإكمال التلقائي في واجهة المستخدم jQuery التي استخدمها المدون لاستخدامها لتحقيق الانتهاء التلقائي. مكونات البحث التلقائي من مربعات نص bootstrap تظهر على الإنترنت. السبب في أنني اخترت هذا المكون اليوم هو أنني أعتقد أنه يشبه أسلوب Bootstrap ، والمكونات أصغر وبسيطة وعملية.
1. عرض التأثير
البحث الثابت المحلي (مصدر البيانات محلي)
البحث عن بُعد (يتم استرداد مصدر البيانات عن بُعد من خلال طلب AJAX)
2. وصف رمز المصدر
وصف رمز المصدر
3. أمثلة رمز
الملف الأول الذي يجب الرجوع إليه: يحتوي بشكل أساسي على ملف CSS وملف JS. تحتاج إلى دعم من jQuery و Bootstrap.
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/prettify.css src = "~/content/jQuery -1.9.1.js"> </script> <script src = "~/content/bootstrap/js/botstrap.js"> </script> <script src = "~/content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"> </script>
ثم تهيئة المكون
<type type = 'text' id = "txt_man" />
مصدر البيانات محليا
<script type = "text/javaScript"> $ (function () {$ ("#txt_man"). typeahead ({source: [{key: 1 ، value: 'toronto'} ، {key: 2 ، value: 'montreal'} ، {key: 3 ، value: 'new} ، {key: 4 ، value:' } ، {key: 6 ، value: 'columbus'} ، {key: 7 ، value: 'dallas'} ، {key: 8 ، value: 'vancouver'} ، {key: 9 ، value: 'Seattle'} ، {key: 10 ، value: 'los angeles'}] ، display:يتم الحصول على مصدر البيانات من خلال طلب AJAX
<script type = "text/javaScript"> $ (function () {$ ("#txt_man"). typeahead ({ajax: {url: '/home2/typeaheaddata' ، timeout: 300 ، method: 'post' ، triggerlength: 1 ، loadingclass: null ، displayfield: null ، "القيمة" ، Val: "KEY"}) ؛}) ؛ </script>طريقة الاختبار المقابلة للخلفية
public jsonresult typeaheaddata () {var lstres = new list <bomf> () ؛ for (var i = 0 ؛ i <20 ؛ i ++) lstres.add (new key = i ، value = guid.newguid (). tostring (). substring (0 ، 4)}) ؛الخصائص الشائعة:
• العرض: اسم الحقل معروض
• فال: القيمة الفعلية
• العناصر: عدد نتائج البحث المعروضة بشكل افتراضي. القيمة الافتراضية هي 8
• المصدر: مصدر البيانات المحلي ، تم تنسيقه كصفيف.
• AJAX: يمكن أن يكون الكائن الذي طلبه AJAX عنوان URL مباشرة أو كائن كائن. إذا كان كائنًا كائنًا ، فلن أتحدث عن عنوان URL. تشير خاصية TriggerLength إلى أن إدخال عدة أحرف يؤدي إلى البحث.
الأحداث الشائعة الاستخدام:
• ItemSelected: يتم تشغيله عند تحديد قيمة البحث.
<script type = "text/javaScript"> $ (function () {$ ("#txt_man"). typeahead ({ajax: {url: '/home2/typeaheaddata' ، timeout: 300 ، method: 'post' ، triggerlength: 1 ، loadingclass: null ، displayfield: null ، "value" ، val: "key" ، itemselected: function (item ، val ، text) {}}) ؛}) ؛ </script>يمثل عنصر المعلمة الكائن المحدد ، ويمثل المعلمة VAL القيمة الفعلية للعنصر المحدد ، ويمثل النص القيمة المعروضة للعنصر المحدد.
9. مكون خطوة bootstrap
فيما يتعلق بمكون خطوة bootstrap ، قدمت المقالة السابقة عنصر واجهة مستخدم YSTEP. يمكن أن يلعب دورًا معينًا في عرض تقدم المهمة ، ولكن بالنسبة لبعض الشركات المعقدة ، من العاجز بعض الشيء التعامل مع الأعمال المقابلة وفقًا للخطوات الحالية. اليوم ، سيقدم المدون مكونًا خطوة له تأثير جيد للغاية. مع هذا المكون ، لم يعد المبرمجون يجب أن يقلقوا بشأن تصميم الخطوة المعقدة.
1. عرض التأثير
لديك لمحة عن الأسلوب
اتبع الخطوات إلى "الخطوة السابقة" و "الخطوة التالية"
المزيد من الخطوات
2. وصف رمز المصدر
تم العثور على هذا المكون من قبل المدون عبر الإنترنت. رأيت أن العديد من الأنماط والاستخدامات من bootstrap. الشيء الوحيد الذي أحتاج إلى الإشارة إليه هو ملف JS و CSS. لم يتم العثور على مصدر رمز المصدر بعد. إذا كان أي شخص يعرف مصدر الرمز المصدر ، فيمكنك إخبار المدون. بالإضافة إلى ذلك ، من أجل احترام نتائج عمل المؤلف ، يجب على المدون احترام الأصالة!
3. أمثلة رمز
الملفات التي يجب الرجوع إليها
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-step/css/bs-is-fun.css src = "~/content/bootstrap/js/botstrap.js"> </script> <script src = "~/content/bootstrap-step/js/brush.js"> </script>
يجب الرجوع إلى BS-IS-Fun.CSS و Brush.js ، وتحتاج المكونات إلى دعم jQuery و Bootstrap.
ثم هناك تهيئة المكون.
(1) السهم
<ul> <li> <a> Step1 </a> </li> <li> <a> Step2 </a> </li> <li> <a> Step3 </a> </li> </ul>
إذا كانت خطوة ثابتة ، فأنت بحاجة فقط إلى رمز HTML أعلاه لمعرفة تأثير خطوة السهم في الصورة أعلاه. يمثل النمط النشط هنا النمط الذي مرت الخطوة.
(2) مربع
<ul> <li> <a> Step1 </a> </li> <li> <a> Step2 </a> </li> <li> <a> Step3 </a> </li> </ul>
(3) شكل دائري
<ul> <li> <a> Step1 </a> </li> <li> <a> Step2 </a> </li> <li> <a> Step3 </a> </li> </ul>
(4) شريط التقدم
<ul> <li> <a> Step1 <span> </span> </a> </li> <li> <a> Step2 <span> </span> </a> </li> <li> <a> Step3 <span > </apan> </a> </li> <li> <a> Step4 <span> </span> </a> </li> <li> <a> Step5 <span> </span> </a> </li></ul>
(5) الخطوة السابقة ، الخطوة التالية
يتم تعريف "الخطوة السابقة" و "الخطوة التالية" في الصورة أعلاه من قبل نفسك في مكون Bootstrap Modal ، أو يتم نشر الرمز للرجوع إليه.
<div id = "mymodalnext"> <viv> <viv> <viv> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true" 2 <span> </span> </a> </li> <li> <a> <a> الخطوة 3 <span> </span> </a> </li> <a> <a> الخطوة 4 <span> </span> </a> </li> </li> </li> </li> </li> </li> </liv> <div> <div-ride = "carousel" rob = "listbox"> <viv> <p> الخطوة 1 </p> <viv> قم بتكوين الدور </div> <viv> <input type = "text"/> </viv> <viv> <button type = "button"> حفظ </button> </div> <p> الخطوة 2 </p> type = "button"> حفظ </button> </viv> <viv> <p> الخطوة 3 </p> </viv> <fiv> <p> الخطوة 4 </p> </fiv> <v> <p> الخطوة 5 </p> </p> </div> <p> الخطوة 6 </p> </p> type = "button"> التالي </button> </viv> </viv> </viv>
بالطبع ، تحتاج أيضًا إلى تسجيل حدث نقرة لنقرة لبرنتين
$ ("#mymodalnext .modal-footer button"). كل (دالة () {$ (this) .click (function () {if ($ (this) .hasclass ("mn-next")) {$ ( li.active "). التالي (). addClass (" نشط ") ؛} آخر {$ ("#myModalNext .Carousel "). li.active ")قد يكون المنطق غير مكتمل والاختبارات مطلوبة إذا تم استخدامها رسميًا.
10. زر تحميل مكون LADDA-BOOTSTRAP
فيما يتعلق بتحميل الأزرار ، أراد المدون منذ فترة طويلة العثور على مكون مناسب لتحسينه. إذا لم تتم معالجتها ، فهناك بالتأكيد إمكانية للعمليات المتكررة. دعونا نلقي نظرة على شيء صغير اليوم.
1. عرض التأثير
لقاء أولا
لون مخصص ، حجم ، شريط التقدم
2. وصف رمز المصدر
عنوان رمز المصدر
3. أمثلة رمز
الملفات التي يجب الرجوع إليها
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ladda-bootstrap-master/ladda-bootstrap/dist/ladda-themyny.min.cs" rel = "stylesh"/> src = "~/content/jQuery -1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/ladda-bootstrap-master/ladda-boottrap/dist/spin.min src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>
تهيئة المكون: تهيئة 4 أزرار
<button button button style = "expend-left"> <span> expend-left </span> </utton> <button-style = "sextend-right"> <span> توسيع الارتفاع </span> </button> <stontr-style = "Zoom-in"> <span> Zoom-in </span> </button-button> {$ ('button'). انقر فوق (function (e) {e.preventDefault () ؛ var l = ladda.create (this) ؛ l.start () ؛ l.setProgress (0 - 1) ؛ $. post ("/home2/typeaheaddata" ، {} ، function (data) L.Stop () ؛الشك في الكود: لا ينبغي أن يكون من الصعب فهمها. الكود المتضمن في تهيئة المكون var l = ladda.create (هذا) ؛ L.Start () ؛ هذا يمثل هذا كائن الزر الذي تم النقر فوقه حاليًا (لاحظ أن هذا كائن DOM بدلاً من كائن jQuery) ، ثم اتصل بـ L.Stop () ؛ بعد اكتمال الطلب ، أغلق الحمل.
(1) جميع الخيارات على غرار البيانات هي كما يلي. إذا كنت مهتمًا ، يمكنك تجربته ومعرفة ما هي الآثار:
على غرار البيانات = "Expensed-Left"
نمط البيانات = "توسيع اليمين"
على غرار البيانات = "التوسع"
نمط البيانات = "توسيع نطاق"
على غرار البيانات = "Zoom-in"
على غرار البيانات = "Zoom-Out"
على غرار البيانات = "Slide-Left"
على غرار البيانات = "شرائح اليمين"
على غرار البيانات = "Slide-Up"
على غرار البيانات = "Slide-Down"
نمط البيانات = "العقد"
(2) إذا كنت بحاجة إلى ضبط حجم الزر ، فإن المكون يحتوي على خاصية بحجم البيانات المدمج. جميع خيارات حجم البيانات هي كما يلي:
حجم البيانات = "XS"
حجم البيانات = "S"
حجم البيانات = "L"
(3) إذا كنت بحاجة إلى ضبط لون الزر ، فاستخدم بلون بيانات البيانات
data-spinner color = "#ff0000"
(4) إعدادات شريط التقدم في الزر
ladda.bind ('button' ، {callback: function (estance) {var progress = 0 ؛ var vertal = setInterval (function () {progress = math.min (progress + math.random () * 0.1 ، 1) ؛ easty.setProgress (progress) ؛ if (progress === 1) {exate.stop () ؛يتم تحديد تقدم التنفيذ الحالي بشكل أساسي من خلال مثيل الجملة. في المشروع الرسمي ، نحتاج إلى حساب وضع تنفيذ الطلب الحالي لإعادة التقدم ديناميكيًا.
11. تبديل مكون bootstrap-switch
على الصفحة الرئيسية لموقع Bootstrap الصيني ، يمكنك العثور على مثل هذا المكون
1. عرض التأثير
التأثير الأولي
سمات وأحداث مختلفة
2. وصف رمز المصدر
Bootstrap-switch العنوان عنوان المصدر: https://github.com/nostalgiaz/bootstrap-switch
وثائق bootstrap-switch والتوضيح: http://www.bootstrap-switch.org/examples.html
3. أمثلة رمز
الملفات التي يجب الرجوع إليها
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "STYLESHEET"/> <link href = "~/content/bootstrap-switch-master/bootstrap-switch/css/bootstrap3/bootstrap-switch.css src = "~/content/jQuery -1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-switch-master-switch-switch/js/js
تعتمد المكونات على jQuery و Bootstrap
ثم هناك تهيئة HTML و JS
<type type = "checkbox" checked /> $ (function () {$ ('Input [type = checkbox]').سمة الحجم ليست ضرورية. إذا كنت تستخدم النمط الافتراضي ، فلا يمكن تمرير المعلمات.
خصائص شائعة الاستخدام
• الحجم: حجم التبديل. القيم الاختيارية هي "صغيرة" ، "صغيرة" ، "طبيعية" ، "كبيرة"
• Oncolor: لون الزر ON في المفتاح. تتضمن القيم الاختيارية "الابتدائية" ، "المعلومات" ، "النجاح" ، "تحذير" ، "خطر" ، "افتراضي"
• الأحمال: لون المفتاح في لون الزر OFF. القيم الاختيارية "الابتدائية" ، "المعلومات" ، "النجاح" ، "تحذير" ، "خطر" ، "افتراضي"
• ontext: نص الزر ON في المفتاح ، الافتراضي هو "ON".
• Offtext: نص المفتاح "OFF" افتراضيًا.
• OnInit: الأحداث التي تهيئة المكون.
• OnSwitchchange: الأحداث عندما يتغير المفتاح.
يمكن استخدام الأحداث والأساليب الشائعة لعرض المستندات مباشرة ، ويوفر المسؤول وصفًا مفصلاً للغاية.
12. التقييد مكون التقييم في فئة Bootstrap-Star
يجب أن يعرف الجميع التصنيفات على التصنيفات على Taobao 10 و 10. لقد وجدت بطريق الخطأ مكون تصنيف على غرار bootstrap. لقد وجدت أنها مثيرة للاهتمام. قد يكون من المفيد أنظمة التجارة الإلكترونية والمجتمع والمنتدى في المستقبل ، لذلك سأشاركها.
1. عرض التأثير
2. وصف رمز المصدر
تنزيل رمز المصدر
3. أمثلة رمز
يتطلب هذا المكون دعمًا لأنماط jQuery و Bootstrap
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-star-rating-master/bootstrap-star-ring-master/css/star. src = "~/content/jQuery -1.9.1.js"> </script> <script src = "~/content/bootstrap-star-star-master/bootstrap-star-rating-master/js/star-rating.js"> </script> <script src = "~/content/bootstrap-star-star-master/bootstrap-star-master/js/ks.js/zh.js"> </script>
مباشرة من خلال المكون الأولي HTML
<input id = "input-2b" type = "number" min = "0" max = "5" step = "0.5" data-size = "xl" data-symbol = "" data-default-caption = "{{rating} hearts" data-star-captions = "{} size-size = "xl"> <input id = "input -21b" value = "4" type = "number" min = 0 max = 5 step = 0.2 data-size = "lg"> <input id = "input-21c min = 0 max = 5 step = 0.5 data-size = "sm"> <input id = "input -21e" value = "0" type = "number" min = 0 max = 5 step = 0.5 data-size = "xs"> <input id = "input-21 min = "0" max = "5" step = "0.5" stars = 5data-symbol = "" data-default-caption = "{rating} قلوب" star-captions = "{}" البيانات glyphicon = 0>تتم تهيئة المكون من خلال الفئة = "التصنيف". فيما يلي بعض المعلمات التي يجب أن يكون من السهل فهمها:
• القيمة: تمثل النتيجة الافتراضية عند تهيئة المكون
• دقيقة: الحد الأدنى درجة
• ماكس: الحد الأقصى درجة
• الخطوة: تمت إضافة الحد الأدنى للمقياس في كل مرة
• حجم البيانات: حجم النجوم
• نجوم البيانات: عدد النجوم
يمكنك الحصول على النتيجة الحالية باستخدام $ ("#input-21a"). val ().
ما سبق هو بعض المكونات المفيدة لسلسلة مكونات bootstrap التي قدمها لك المحرر (التوصية 2). آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!