المقدمة: لقد شاركت العديد من المكونات الشائعة من bootstrap من قبل ، بما في ذلك النماذج ، والتحقق من النماذج ، وتحميل الملف ، والتحقق من الصناديق المنسدلة ، والصناديق المنبثقة ، وما إلى ذلك ، خلال هذه الفترة ، قام المدون بجمع بعض المكونات المفيدة (تم استخدام بعضها في المشروع). بعد يومين ، قام بفرز بعضهم. استنادًا إلى مبدأ "يجب مشاركة الأشياء الجيدة مع الآخرين" ، سنقدم اليوم بعض الفوائد لمشاركة الأشياء التي جمعها المدون للرجوع إليها من قبل البستانيين المحتاجين. معظم المكونات هي مكونات مفتوحة المصدر ، وبعضها هي التأثيرات الموجودة وإعادة كتابتها من قبل المدونين على الإنترنت. قد لا تكون مرضية. إذا كنت مهتمًا ، يرجى إلقاء نظرة.
1. مكون الوقت
هناك العديد من مكونات الوقت في نمط bootstrap. يمكنك البحث عن الكلمة الرئيسية "DatePicker" على Github ويمكنك العثور على العديد من مكونات الوقت. استخدم المدون اثنين منهم من قبل ووجد أنه سيكون هناك بعض مشاكل الحجم الكبير أو الصغير. بعد بعض الفحص ، وجدنا مكونًا زمنيًا له نتائج جيدة ويمكن استخدامه في سيناريوهات مختلفة. دعونا نلقي نظرة على أسلوبه أدناه.
1. عرض التأثير
التأثير الأولي
تخصيص تنسيقات الثقافة وتنسيقات التاريخ في المكون: يتم عرض التواريخ فقط
تاريخ العرض والوقت (قد تكون تجربة الهاتف المحمول والأجهزة اللوحية أفضل)
2. وصف رمز المصدر
نظر تشوتشو إلى تأثير المكون وأعطى عنوان رمز المصدر
3. أمثلة رمز
أولاً ، الرجوع إلى الملف المطلوب
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.cs src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "// cdnjs.cloudflare.com/ajax/libs/moment.js/2.9 <script src = "~/content/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"> </script>
مطلوب jQuery و Bootstrap. بالإضافة إلى ذلك ، عليك أيضًا الرجوع إلى ملف اللحظة مع locales.js. بالطبع ، يمكنك أيضًا تنزيل ملف JS هذا على منطقتك المحلية دون استخدام طريقة CDN هذه. يمكنك تنزيل ملف JS هذا بالكامل إلى منطقتك المحلية ثم إضافة مرجع محلي.
(1) التأثير الأولي
<label> التاريخ: </label> <div class = 'input-group date' id = 'dateTimePicker1'> <input type = 'text'/> <span> <span> </span> </span> </viv> <script type = "text/javaScript"> $ () </script>
هذا سوف يعطي التأثير كما هو موضح في الصورة أعلاه.
(2) الثقافة الصينية وتنسيق التاريخ
يبقى جزء HTML دون تغيير. فقط أضف المعلمات عند تهيئة JS.
<script type = "text/javaScript"> $ (function () {$ ('#dateTimePicker1'). dateTimePicker ({format: 'yyyy-mm-dd' ، // date formatting ، فقط موقع التاريخ: 'Zh-cn' // inclue}) ؛}) ؛ </script>(3) وقت العرض
<label> الوقت: </label> <div class = 'input-group date' id = 'dateTimePicker2'> <input type = 'text'/> <span> <span> </span> </span> </viv> <script type = "text/javaScript"> $ () HH: MM: SS '، locale:' ZH-CN '}) ؛ </script>
(4) الحد الأقصى للتاريخ والحد الأدنى من التاريخ
$ ('#datetimepicker1'). datetimepicker ({format: 'Yyyy-MM-DD' ، // تنسيق التاريخ ، فقط موقع تاريخ العرض: 'Zh-cn' ، // culture culture maxdate: '2017-01-01' ، // Maximum Date Mindate: '2010-01-01' // minimum}) ؛(5) تمكين زر الحذف
showclear: صحيح
(6) سمة وضع العرض. اضبط المتصفح على تحديد الوضع لنسخ الرمز كما يلي: ViewMode: "سنوات"
(7) آخرون
للحصول على وظائف أكثر قوة ، يرجى الرجوع إلى واجهة برمجة التطبيقات ، لذلك لن أدرجها جميعًا هنا. هناك عدد كبير من السمات والأحداث وطرق تلبية احتياجاتك الخاصة المختلفة.
2. مكونات الجهاز المتزايد الذاتي
فيما يتعلق بتمهيد التلقائي ، قد لا تكون هناك حاجة في كل مشروع. هناك بعض السيناريوهات الخاصة ، مثل: مربع نص معين يتطلب أرقام البيانات ، ويجب ضبط حجم الصفيف. بعد التحدث لفترة طويلة ، قد لا يعرف بعض البستانيين كيف يبدو ، لذا يرجى النقر على الصورة.
1. عرض التأثير
في الواقع ، يكون التأثير بسيطًا للغاية ، ولكن يمكنه تلقائيًا ضبط الحد الأقصى للقيمة ، والحد الأدنى من القيمة ، والقيمة المضافة ذاتيًا ، ويمكنها إجراء التحقق الرقمي تلقائيًا. الشيء الأكثر ملاءمة هو أنه يحتاج إلى تهيئة باستخدام JavaScript ، ويجب تهيئته فقط في HTML.
2. وصف رمز المصدر
رمز المصدر وعنوان المستند
3. أمثلة رمز
الملف الأول الذي يتم الرجوع إليه هو على النحو التالي:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font href = "~/content/jquery.spinner-master/dist/css/bootstrap-spinner.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.1.1.js"> </script> src = "~/content/jquery.spinner-master/dist/js/jquery.spinner.js"> </script>
يعد ملف font-aweaome.min.css أيضًا ملف مرجع CDN ، ويمكنك أيضًا الرجوع إليه إلى محليك.
(1) التهيئة
<div data-trigger = "spinner"> <input type = "text" value = "1" data-rule = "Quantity"> <span> <a href = "javaScript :؛" data-spin = "up"> <i> </i> </a> <a href = "javaScript :؛" data-spin = "down"> <i> </i> </a> </span> </viv>
مجرد قسم HTML بسيط ، يمكنك رؤية التأثير كما هو موضح في الصورة أعلاه. هل هو سهل؟
(2) نوع المتزايد الذاتي
عند عرض الكود المصدري للمكون ، يمكنك أن ترى أن هناك أنواع متعددة للذات محددة بالنسبة لنا:
يمكنك تحديد سمة حكم البيانات إلى هذه الأنواع ، مثل:
يتم تنفيذ القواعد التي يمكن أن تتحكم في مكون الذاتي الذاتي وفقًا للقواعد الشهرية.
(3) حدد الحد الأقصى للقيمة ، والقيمة الدنيا ، والقيمة المضافة ذاتيا
بالإضافة إلى الأنواع المحددة أعلاه ، تدعم المكونات أيضًا الحد الأقصى المخصص والحد الأدنى والقيمة المضافة ذاتيًا.
<div data-trigger = "spinner"> <input type = "text" value = "1" data-min = "-10" data-max = "10" data-step = "2 data-spin = "up"> <i> </i> </a> <a href = "javaScript :؛" data-spin = "down"> <i> </i> </a> </span> </viv>
data-min = "-10": الحد الأدنى لقيمة data-max = "10": الحد الأقصى لقيمة البيانات step = "2": قيمة متزايدة الذات
من السهل فهم هذا ، ولن أشرح ذلك كثيرًا. تأثير:
(4) التقاط الأحداث
يوفر المكون حدثين تم تغييره وتغييره ، وهو ما يتوافق مع التغيير العددي ودعوة الحدث بعد التغيير.
$ ('#id'). spinner ('change' ، function (e ، newval ، oldval) {}) ؛ $ ('[data-trigger = "spinner"]'). spinner ('change' ، function (e ، newval ، oldval) {}) ؛3. تأثير التحميل
قبل بضعة أيام ، سأل أحد أعضاء المجموعة عن المكونات التي يجب استخدامها لتأثير تحميل Bootstrap. في الواقع ، يمكن للبحث على Baidu العثور أيضًا على العديد من النتائج. هنا ، سيشارك المدون بعض الحاجيات المحملة بناءً على تجربة استخدامه ، على أمل أن يتمكن الجميع من استخدامها. وهي مقسمة بشكل أساسي إلى عملية وباردة. النموذج العملي له تأثير متوسط ، ولكن يمكن استخدامه في المتصفحات المختلفة ؛ يتم كتابة النموذج الرائع باستخدام أحدث CSS3 و HTML5 ، والتأثير رائع للغاية ، ولكن في الأساس الإصدار السفلي من IE (أقل من 10) غير متوافق.
1) عملي
1. مكون التحميل المثالي
هذا المكون هو JS الذي وجدته المدون على الإنترنت ، لكن بعد تنزيله ، وجدت بعض المشكلات الكبيرة والصغيرة. لذا أعاد المدون كتابته ووصفه بمكون تحميل bootstrap. يتمثل مبدأها في الظهور على طبقة تغطية عند بدء تشغيل المكون ، وبعد ذلك عندما يتم إغلاق المكون ، تتم إزالة DOM طبقة التراكب ، ويستخدم تأثير التحميل صورة GIF.
محتوى ملف perfectload.js:
/*****************************: سرعة الإنترنت شرسة للغاية ، خاصة بالنسبة للمواقع الإلكترونية المعلقة على الخوادم الأجنبية. بمجرد فتح مجموعة من المواد ، يمكنك تحميل المواقع ببطء والمواقع غير متسقة. لذلك ، تتم كتابة هذه الطريقة لتسهيل الجميع لاستخدام ******************************************************************/jQuery.BootStrapload = {start: function (stipt) عرض الحدود الحدودي للألوان الحدودية: 1 ، // عرض الحدود الفوري الحدود: "Solid" ، // // form Form Border Style Loadingtips: "تحميل ، يرجى الانتظار ..." ، // tipscolor السريع إنها تساوي 0 ، ليست هناك حاجة إلى تعليق} regh orports = $ .extend (الافتراضيات ، الخيارات) ؛ // الحصول على عرض الصفحة والارتفاع var _pageheight = document.documentElement.clientheight ، _pageWidth = document.documentElement.ClientWidth ؛ // loadinghtml محتوى مخصص معروض قبل الصفحة لا يتم تحميل var _loadinghtml = '<div id = "loadingpage" style = "الموضع: ثابت ؛ اليسار: 0 ؛ TOP: 0 ؛ _position: Absolute ؛ width: verth: height:' + _pageigh '؛ filter: alpha (opated =' + Options.Opacity * 100 + ') خيارات. '؛ font-size: 20px ؛ ">' + Options.LoadingTips + '</viv> </viv>' ؛ // تمثل تأثير التحميل $ ("body"). إلحاق (_LoadingHtml) ؛ // احصل على عرض وارتفاع مربع موجه التحميل var _loadingtipsh = document.getElementById ("loadingtips"). clientHeight ، _LoadingTipsw = document.getElementById ("loadingtips"). clientwidth ؛ // احسب المسافة وحافظ على مربع موجه التحميل لأعلى ، لأسفل ، ويسارًا ويمينًا ، var _loadingtop = _pageheight> _LoadingTipsh؟ (_pageheight - _LoadingTipsh) / 2: 0 ، _Loadingleft = _pageWidth> _LoadingTipsw؟ (_pageWidth - _LoadingTipsw) / 2: 0 ؛ $ ("#loadingtips"). css ({"left": _loadingleft + "px" ، "TOP": _LoadingTop + "PX"}) ؛ // استمع إلى مستند حالة تحميل الصفحة. . setTimeOut (function () {loadingmask.animate ({"opacity": 0} ، Options.delayTime ، function () {$ (this) .hide () ؛}) ؛} ، Options.sleep) ؛ }}} ، النهاية: function () {$ ("#loadingPage"). remove () ؛ }}هذا JS ينخفض بشكل أساسي عبر الإنترنت ، ولكن على هذا الأساس ، أضاف المدون طريقة نهائية.
دعونا نرى كيف يتم استخدام المكونات. هنا هو رمز الاختبار:
<html> <Head> <meta name = "viewport" content = "width = width device"/> <title> تحميل </title> <link href = "~/content/bootstrap/css/bootstrap.css src = "~/content/bootstrap/js/boutstrap.js"> </script> <script src = "~/content/bootstrap-loading/perfectload.js"> </script> <script type = "text/javaScript"> $ (function () {$ ( $ .bootstrapload.start ({loadingtips: "تتم معالجة البيانات ، يرجى الانتظار ..."}) ؛ </script> </head> <body> <div style = "padding: 0px"> <div style = "الارتفاع: 450px ؛"> <div> شروط الاستعلام </div> <viv> <form id = "formearch"> <viv> <div> <button> type = "button" id = "btn_submit"> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </body> </html>تعليمات الاستخدام: لا يتطلب المكون أي رمز HTML ، بل يحتاج فقط إلى استدعاء طريقة بدء المكون عند تنفيذ التحميل. تبدأ طريقة Start () الطبقة المنبثقة ويمكنها تعيين جميع المعلمات في متغير الافتراضات. عند الانتهاء من التحميل ، سيتم استدعاء طريقة نهاية المكون ، وسيتم إزالة الطبقة المنبثقة تلقائيًا. دعونا نرى التأثير:
إذا لم تكن راضيًا عن التأثير ، فيمكنك تعيين المعلمات في الإعدادات الافتراضية بنفسك. تتم كتابة التعليقات التوضيحية بالتفصيل ، لذلك لن أدرجها واحدة تلو الأخرى هنا.
2. مكون تحميل chrysanthemum spin.js
إن استخدام الصور لعرض تأثيرات التحميل له عيوب متأصلة ، حيث تستخدم العديد من مكونات التحميل الآن CSS+JS لتحقيق تأثيرات الرسوم المتحركة. Spin.js هي واحدة من هذه الأمثلة. Spin.js هو مكون مفتوح المصدر مع عنوان مفتوح المصدر.
بعد تنزيل الكود المصدري ، يجد التهيئة أن المكون لا يحتوي على قناع ، لذلك يمكن أن يكون مثل هذا فقط:
بعد البحث عن معاييرها لفترة طويلة ، لم أتمكن من العثور عليها ، أو لم أجدها حيث كانت هناك "منظمة". لا توجد طريقة ، يمكن للمدون فقط إضافة تأثير القناع نفسه. لذلك تم إنشاء ملف نمط CSS جديد وتم تسميته مؤقتًا spin.css ، بأسلوب واحد فقط:
.fade {الموضع: ثابت ؛ أعلى: 0 ؛ اليمين: 0 ؛ أسفل: 0 ؛ اليسار: 0 ؛ Z-index: 9999 ؛ العتامة: 1 ؛ لون الخلفية: رمادي ؛}ثم أعيد كتابة spin.js في مكانين ، ومحتوى إعادة كتابة كما يلي:
/** * حقوق الطبع والنشر (C) 2011-2014 Felix gnass * مرخصة تحت رخصة معهد ماساتشوستس للتكنولوجيا * http://spin.js.org/ * مثال الزوايا: 1 ، // rouldness (0..1) اللون: ' #000' ، // #rgb أو #rrggbb التعتيم: 1/4 ، // عتامة الخطوط الدوران: 0 ، // إزاحة التناوب الاتجاه: 1 ، // 1: clockwise ، -1: سرعة عقارب الساعة: 1 ، جولات لكل ثانية: 100 ، // Zindex: 2e9 ، // استخدم Z-index عاليًا بشكل افتراضي: "Spinner" ، // CSS Class لتعيينه إلى أعلى العنصر: '50 ٪ '، // المركز رأسياً يسارًا: '50 ٪' ، // المركز أفقيًا: mappice in in in sposity ‘up in in in in in in in in in in in in in in in in in in in in in in in in in in. var target = document.getElementById ('foo') ؛ var spinner = new spinner (opts) .spin (target) ؛ */؛ (الدالة (الجذر ، المصنع) {if (typeof module == 'Object' && module.exports) module.exports = factory () ؛ البادئات = "WebKit" ، "MS" ، "قواعد الرسوم المتحركة" ؛ يتم إنشاء Div. n ؛ 100) ، خطوط]. "-'||' '؛ + alpha + ' +' 100 ٪ prop.charat (0) CSS (EL ، Prop) {for n in prop) == غير محدد) OBJ [n] = def [n]} طول كل سطر عرض: 5 ، // نصف قطر سمك الخط: 10 ، // نصف قطر المقياس الداخلي للدائرة: 1.0 ، // الحجم الكلي للحجم الكلي لزوايا الدوار: 1 ، // المستدير (0..1) اللون: ' #000' ، // -1: سرعة عقارب الساعة: 1 ، // جولات في الثانية الواحدة: 100 ، // النسبة المئوية بعد الزجاج FPS: 20 ، // إطارات في الثانية عند استخدام setTimeOut () zindex: 2e9 ، // استخدم z -index عالياً عن طريق الفئة الافتراضية: '50 ، // كاذبة ، ما إذا كان من المفترض أن يكون هناك spinner (O) {this.opts = {} ، spinner.defaults) دمج (spinner.prototype ، { / ** * يضيف الدوار إلى العنصر الهدف المحدد. إذا كان هذا المثيل بالفعل * تدور ، فسيتم إزالته تلقائيًا من هدفه السابق B stop () داخليًا. css (el ، {o.position ، عرض: Zindex: O.zindex ، or.left ، top: o.top}) ؛ self.Opts) ASTEP = f / o.lines ؛ setTimeout (~ ~ ١٠٠) ؛ el.parentnode = (O.Lines - 1) * (1 - O.Direction) / 2 ؛ "اليسار" ، التحويل: "تدوير (" + ~~ (360/o.lines * i + o.rotate) + "DEG) ترجمة (' + o.scale * o.radius +' px ' +' ، 0) '، borderradius: (O. css (createel () ، {position: 'absolute' ، top: 1 + ~ (o.scale * o.width / 2) + 'px' ، transform: o.hwaccel؟ O.Lines) + ' + 1 / o.speed + infinite'}) ؛ RGBA (0،0،0) initvml () { / * funtive function لإنشاء علامة VML * / وظيفة vml (العلامة ، attr) {return createel ('<' tag + 'xmlns = "urn: schemas-microsoft.com: electsm: eledsl (. "السلوك:#افتراضي#VML) ؛ {العرض: s ، seft: s) ؛ 360 / o.lines * i + 'deg' ، اليسار: ~~ dx}) ، ins (css (vml ('roundrect' ، {arcsize: o.corners}) ، VML ('fill' ، {color: getColor (o.color ، i) ، opatited: o.opacity}) ، vml ('stroke' ، {opated: 0}) 'progid: dimityageTrans.Microsoft.blur (pixelradius = 2 ، mickedow = 1 ، seg (i) ؛ o.shadow && O. EL = 'Style' ، {text/css ') ؛ "التحويل")Spin.js
تغييران:
(1) عند التهيئة ، إذا تم عرضه ، أضف نمطًا يتلاشى إلى العلامة المقابلة.
(2) حذف نمط التلاشي في كل مرة.
بعد إجراء التعديل ، تتوفر واجهة الاختبار الآن.
<html> <head> <meta name = "viewport" content = "width = width device"/> <title> loading2 </itlem> <link href = "~/content/bootstrap/css/bootstrap.css <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/boutstrap.js"> </script> <script src = "~/content/spin.js-master $ ("#btn_submit"). على ("انقر" ، الدالة () {// var opts = {// الأسطر: 9 ، // عدد بتلات // الطول: 1 ، // طول بتلة // width: 10 ، // petal width // نصف القطر: // // petal radius من المركز // الزمالة: الزاوية // الاتجاه: 1 ، // بتراهن اتجاه التناوب 1: عقارب الساعة ، -1: عكس اتجاه عقارب الساعة // اللون: '#000' ، // petal color // السرعة: 1 ، // بتيال سرعة الدوران/ trail: 60 ، // الظل عند تدوير البتلة (النسبة المئوية) ممكّن // classname: 'spinner' ، // spinner css name // zindex: 2e9 ، // spinner's z-axis (الافتراضي هو 2000000000). // var spinner = new spinner ({}). Spin (target) ؛ 15 ، مسافة البتلة من الظل الوسط: عتامة: 1/8} ؛ </script> </head> <body> <div style = "padding: 0px"> <div style = "الارتفاع: 450px ؛"> <div> شروط الاستعلام </div> <viv> <form id = "formearch"> <viv> <div> <button> type = "button" id = "btn_submit"> </viv> </viv> </viv> </viv> </viv> </viv> <div id = "foo"> </viv> </body> </html> test_spin.cshtmlتعليمات للاستخدام: إذا لم تستخدم صفحتك jQuery ، راجع ملف Spin.js ، لا يتطلب هذا الملف دعم jQuery ؛ إذا كنت ترغب في استخدام jQuery ، راجع ملف jquery.spin.js. الرمز أعلاه لا يستخدم jQuery. يحتاج المكون إلى تحديد div فارغ ثم تهيئته على هذا div. النتائج التي تم الحصول عليها على النحو التالي:
بالطبع ، إذا لم تكن راضيًا عن هذا التأثير ، فيمكنك أيضًا ضبط شفافية طبقة القناع وأسلوب القناع بأكمله. هناك أيضًا معلمات مختلفة للتناوب يمكن تخصيصها أثناء التهيئة ، وهناك تعليقات مفصلة في الكود أعلاه.
2) نموذج رائع
1. jQuery.Shcircloleder.js المكون
وغني عن القول أن هذا المكون سهل الاستخدام أيضًا ، لكنه غير مدعوم للإصدارات أدناه IE10. لنرى التأثير أولاً:
أما بالنسبة لاستخدام الرمز المحدد ، فإن المدون لا ينوي التعمق فيه ، بحيث يمكنك البحث على Baidu أو Github.
2. مكون fakeloader.js
المزيد من الخيارات ، وتأثير تسطيح أفضل ، وتجربة أفضل مع الأجهزة المحمولة والأجهزة اللوحية. فقط انظر إلى الصور وستعرف. عنوان مفتوح المصدر.
4
اضطررت إلى القيام بعمل سير عمل منذ بعض الوقت وكنت بحاجة لإظهار أين كانت العملية الحالية تسير. لقد وجدت مكونًا إضافيًا للعملية ystep. ميزة هذا المكون هي أنه سهل الاستخدام وخفيف الوزن.
1. عرض التأثير
دعونا نرى التأثير أولاً
نسخة مخفضة الأزرق
2. وصف رمز المصدر
عنوان مفتوح المصدر.
3. أمثلة رمز
أولاً ، الرجوع إلى الملف المطلوب
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ystep-master/css/ystep.css src = "~/content/bootstrap/js/botstrap.js"> </script>
يتطلب هذا المكون الدعم من مكونين: jQuery و Bootstrap.
ثم حدد div فارغ
<div id = "div_ystep1"> </viv>
أخيرًا ، قم بتهيئة المكون عند النقر فوق الزر
<script type = "text/javaScript"> $ (function () {$ ("#btn_submit"). انقر فوق (function () {$ ("#div_ystep1"). loadStep ({// ystep size size // القيمة الاختيارية: small ، الحجم الكبير: [{// عنوان الخطوة العنوان: "ابدأ" ، // محتوى الخطوة (عندما ينتقل الماوس إلى عقدة هذه الخطوة ، سيتم مطالبته) المحتوى: "Process START"} ، {title: "الموافقة" ، المحتوى: "كل أدوار تبدأ الموافقة"} ، {العنوان: "التنفيذ" ، المحتوى: "بدء المتطلبات" ، {title: "End" $ ("#div_ystep1"). setStep (3) ؛ </script>إذا كانت خطوة ديناميكية ، فقد يكون من الضروري إنشاء سمة الخطوات ديناميكيًا. ثم استخدم setStep () لتعيين الخطوة التي وصلت إليها.
الطرق الشائعة:
// انتقل إلى الخطوة التالية $ (".5. زر حذاء مكون الموجه
يشبه مكون مطالبة الزر بوظيفة التأكيد في JS ، ولكن هذا التأكيد هو تأثير منبثقة تلميح الأدوات ، مما يمنح المستخدمين قرارًا وإلغاءًا ، والواجهة أكثر ودية. قبل تقديم هذا المكون ، يمكنك أولاً إلقاء نظرة على تأثير مربع المطالبة في bootstrap:
يتم تنفيذ مكون التأكيد على bootstrap بناءً على تأثير مربع المطالبة هذا. هناك العديد من مكونات التأكيد على bootstrap على github ، لكنها في الأساس هي نفسها. .
1. عرض التأثير
التأثير الأكثر أصالة
عنوان مخصص ، نص زر
2. وصف رمز المصدر
عنوان مفتوح المصدر
3. أمثلة رمز
(1) ملفات الاقتباس:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/bootstrap/js/bostrap.js
تتطلب الأنماط دعم bootstrap.css. يتطلب JavaScript دعم jQuery و bootstrap.js.
(2) علامة انقر المقابلة (يمكن أن تكون أي علامة)
<button type = "button" id = "btn_submit1"> <span aria-hidden = "true"> </span> حذف </button>
(3) تهيئة JS
<script type = "text/javaScript"> $ (function () {$ ('#btn_submit1'). تأكيد ({الرسوم المتحركة: صواب ، وضع: "أسفل" ، العنوان: OnCancel: function () {// ALERT ("Clicked") ؛ </script>(4) المزيد من السمات والأحداث والأساليب
بالإضافة إلى الخصائص المهيئة المذكورة أعلاه ، هناك بعض الخصائص الشائعة الاستخدام. على سبيل المثال:
btnokclass: تحديد نمط الزر ؛ btncancelclass: إلغاء نمط الزر ؛ Singleton: ما إذا كان يسمح فقط مربع تحديد واحد ؛ popout: ما إذا كان لإخفاء مربع التحديد عندما ينقر المستخدم على مكان آخر ؛
على سبيل المثال ، يمكنك تعيين btnokclass على btnokclass: 'btn btn-sm btn-promary' ،
6. تصنيف الصور وتصفية مكونات muxitup
هذا مكون تجميع وتصفية مع تأثير رائع للغاية ، وعنوان مفتوح المصدر. رأى المدون عرضًا تجريبيًا على الإنترنت واعتقد أنه كان فعالًا حقًا. دون مزيد من اللغط ، الصورة أعلاه.
ماذا عن ذلك ، التأثير جيد. لا يتم استخدام هذا المكون في المشروع في الوقت الحالي ، لكنني أشعر أن هناك إمكانية للحاجة إليه في المستقبل ، لذلك جمعته. يتم نسخ رمز التنفيذ عبر الإنترنت. لم أدرسها بعمق. إذا كنت مهتمًا ، فيمكنك إلقاء نظرة. يتم تنفيذ رمز HTML+JS على النحو التالي:
<html> <Head> <meta name = "viewport" content = "width = width device"/> <title> mixitup </title> <link href = "~/content/image/css/almatize.css" rel = "stylesheet"/> <link href = "~/content/image/layout.css src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/mixitup-master/jquery.ise.min.js"> </script> <script src = "~/content/mixitup-master/build/jquery.mixitup.min $(function () { var filterList = { init: function () { debugger; // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector: '.portfolio', filterSelector: '.filter', effects: ['fade'], easing: 'snap', // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { // Simple parallelax effect $('#portfoliolist .portfolio').hover( function () { $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad'); }, function () { $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad'); } ); } }; // Run the show! filterList.init(); }); </script></head><body> <div> <ul id="filters"> <li><span data-filter="app card icon logo web">All categories</span></li> <li><span data-filter="app">Mobile application</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="icon">icon</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">Web page</span></li> </ul> <div id="portfoliolilist"> <div data-cat="logo"> <div> <img src="~/Content/image/Logo/5.jpg" /> <div> <div> <a>Bird Document</a> <span>Logo</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/app/1.jpg" /> <div> <div> <a>Visual Infography</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/4.jpg" /> <div> <a>Sonor's Design</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/1.jpg" /> <div> <div> <a>Typography Company</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/3.jpg" /> <div> <a>Weatherette</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/4.jpg" /> <div> <div> <a>BMF</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/5.jpg" /> <div> <a>Techlion</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/1.jpg" /> <div> <div> <a>KittyPic</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/2.jpg" /> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/card/2.jpg" /> <div> <a>QR Quick Response</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/6.jpg" /> <div> <div> <a>Mobi Sock</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <a>Village Community Church</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/4.jpg" /> <div> <div> <a>Domino's Pizza</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/3.jpg" /> <div> <a>Backend Admin</a> <span>Web design</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/1.jpg" /> <div> <div> <a>Instagram</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/2.jpg" /> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/2.jpg" /> <div> <div> <a>Scoccer</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/web/1.jpg" /> <div> <div> <a>Note</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/3.jpg" /> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <a>Bookworm</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <div> <a>Sandwich</a> <span>Icon</span> </div> <div></div> </div> </div> </div> </div> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Specialisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的朋友节省寻找组件的时间。
The above shared several commonly used components in the project, which attracted the attention of many friends. The following is still to continue because I feel that there are still several very simple and practical components, and I really don’t want to enjoy them alone. لا توجد طريقة. Who makes the blogger love sharing so much?~
7. بيان مكون الإدخال متعدد القيمة
فيما يتعلق بالإدخال متعدد القيم في مربعات النص ، كان دائمًا مطلبًا شائعًا. اليوم ، يوصي المدون بمكون إدخال متعدد القيمة مفيد للجميع. لا تشكرني ، من فضلك اتصل بي "وشاح أحمر"!
1. عرض التأثير
صندوق إدخال محلي متعدد القيمة
مربع إدخال متعدد القيمة عن بعد
2. وصف رمز المصدر
感谢开源社区，感谢那些喜欢分享的可爱的人儿，开源地址。
3. أمثلة رمز
(1) مدخلات محلية متعددة القيمة
أولاً ، تحتاج إلى الرجوع إلى الملفات التالية
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script 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/jquery.manifest.js"></script>
ملفات JS و CSS من bootstrap ليست ضرورية. هذه المقالة من أجل الأسلوب الجيد ، لذلك يتم الرجوع إليها. لا يعتمد مكون البيان على bootstrap ، ولكنه يعتمد على jQuery. بالإضافة إلى ذلك ، يحتاج أيضًا إلى الرجوع إلى ثلاثة ملفات: jquery.manifest.css ، jquery.ui.widget.js ، و jquery.marcopolo.js.
ثم هناك تهيئة HTML و JS
<input type='text' autocomplete="off" id="txt_man" /> <script type="text/javascript"> $(function () { $('#txt_man').manifest(); });</script>من خلال خطوات بسيطة على النحو الوارد أعلاه ، يمكن إنتاج التأثير أعلاه. أليس الأمر بسيطًا جدًا؟ دعونا نلقي نظرة على بعض استخداماتها
//常用属性：得到文本框里面所有项的集合var values = $('#txt_man').manifest('values'); //常用方法1：移除最后一项$('#txt_man').manifest('remove', ':last'); //常用方法2：项文本框里面新增一项。第二个参数的格式由JSON数据的格式决定$('#txt_man').manifest('add', { id: "1", name:"ABC" }); //常用方法3：获取远程搜索到的数据的列表$('#txt_man').manifest('list'); //常用事件1：组件的新增项事件$('#txt_man').on('manifestadd', function (event, data, $item, initial) { //alert("新增的项为："+data); }); //常用事件2：组件的移除项事件$('#txt_man').on('manifestremove', function (event, data, $item) { }); //常用事件3：远程调用时通过键盘选择项变化的事件$('#txt_man').on('manifestselect', function (event, data, $item) { });(2) إدخال متعدد القيمة عن بُعد
تتطلب طريقة إدخال البحث عن بُعد منا تقديم عنوان عنوان URL ، والحصول على البيانات ، ثم العودة إلى المتصفح. من أجل البساطة ، تستخدم هذه المقالة عنوان URL مباشرة على موقع الكود المصدري لعرض التأثير.
أولاً ، تحتاج إلى الرجوع إلى ملف JS
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script 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"> <div><div> <input type='text' id="txt_man2" /> <img src="~/Content/jquery-manifest-master/busy.gif" /> </div> </div> </form>
<script type="text/javascript"> $(function () { $('#txt_man2').manifest({ formatDisplay: function (data, $item, $mpItem) { return data.name; }, formatValue: function (data, $value, $item, $mpItem) { return data.id; }, marcoPolo: { data: { client_id: 'NO2MTQVBQANW3Q3SG23OFVMEGYOWIZDT4E1QHRPZO0BFCN4X', client_secret: 'LG2WRKKS1SXZ2FMKDG01LDW1KDTEKKTULMXM0XEVWRN0LLHB', intent: 'global', limit: 5, v: '20150601' }, formatData: function (data) { return data.response.venues; }, formatItem: function (data, $item) { return data.name; }, minChars: 3, param: 'query' }, required: 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" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.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 York' }, { key: 4, value: 'Buffalo' }, { key: 5, value: 'Boston' }, { key: 6, value: 'Columbus' }, { key: 7, value: 'Dallas' }, { key: 8, value: 'Vancouver' }, { key: 9, value: 'Seattle' }, { key: 10, value: 'Los Angeles' } ], display: "value", val:"key" }); }); </script>يتم الحصول على مصدر البيانات من خلال طلب AJAX
<script type="text/javascript"> $(function () { $("#txt_man").typeahead({ ajax: { url: '/Home2/TypeaheadData', timeout: 300, method: 'post', triggerLength: 1, loadingClass: null, displayField: null, preDispatch: null, preProcess: null }, display: "value", val:"key" }); }); </script>طريقة الاختبار المقابلة للخلفية
public JsonResult TypeaheadData() { var lstRes = new List<object>(); for (var i = 0; i < 20; i++) lstRes.Add(new { key = i, value = Guid.NewGuid().ToString().Substring(0, 4) }); return Json(lstRes, JsonRequestBehavior.AllowGet) ; }الخصائص الشائعة:
• العرض: اسم الحقل معروض
• فال: القيمة الفعلية
• العناصر: عدد نتائج البحث المعروضة بشكل افتراضي. القيمة الافتراضية هي 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, preDispatch: null, preProcess: null }, display: "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" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.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></span></a> </li> <li> <a>step4<span></span></a> </li> <li> <a>step5<span></span></a> </li> <li> <a>step6<span></span></a> </li></ul>
(5) الخطوة السابقة ، الخطوة التالية
يتم تعريف "الخطوة السابقة" و "الخطوة التالية" في الصورة أعلاه من قبل نفسك في مكون Bootstrap Modal ، أو يتم نشر الرمز للرجوع إليه.
<div id="myModalNext"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4>选项配置</h4><ul> <li> <a>步骤一<span></span></a> </li> <li> <a>步骤二<span></span></a> </li> <li> <a>步骤三<span></span></a> </li> <li> <a>步骤四<span></span></a> </li> <li> <a>步骤五<span></span></a> </li> <li> <a>步骤六<span></span></a> </li> </ul> </div> <div> <div> <div data-ride="carousel" data-interval="false" data-wrap="false"> <div role="listbox"> <div> <p>步骤一</p> <div> 配置角色</div> <div> <input type="text" /> </div> <div> <button type="button">保存</button> </div> </div> <div> <p>步骤二</p> <div> 配置用户</div> <div> <input type="text" /> </div> <div> <button type="button">保存</button> </div> </div> <div> <p>步骤三</p> </div> <div> <p>步骤四</p> </div> <div> <p>步骤五</p> </div> <div> <p>步骤六</p> </div> </div> </div> </div> </div> <div> <button type="button">上一步</button> <button type="button">下一步</button> </div> </div> </div> </div>
بالطبع ، تحتاج أيضًا إلى تسجيل حدث نقرة لنقرة لبرنتين
$("#myModalNext .modal-footer button").each(function () { $(this).click(function () { if ($(this).hasClass("MN-next")) { $("#myModalNext .carousel").carousel('next'); $("#myModalNext .step li.active").next().addClass("active"); } else { $("#myModalNext .carousel").carousel('prev'); if ($("#myModalNext .step li").length > 1) { $($($("#myModalNext .step li.active"))[$("#myModalNext .step li.active").length - 1]).removeClass("active") } } }) })قد يكون المنطق غير مكتمل والاختبارات مطلوبة إذا تم استخدامها رسميًا.
10. زر تحميل مكون LADDA-BOOTSTRAP
فيما يتعلق بتحميل الأزرار ، أراد المدون منذ فترة طويلة العثور على مكون مناسب لتحسينه. إذا لم تتم معالجتها ، فهناك بالتأكيد إمكانية للعمليات المتكررة. دعونا نلقي نظرة على شيء صغير اليوم.
1. عرض التأثير
لقاء أولا
لون مخصص ، حجم ، شريط التقدم
2. وصف رمز المصدر
عنوان رمز المصدر
3. أمثلة رمز
الملفات التي يجب الرجوع إليها
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js"></script> <script src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>
تهيئة المكون: تهيئة 4 أزرار
<button data-style="expand-left"><span>expand-left</span></button><button data-style="expand-right"><span>expand-right</span></button><button data-style="zoom-in"><span>zoom-in</span></button><button data-style="zoom-out"><span>zoom-out</span></button> $(function () { $('button').click(function (e) { e.preventDefault(); var l = Ladda.create(this); l.start(); l.setProgress(0 - 1); $.post("/Home2/TypeaheadData",{ }, function (data,statu) { console.log(statu); }, "json"); .always(function () { l.stop(); }); return false; }); });الشك في الكود: لا ينبغي أن يكون من الصعب فهمها. الكود المتضمن في تهيئة المكون var l = ladda.create (هذا) ؛ L.Start () ؛ هذا يمثل هذا كائن الزر الذي تم النقر فوقه حاليًا (لاحظ أن هذا كائن DOM بدلاً من كائن jQuery) ، ثم اتصل بـ L.Stop () ؛ بعد اكتمال الطلب ، أغلق الحمل.
(1) جميع الخيارات على غرار البيانات هي كما يلي. إذا كنت مهتمًا ، يمكنك تجربته ومعرفة ما هي الآثار:
data-style="expand-left"data-style="expand-right"data-style="expand-up"data-style="expand-down"data-style="zoom-in"data-style="zoom-out"data-style="slide-left"data-style="slide-right"data-style="slide-up"data-style="slide-down"data-style="contract"
(2) إذا كنت بحاجة إلى ضبط حجم الزر ، فإن المكون يحتوي على خاصية بحجم البيانات المدمج. جميع خيارات حجم البيانات هي كما يلي:
حجم البيانات = "XS"
حجم البيانات = "S"
حجم البيانات = "L"
(3) إذا كنت بحاجة إلى ضبط لون الزر ، فاستخدم بلون بيانات البيانات
data-spinner color = "#ff0000"
(4) إعدادات شريط التقدم في الزر
Ladda.bind('button', { callback: function (instance) { var progress = 0; var interval = setInterval(function () { progress = Math.min(progress + Math.random() * 0.1, 1); instance.setProgress(progress); if (progress === 1) { instance.stop(); clearInterval(interval); } }, 200); } }); }) ؛يتم تحديد تقدم التنفيذ الحالي بشكل أساسي من خلال مثيل الجملة. في المشروع الرسمي ، نحتاج إلى حساب وضع تنفيذ الطلب الحالي لإعادة التقدم ديناميكيًا.
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-master/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/js/bootstrap-switch.js"></script>
تعتمد المكونات على jQuery و Bootstrap
ثم هناك تهيئة HTML و JS
<input type="checkbox" checked /> $(function () { $('input[type=checkbox]').bootstrapSwitch({ size: "large" });})سمة الحجم ليست ضرورية. إذا كنت تستخدم النمط الافتراضي ، فلا يمكن تمرير المعلمات.
خصائص شائعة الاستخدام
• الحجم: حجم التبديل. القيم الاختيارية هي "صغيرة" ، "صغيرة" ، "طبيعية" ، "كبيرة"
• 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-rating-master/css/star-rating.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap-star-rating-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="{}"><input id="input-21a" value="0" type="number" min=0 max=5 step=0.5 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" data-stars=5 data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"><input id="input-22" value="0" type="number" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' البيانات glyphicon = 0>تتم تهيئة المكون من خلال الفئة = "التصنيف". فيما يلي بعض المعلمات التي يجب أن يكون من السهل فهمها:
• القيمة: تمثل النتيجة الافتراضية عند تهيئة المكون
• دقيقة: الحد الأدنى درجة
• ماكس: الحد الأقصى درجة
• الخطوة: تمت إضافة الحد الأدنى للمقياس في كل مرة
• حجم البيانات: حجم النجوم
• نجوم البيانات: عدد النجوم
يمكنك الحصول على النتيجة الحالية باستخدام $ ("#input-21a"). val ().
十三、总结
通过这篇文章给大家分享了下bootstrap的十二款组件，博主相信这些里面肯定有些你能够用上，可能有些并不常用，但留着以后或许能用上呢！至此，bootstrap组件的总结暂时告一段落，后面将会分享下ko的一些封装。如果你觉得本文能够帮到你，可以推荐下，博主一定继续努力！