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 style
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> <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>muxitup7. Summary
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
以上所述是小编给大家介绍的Bootstrap组件系列之福利篇几款好用的组件(推荐)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。 Thank you very much for your support to Wulin.com website!