المقدمة: لقد شاركت العديد من المكونات الشائعة من 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.easing.min.js"></script> <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(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 is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you. آمل أن يكون ذلك مفيدًا لك. If you have any questions, please leave me a message and the editor will reply you in time. Thank you very much for your support to Wulin.com website!