Preface: I have shared many common components of bootstrap before, including forms, form verification, file upload, check drop-down boxes, pop-up boxes, etc. During this period, the blogger has collected some useful components (some of which have been used in the project). After two days, he has sorted out some of them. Based on the principle of "good things must be shared with others", today we will give some benefits to share the things collected by the blogger for reference by gardeners in need. Most of the components are open source components, and some of them are the effects found and rewritten by bloggers on the Internet. They may not be satisfactory. If you are interested, please take a look.
1. Time component
There are many time components in bootstrap style. You can search for the keyword "datepicker" on github and you can find many time components. The blogger has used two of them before and found that there will be some problems of big or small size. After some screening, we found a time component that has good results and can be used for various scenarios. Let’s take a look at its style below.
1. Effect display
Initial effect
Customization of culture and date formats in component: only dates are displayed
Show date and time (the experience of mobile phone and tablet devices may be better)
2. Source code description
Chuchu looked at the component effect and gave the source code address
3. Code examples
First, reference the required file
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css" rel="stylesheet" /> <script 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.0/moment-with-locales.js"></script> <script src="~/Content/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
JQuery and bootstrap are required. In addition, you also have to refer to the moment-with-locales.js file. Of course, you can also download this js file to your local area without using this cdn method. You can completely download this js file to your local area and then add a local reference.
(1) Initial effect
<label>Date: </label> <div class='input-group date' id='datetimepicker1'> <input type='text' /> <span> <span></span> </span> </div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script>This will give the effect as shown in the picture above.
(2) Chinese culture and date formatting
The html part remains unchanged. Just add parameters when initializing js.
<script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD',//Date formatting, only the date locale: 'zh-CN' //Chinese culture}); }); </script>(3) Display time
<label>Time: </label> <div class='input-group date' id='datetimepicker2'> <input type='text' /> <span> <span></span> </span> </div> <script type="text/javascript"> $(function () { $('#datetimepicker2').datetimepicker({ format: 'YYYY-MM-DD HH:mm:ss', locale: 'zh-CN' }); }); </script>(4) Maximum date and minimum date
$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD',//Date formatting, only display date locale: 'zh-CN', //Chinese culture maxDate: '2017-01-01',//Maximum date minDate: '2010-01-01' //Minimum date});(5) Enable the delete button
showClear: true
(6) View Mode attribute. Set the browser to select mode to copy the code as follows: viewMode: 'years'
(7) Others
For more powerful functions, please refer to the API, so I won't list them all here. There are a large number of attributes, events, and methods to meet your various special needs.
2. Self-increasing device components
Regarding bootstrap autoincrementer, it may not be needed in every project. There are some special scenarios, such as: a certain text box requires data numbers, and the size of the array needs to be fine-tuned. After talking for a long time, some gardeners may not know what it looks like, so please click the picture.
1. Effect display
In fact, the effect is very simple, but it can automatically set the maximum value, minimum value, and self-added value, and can automatically perform digital verification. The most convenient thing is that it needs to be initialized using JavaScript, and it only needs to be initialized in html.
2. Source code description
Source code and document address
3. Code examples
The first file to be referenced is as follows:
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <link href="~/Content/jquery.spinner-master/dist/css/bootstrap-spinner.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/jquery.spinner-master/dist/js/jquery.spinner.js"></script>
The font-aweaome.min.css file is also a cdn reference file, and you can also refer to it to your local.
(1) Initialization
<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></div>
Just a simple html section, you can see the effect as shown in the picture above. Is it easy?
(2) Self-increasing type
When viewing the source code of the component, you can see that there are multiple self-increment types defined for us:
You can define the data-rule attribute to these types, such as:
The rules that can control the self-increase component are carried out according to the monthly rules.
(3) Set the maximum value, minimum value, self-added value
In addition to the above specific types, the components also support custom maximum, minimum, and self-added value.
<div data-trigger="spinner"> <input type="text" value="1" data-min="-10" data-max="10" data-step="2" data-rule="quantity"> <span> <a href="javascript:;" data-spin="up"><i></i></a> <a href="javascript:;" data-spin="down"><i></i></a> </span></div>
data-min="-10": minimum value data-max="10": maximum value data-step="2": self-increasing value
This is easy to understand, and I won't explain it too much. Effect:
(4) Event capture
The component provides two events changed and changing, which correspond to the numerical change and the event callback after the change.
$('#id').spinner('changed', function(e, newVal, oldVal) {});$('[data-trigger="spinner"]').spinner('changing', function(e, newVal, oldVal) {});3. Loading effect
A few days ago, a group member asked what components to use for bootstrap's loading effect. In fact, searching on Baidu can also find many results. Here, the blogger will share a few loaded widgets based on his or her usage experience, hoping that everyone can use them. It is mainly divided into practical and cool. The practical model has average effect, but it can be used for various browsers; the cool model is written using the latest css3 and html5, and the effect is very cool, but basically the lower version of IE (below 10) is not compatible.
1) Practical
1. PerfectLoading component
This component is a js found by the blogger on the Internet, but after downloading it, I found some big and small problems. So the blogger rewritten it and named it the bootstrap-loading component. Its principle is to pop up a cover layer when the component is started, and then when the component is closed, the overlay layer dom is removed, and the loading effect uses a GIF image.
PerfectLoad.js file content:
/********************************************* * * Plug-in: Friendly page loading effect* Author:sqinyang ([email protected]) * Time:2015/04/20 * Explanation: With the popularity of HTML5, the page effect is getting more and more dazzling, and at the same time, it also requires loading a large number of plug-ins and materials. The internet speed is extremely fierce, especially for websites hanging on foreign servers. Once you open a bunch of materials, you can slowly load the locations and the locations are inconsistent. Therefore, this method is written to facilitate everyone to use **********************************************************/jQuery.bootstrapLoading = { start: function (options) { var defaults = { opacity: 1, //loading page transparency backgroundColor: "#ffff", //loading page background color borderColor: "#bbb", //prompt border color borderWidth: 1, //prompt border width borderStyle: "solid", //prompt border style loadingTips: "Loading, please wait...", //prompt text TipsColor: "#666", //prompt color delayTime: 1000, //After the page loading is completed, the loading page is gradually out of speed zindex: 999, //loading page hierarchy sleep: 0 //Set suspend, if it is equal to 0, there is no need to suspend} var options = $.extend(defaults, options); //Get page width and height var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //LoadingHtml custom content displayed before the page is not loaded var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:' + _PageHeight + 'px;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: auto;border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; height:80px; line-height:80px; padding-left:80px; padding-right: 5px;border-radius:10px; background: ' + options.backgroundColor + ' url(/Content/bootstrap-loading/images/loading.gif) no-repeat 5px center; color:' + options.TipsColor + ';font-size:20px;">' + options.loadingTips + '</div></div>'; //Represent loading effect $("body").append(_LoadingHtml); //Get the width and height of the loading prompt box var _LoadingTipsH = document.getElementById("loadingTips").clientHeight, _LoadingTipsW = document.getElementById("loadingTips").clientWidth; //Calculate the distance and keep the loading prompt box up, down, left and right, centered var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0, _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0; $("#loadingTips").css({ "left": _LoadingLeft + "px", "top": _LoadingTop + "px" }); // Listen to the page loading status document.onreadystatechange = PageLoaded; //Execute function PageLoaded() { if (document.readyState == "complete") { var loadingMask = $('#loadingPage'); setTimeout(function () { loadingMask.animate({ "opacity": 0 }, options.delayTime, function () { $(this).hide(); }); }, options.sleep); } } }, end: function () { $("#loadingPage").remove(); }}
This js is basically down online, but on this basis, the blogger added an end method.
Let’s see how the components are used. Here is the test code:
<html><head> <meta name="viewport" content="width=device-width" /> <title>loading</title> <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-loading/PerfectLoad.js"></script> <script type="text/javascript"> $(function () { $("#btn_submit").on("click", function () { $.bootstrapLoading.start({ loadingTips: "Data is being processed, please wait..." }); $.ajax({ type: 'get', url: '/Home/TestLoading', data: {}, success: function (data, statu) { debugger; }, complete: function () { $.bootstrapLoading.end(); } }); }) }); </script></head><body> <div style="padding:0px"> <div style="height:450px;"> <div>Query conditions</div> <div> <form id="formSearch"> <div> <div> <button type="button" id="btn_submit"><span aria-hidden="true"></span>Loading test</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div></body></html>Instructions for use: The component does not require any html code, it only needs to call the component's start method when executing loading. The start() method starts the pop-up layer and can set all parameters in the defaults variable. When loading is finished, the component's end method will be called, and the pop-up layer will be automatically removed. Let's see the effect:
If you are not satisfied with the effect, you can set the parameters in the defaults yourself. The annotations are written in detail, so I won't list them one by one here.
2. Chrysanthemum loading component spin.js
Using images to display loading effects has its inherent disadvantages, so many loading components now use css+js to achieve animation effects. spin.js is one of these examples. spin.js is an open source component with an open source address.
After downloading the source code, the initialization finds that the component does not have a mask, so it can only be like this:
After searching for its parameters for a long time, I couldn't find them, or I didn't find them where there was a "organization". There is no way, the blogger can only add the effect of the mask himself. So a new css style file was created and temporarily named spin.css, with only one style in it:
.fade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; opacity: 1; background-color: grey;}Then spin.js was rewritten in two places, and the rewrite content is as follows:
/** * Copyright (c) 2011-2014 Felix Gnass * Licensed under the MIT license * http://spin.js.org/ * * Example: var opts = { lines: 12, // The number of lines to draw length: 7, // The length of each line width: 5, // The line thickness radius: 10, // The radius of the inner circle scale: 1.0, // Scales overall size of the spinner corners: 1, // Roundness (0..1) color: '#000', // #rgb or #rrggbb opacity: 1/4, // Opacity of the lines rotate: 0, // Rotation offset direction: 1, // 1: clockwise, -1: counterclockwise speed: 1, // Rounds per second trail: 100, // Afterglow percentage fps: 20, // Frames per second when using setTimeout() zIndex: 2e9, // Use a high z-index by default className: 'spinner', // CSS class to assign to the element top: '50%', // center vertically left: '50%', // center horizontally shadow: false, // whether to render a shadow hwaccel: false, // Whether to use hardware acceleration (might be buggy) position: 'absolute' // Element positioning }; var target = document.getElementById('foo'); var spinner = new Spinner(opts).spin(target); */;(function(root, factory) { if (typeof module == 'object' && module.exports) module.exports = factory(); // CommonJS else if (typeof define == 'function' && define.amd) define(factory); // AMD module else root.Spinner = factory(); // Browser global}(this, function() { 'use strict'; var prefixes = ['webkit', 'Moz', 'ms', 'O']; // Vendor prefixes var animations = {}; // Animation rules keyed by their name var useCssAnimations; // Whether to use CSS animations or setTimeout var sheet; // A stylesheet to hold the @keyframe or VML rules /** * Utility function to create elements. If no tag name is given, * a DIV is created. Optionally properties can be passed. */ function createEl(tag, prop) { var el = document.createElement(tag || 'div'); var n; for (n in prop) el[n] = prop[n]; return el; } /** * Appends children and returns the parent. */ function ins(parent /* child1, child2, ...*/) { for (var i = 1, n = arguments.length; i < n; i++) { parent.appendChild(arguments[i]); } return parent; } /** * Creates an opacity keyframe animation rule and returns its name. * Since most mobile Webkits have timing issues with animation-delay, * we create separate rules for each line/segment. */ function addAnimation(alpha, trail, i, lines) { var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-'); var start = 0.01 + i/lines * 100; var z = Math.max(1 - (1-alpha) / trail * (100-start), alpha); var prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase(); var pre = prefix && '-' + prefix + '-' || ''; if (!animations[name]) { sheet.insertRule( '@' + pre + 'keyframes ' + name + '{' + '0%{opacity:' + z + '}' + start + '%{opacity:' + alpha + '}' + (start+0.01) + '%{opacity:1}' + (start+trail) % 100 + '%{opacity:' + alpha + '}' + '100%{opacity:' + z + '}' + '}', sheet.cssRules.length); animations[name] = 1; } return name; } /** * Tries various vendor prefixes and returns the first supported property. */ function vendor(el, prop) { var s = el.style; var pp; var i; prop = prop.charAt(0).toUpperCase() + prop.slice(1); if (s[prop] !== undefined) return prop; for (i = 0; i < prefixes.length; i++) { pp = prefixes[i]+prop; if (s[pp] !== undefined) return pp; } } /** * Sets multiple style properties at once. */ function css(el, prop) { for (var n in prop) { el.style[vendor(el, n) || n] = prop[n]; } return el; } /** * Fills in default values. */ function merge(obj) { for (var i = 1; i < arguments.length; i++) { var def = arguments[i]; for (var n in def) { if (obj[n] === undefined) obj[n] = def[n]; } } return obj; } /** * Returns the line color from the given string or array. */ function getColor(color, idx) { return typeof color == 'string' ? color : color[idx % color.length]; } // Built-in defaults var defaults = { lines: 12, // The number of lines to draw length: 7, // The length of each line width: 5, // The line thickness radius: 10, // The radius of the inner circle scale: 1.0, // Scales overall size of the spinner corners: 1, // Roundness (0..1) color: '#000', // #rgb or #rrggbb opacity: 1/4, // Opacity of the lines rotate: 0, // Rotation offset direction: 1, // 1: clockwise, -1: counterclockwise speed: 1, // Rounds per second trail: 100, // Afterglow percentage fps: 20, // Frames per second when using setTimeout() zIndex: 2e9, // Use a high z-index by default className: 'spinner', // CSS class to assign to the element top: '50%', // center vertically left: '50%', // center horizontally shadow: false, // whether to render a shadow hwaccel: false, // Whether to use hardware acceleration position: 'absolute' // Element positioning }; /** The constructor */ function Spinner(o) { this.opts = merge(o || {}, Spinner.defaults, defaults); } // Global defaults that override the built-ins: Spinner.defaults = {}; merge(Spinner.prototype, { /** * Adds the spinner to the given target element. If this instance is already * spinning, it is automatically removed from its previous target b calling * stop() internally. */ spin: function(target) { this.stop(); var self = this; var o = self.opts; var el = self.el = createEl(null, {className: o.className}); css(el, { position: o.position, width: 0, zIndex: o.zIndex, left: o.left, top: o.top }); if (target) { target.insertBefore(el, target.firstChild || null); target.className = "fade"; } el.setAttribute('role', 'progressbar'); self.lines(el, self.opts); if (!useCssAnimations) { // No CSS animation support, use setTimeout() instead var i = 0; var start = (o.lines - 1) * (1 - o.direction) / 2; var alpha; var fps = o.fps; var f = fps / o.speed; var ostep = (1 - o.opacity) / (f * o.trail / 100); var astep = f / o.lines; (function anim() { i++; for (var j = 0; j < o.lines; j++) { alpha = Math.max(1 - (i + (o.lines - j) * step) % f * step, o.opacity); self.opacity(el, j * o.direction + start, alpha, o); } self.timeout = self.el && setTimeout(anim, ~~(1000 / fps)); })(); } return self; }, /** * Stops and removes the Spinner. */ stop: function() { var el = this.el; if (el) { clearTimeout(this.timeout); if (el.parentNode) { var reg = new RegExp('(//s|^)fade(//s|$)'); el.parentNode.className = el.parentNode.className.replace(reg, ' '); el.parentNode.removeChild(el); } this.el = undefined; } return this; }, /** * Internal method that draws the individual lines. Will be overwritten * in VML fallback mode below. */ lines: function(el, o) { var i = 0; var start = (o.lines - 1) * (1 - o.direction) / 2; var seg; function fill(color, shadow) { return css(createEl(), { position: 'absolute', width: o.scale * (o.length + o.width) + 'px', height: o.scale * o.width + 'px', background: color, boxShadow: shadow, transformOrigin: 'left', transform: 'rotate(' + ~~(360/o.lines*i + o.rotate) + 'deg) translate(' + o.scale*o.radius + 'px' + ',0)', borderRadius: (o.corners * o.scale * o.width >> 1) + 'px' }); } for (; i < o.lines; i++) { seg = css(createEl(), { position: 'absolute', top: 1 + ~(o.scale * o.width / 2) + 'px', transform: o.hwaccel ? 'translate3d(0,0,0)' : '', opacity: o.opacity, animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite' }); if (o.shadow) ins(seg, css(fill('#000', '0 0 4px #000'), {top: '2px'})); ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)'))); } return el; }, /** * Internal method that adjusts the opacity of a single line. * Will be overwritten in VML fallback mode below. */ opacity: function(el, i, val) { if (i < el.childNodes.length) el.childNodes[i].style.opacity = val; } }); function initVML() { /* Utility function to create a VML tag */ function vml(tag, attr) { return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml">', attr); } // No CSS transforms but VML support, add a CSS rule for VML elements: sheet.addRule('.spin-vml', 'behavior:url(#default#VML)'); Spinner.prototype.lines = function(el, o) { var r = o.scale * (o.length + o.width); var s = o.scale * 2 * r; function grp() { return css( vml('group', { coordsize: s + ' ' + s, coordinate: -r + ' ' + -r }), { width: s, height: s } ); } var margin = -(o.width + o.length) * o.scale * 2 + 'px'; var g = css(grp(), {position: 'absolute', top: margin, left: margin}); var i; function seg(i, dx, filter) { ins( g, ins( css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), ins( css( vml('roundrect', {arcsize: o.corners}), { width: r, height: o.scale * o.width, left: o.scale * o.radius, top: -o.scale * o.width >> 1, filter: filter } ), vml('fill', {color: getColor(o.color, i), opacity: o.opacity}), vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change ) ) ); } if (o.shadow) for (i = 1; i <= o.lines; i++) { seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)'); } for (i = 1; i <= o.lines; i++) seg(i); return ins(el, g); }; Spinner.prototype.opacity = function(el, i, val, o) { var c = el.firstChild; o = o.shadow && o.lines || 0; if (c && i + o < c.childNodes.length) { c = c.childNodes[i + o]; c = c && c.firstChild; c = c && c.firstChild; if (c) c.opacity = val; } }; } if (typeof document !== 'undefined') { sheet = (function() { var el = createEl('style', {type : 'text/css'}); ins(document.getElementsByTagName('head')[0], el); return el.sheet || el.styleSheet; }()); var probe = css(createEl('group'), {behavior: 'url(#default#VML)'}); if (!vendor(probe, 'transform') && probe.adj) initVML(); else useCssAnimations = vendor(probe, 'animation'); } return Spinner;}));spin.js
Two changes:
(1) When initializing, if it is displayed, add a fade style to the corresponding tag.
(2) Delete the fade style every time.
After the modification is made, the test interface is now available.
<html><head> <meta name="viewport" content="width=device-width" /> <title>loading2</title> <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/spin.js-master/css/spin.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/spin.js-master/js/spin.js"></script> <script type="text/javascript"> $(function () { $("#btn_submit").on("click", function () { //var opts = { // lines: 9, // Number of petals// length: 1, // Petal length// width: 10, // Petal width// radius: 15, // Petal radius from the center// corners: 1, // Petal smoothness (0-1) // Rotate: 0, // Petal rotation angle// direction: 1, // Petal rotation direction 1: Clockwise, -1: Counterclockwise// color: '#000', // Petal color// speed: 1, // Petal rotation speed// trail: 60, // Shadow when petal rotates (percentage) // shadow: false, // Whether the petal displays shadow// hwaccel: false, // Spinner Whether hardware acceleration and high-speed rotation are enabled// className: 'spinner', // spinner css Style name// zIndex: 2e9, // Spinner's z-axis (default is 2000000000) // top: 'auto', // spinner Top positioning unit px relative to the parent container // left: 'auto'// spinner Left positioning unit px //}; //var target = document.getElementById('foo'); //var spinner = new Spinner({}).spin(target); var spinner = undefined; $.ajax({ type: 'get', url: '/Home/TestLoading', data: {}, beforeSend: function () { var option = { lines: 9, // Number of petals length: 1, // Petal length width: 10, // Petal width: 15, // Petal width: 15, // Petal distance from the center shadow: true, opacity:1/8 }; var target = document.getElementById('foo'); spinner = new Spinner(option).spin(target);//Show load}, success: function (data, statu) { //debugger; }, complete: function () { spinner.spin();//Remove load} }); }) }); </script></head><body> <div style="padding:0px"> <div style="height:450px;"> <div>Query conditions</div> <div> <form id="formSearch"> <div> <div> <button type="button" id="btn_submit"><span aria-hidden="true"></span>Loading test</button> </div> </form> </div> </div> </div> </div> </div> </div> <div id="foo"></div></body></html>test_spin.cshtmlInstructions for use: If your page does not use jQuery, refer to the spin.js file, this file does not require jquery support; if you want to use jQuery, refer to the jquery.spin.js file. The above code is not using jQuery. The component needs to define an empty div and then initialize it on this div. The results obtained are as follows:
Of course, if you are not satisfied with this effect, you can also set the transparency of the mask layer and the style of the entire mask. There are also various parameters for rotation that can be customized during initialization, and there are detailed comments in the above code.
2) Cool model
1. jquery.shCircleLoader.js component
Needless to say, this component is also simple to use, but it is not supported for versions below IE10. Let's see the effect first:
As for the specific code usage, the blogger does not intend to go deep into it, so you can search on Baidu or github.
2. FakeLoader.js component
More options, better flattening effect, better experience with mobile phone and tablet devices. Just look at the pictures and you will know. Open source address.
4. Flowchart plug-in
I had to do a workflow some time ago and I needed to show where the current process was going. I found a process plug-in ystep. The advantage of this component is that it is simple to use and lightweight.
1. Effect display
Let's see the effect first
Blue reduced version
2. Source code description
Open source address.
3. Code examples
First, reference the required file
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/ystep-master/css/ystep.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script>
This component requires support from two components: jQuery and bootstrap.
Then define an empty div
<div id="div_ystep1"></div>
Finally, initialize the component when the button is clicked
<script type="text/javascript"> $(function () { $("#btn_submit").click(function () { $("#div_ystep1").loadStep({ //ystep appearance size//Optional value: small,large size: "small", //ystep color scheme//Optional value: green,blue color: "blue", //The steps included in ystep: [{ //Step name title: "Start", //Step content (when the mouse moves to the node of this step, it will be prompted) content: "Process start" }, { title: "Approval", content: "Every roles start approval" }, { title: "Implementation", content: "Requirements Begin Implementation" }, { title: "End", content: "Process End" }] }); $("#div_ystep1").setStep(3); }); }); </script>If it is a dynamic step, it may be necessary to construct the steps attribute dynamically. Then use setStep() to set which step you have reached.
Common methods:
//Skip to the next step $(".ystep1").nextStep();//Skip to the previous step $(".ystep1").prevStep();//Skip to the specified step $(".ystep1").setStep(2);//Get the current step $(".ystep1").getStep();5. Button prompt component bootstrap-confirmation
The button prompt component is a bit similar to the confirm function in js, but this confirm is a tooltip pop-up effect, giving users a determination and cancellation judgment, and the interface is more friendly. Before introducing this component, you can first take a look at the effect of the prompt box in bootstrap:
The bootstrap-confirmation component is implemented based on the effect of this prompt box. There are many bootstrap-confirmation components on github, but they are basically the same. .
1. Effect display
The most original effect
Custom title, button text
2. Source code description
Open source address
3. Code examples
(1) Quote files:
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script>
Styles require support of bootstrap.css. JavaScript requires support of jquery and bootstrap.js.
(2) Corresponding click tag (can be any tag)
<button type="button" id="btn_submit1"><span aria-hidden="true"></span>Delete</button>
(3) js initialization
<script type="text/javascript"> $(function () { $('#btn_submit1').confirmation({ animation: true, placement: "bottom", title: "Are you sure you want to delete?", btnOkLabel: 'OK', btnCancelLabel: 'Cancel', onConfirm: function () { //alert("Clicked OK"); }, onCancel: function () { //alert("Clicked Cancel"); } }) }); </script>(4) More attributes, events, methods
In addition to the initialized properties mentioned above, there are some commonly used properties. for example:
btnOkClass: determine the style of the button; btnCancelClass: cancel the style of the button; singleton: whether only one determination box is allowed; popout: whether to hide the determination box when the user clicks on another place;
For example, you can set btnOkClass to btnOkClass: 'btn btn-sm btn-primary',
6. Image classification and filtering components MuxitUp
This is a grouping and filtering component with a very cool effect, and an open source address. The blogger saw a demo on the Internet and thought it was really effective. Without further ado, the picture above.
How about it, the effect is OK. This component is not used in the project for the time being, but I feel that there is a possibility of needing it in the future, so I collected it. The implementation code is copied online. I haven't studied it in depth. If you are interested, you can take a look. The html+js code is implemented as follows:
<html><head> <meta name="viewport" content="width=device-width" /> <title>mixitup</title> <link href="~/Content/image/css/normalize.css" rel="stylesheet" /> <link href="~/Content/image/css/layout.css" rel="stylesheet" /> <script 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> <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> <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> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/2.jpg" /> <div> <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 data-cat="logo"> <div> <img src="~/Content/image/logo/7.jpg" /> <div> <div> <a>Village Community Church</a> <span>Logo</span> </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 data-cat="web"> <div> <img src="~/Content/image/web/3.jpg" /> <div> <div> <a>Backend Admin</a> <span>Web design</span> </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 data-cat="web"> <div> <img src="~/Content/image/web/2.jpg" /> <div> <div> <a>Student Guide</a> <span>Web design</span> </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 data-cat="icon"> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <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> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <div> <a>Bookworm</a> <span>Logo</span> </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 data-cat="card"> <div> <img src="~/Content/image/card/3.jpg" /> <div> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Speciallisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的朋友节省寻找组件的时间。
上面分享了几个项目中比较常用的组件，引起了许多朋友的关注。下面还是继续，因为觉得还有几个非常简单、实用的组件，实在不愿自己一人独享，没办法，谁让博主这么爱分享呢~~
7. Multi-value input component manifest
Regarding the multi-value input of text boxes, it has always been a common requirement. Today, the blogger recommends a useful multi-value input component for everyone. Don’t thank me, please call me "Red Scarf"!
1. Effect display
Local multi-value input box
Remote multi-value input box
2. Source code description
感谢开源社区，感谢那些喜欢分享的可爱的人儿，开源地址。
3. Code examples
(1) Local multi-value input
First, you need to reference the following files
<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>
The Js and css files of bootstrap are not necessary. This article is for the sake of good style, so it is referenced. The manifest component does not rely on bootstrap, but depends on jQuery. In addition, it also needs to refer to three files: jquery.manifest.css, jquery.ui.widget.js, and jquery.marcopolo.js.
Then there is the initialization of html and js
<input type='text' autocomplete="off" id="txt_man" /> <script type="text/javascript"> $(function () { $('#txt_man').manifest(); });</script>Through simple steps as above, the above effect can be produced. Isn’t it very simple? Let's take a look at some of its usages
//常用属性：得到文本框里面所有项的集合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) Remote multi-value input
The way to remote search input requires us to provide a url address, obtain the data, and then return to the browser. For simplicity, this article directly uses the URL on the source code website to display the effect.
First, you need to reference the js file
<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>
Compared with the above, there is an additional reference to the file jquery.marcopolo.js.
Then there is the initialization of html and 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>As for the significance of each parameter, it should be easy to understand if you need it. The blogger briefly monitored the return value of this remote search method
如果有打算自己用这个远程的方法，可以参考这个数据格式去实现。
8. Text box search component bootstrap-typeahead
In fact, many components have this function regarding the function of text box search. For example, there is an autocomplete component in the jQuery UI that the blogger used to use to achieve automatic completion. The automatic search components of bootstrap text boxes are emerging online. The reason I chose this component today is because I think it is similar to bootstrap's style, and the components are smaller, simple and practical.
1. Effect display
Local static search (data source is local)
Remote search (data source is retrieved remotely through ajax request)
2. Source code description
Source code address
3. Code examples
The first file that needs to be referenced: mainly contains a css and a js file. Need support from jQuery and 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>
Then the component initialization
<input type='text' id="txt_man" />
Data source locally
<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>Data source is obtained through ajax request
<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>Test method corresponding to the background
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) ; }Common properties:
•display: The field name displayed
•val: The actual value
•items: The number of search results displayed by default. The default value is 8
•source: Local data source, formatted as an array.
•ajax: The object requested by ajax can be directly a string url or an object object. If it is an object object, I won't talk about url. The triggerLength property indicates that the input of several characters triggers the search.
Commonly used events:
•itemSelected: Triggered when the search value is selected.
<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>The parameter item represents the selected object, the parameter val represents the actual value of the selected item, and the text represents the displayed value of the selected item.
9. Bootstrap step component
Regarding the bootstrap step component, the previous article introduced a ystep widget. It can play a certain role in viewing the progress of the task, but for some complex businesses, it is a bit powerless to deal with the corresponding business in accordance with the current steps. Today, the blogger will introduce a step component that has a very good effect. With this component, programmers no longer have to worry about complex step design.
1. Effect display
Have a glimpse of the style
Follow the steps to "Previous Step" and "Next Step"
More steps
2. Source code description
This component was found by the blogger online. I saw that many styles and usages are from bootstrap. The only thing I need to refer to is a js and a css file. The source code source has not been found yet. If anyone knows the source code source, you can tell the blogger. In addition, in order to respect the author's labor results, the blogger must respect the originality!
3. Code examples
Files that need to be referenced
<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 and brush.js need to be referenced, and the components need the support of jQuery and bootstrap.
Then there is the initialization of the component.
(1) Arrow
<ul> <li> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li></ul>
If it is a static step, you only need the above html code to see the effect of the arrow step in the above picture. The active style here represents the style that the step has passed.
(2) Square
<ul> <li> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li></ul>
(3) Circular shape
<ul> <li> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li></ul>
(4) Progress bar
<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) Previous step, next step
The "Previous Step" and "Next Step" in the picture above are defined by yourself in the bootstrap modal component, or are the code posted for your reference.
<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>
Of course, you also need to register a click event for two buttons
$("#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") } } }) })The logic may be incomplete and tests are required if used formally.
10. Button load component ladda-bootstrap
Regarding button loading, the blogger has long wanted to find a suitable component to optimize. If it is not processed, there is definitely a possibility of repeated operations. Let’s take a look at such a small thing today.
1. Effect display
First meet
Custom color, size, progress bar
2. Source code description
Source code address
3. Code examples
Files that need to be referenced
<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>
Component initialization: Initialize 4 buttons
<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; }); });Code doubt: It should not be difficult to understand. The code involved in initializing the component var l = Ladda.create(this); l.start(); here this represents the object of the button currently clicked (note that this is a dom object instead of a jQuery object), and then call l.stop(); after the request is completed, close the load.
(1) All the data-style options are as follows. If you are interested, you can try it and see what the effects are:
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) If you need to adjust the size of the button, the component has a built-in data-size property. All data-size options are as follows:
data-size="xs"
data-size="s"
data-size="l"
(3) If you need to set the color of the button, use data-spinner-color
data-spinner-color="#FF0000"
(4) Settings of the progress bar of the button
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); } }); });The current execution progress is mainly set through the sentence instance.setProgress(progress);, and the progress value is between 0 and 1. Of course, the above is just code to test the progress effect. In the official project, we need to calculate the current request execution situation to dynamically return the progress.
11. Switch component bootstrap-switch
On the homepage of bootstrap Chinese website, you can find such a component
1. Effect display
Initial effect
Various attributes and events
2. Source code description
Bootstrap-Switch source code address: https://github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switch documentation and Demo: http://www.bootstrap-switch.org/examples.html
3. Code examples
Files that need to be referenced
<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>
Components depend on JQuery and bootstrap
Then there is the initialization of html and js
<input type="checkbox" checked /> $(function () { $('input[type=checkbox]').bootstrapSwitch({ size: "large" });})The size attribute is not necessary. If you use the default style, the parameters can be not passed.
Commonly used properties
•size: Switch size. Optional values are 'mini', 'small', 'normal', 'large'
•onColor: The color of the on button in the switch. Optional values include 'primary', 'info', 'success', 'warning', 'danger', 'default'
•offColor: The color of the switch in the color of the OFF button. Optional values 'primary', 'info', 'success', 'warning', 'danger', 'default'
•onText: The text of the on button in the switch, the default is "ON".
•offText: The text of the switch is "OFF" by default.
•onInit: Events that initialize the component.
•onSwitchChange: Events when the switch changes.
Common events and methods can be used to view the documents directly, and the official provides a very detailed description.
12. Scoring component bootstrap-star-rating
Everyone should know the ratings on the ratings on the 10th and 10th Taobao. I accidentally found a bootstrap-style rating component. I found it interesting. It may be useful for e-commerce, community, and forum systems in the future, so I will share it.
1. Effect display
2. Source code description
Source code download
3. Code examples
This component requires support for jQuery and bootstrap styles
<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-rating-master/bootstrap-star-rating-master/js/locales/zh.js"></script>
Directly through the html initial component
<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 data-size="xl"><input id="input-21b" value="4" type="number" min=0 max=5 step=0.2 data-size="lg"><input id="input-21c" value="0" type="number" min=0 max=8 step=0.5 data-size="xl" data-stars="8"><input id="input-21d" value="2" type="number" 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-21f" value="0" type="number" min=0 max=5 step=0.5 data-size="md"><input id="input-2ba" type="number" 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' data-glyphicon=0>The component is initialized through class="rating". Here are some parameters that should be easy to understand:
•value: represents the default score when component initialization
•min: minimum score
•max: Maximum score
•step: The minimum scale added each time
•data-size: the size of the stars
•data-stars: the number of stars
You can get the current score by using $("#input-21a").val().
十三、总结
通过这篇文章给大家分享了下bootstrap的十二款组件，博主相信这些里面肯定有些你能够用上，可能有些并不常用，但留着以后或许能用上呢！至此，bootstrap组件的总结暂时告一段落，后面将会分享下ko的一些封装。如果你觉得本文能够帮到你，可以推荐下，博主一定继续努力！