JS組件福利大放送 推薦12款好用的Bootstrap組件
更新時(shí)間：2016年07月13日 10:08:23 作者：懶得安分
Bootstrap組件福利大放送，這篇文章主要為大家推薦了幾款好用的Bootstrap組件，感興趣的小伙伴們可以參考一下
前言：之前分享過很多bootstrap常用組件，包括表格、表單驗(yàn)證、文件上傳、復(fù)選下拉框、彈出框等。這段時(shí)間，博主又收藏了一些好用的組件（有些在項(xiàng)目中已經(jīng)用起來了），經(jīng)過兩天的時(shí)間，已經(jīng)整理出了一部分，本著“好東西要與人分享”的原則，今天還是來點(diǎn)福利，將博主收藏的東西分享出來，供需要的園友參考。組件大部分都是些開源組件，也有部分是博主自己在網(wǎng)上找到然后改寫出來的效果，可能不盡如人意，有興趣的且看看吧。
一、時(shí)間組件
bootstrap風(fēng)格的時(shí)間組件非常多，你可以在github上面隨便搜索“datepicker”關(guān)鍵字，可以找到很多的時(shí)間組件。博主原來也用過其中的兩個(gè)，發(fā)現(xiàn)都會(huì)有一些大大小小的問題。經(jīng)過一番篩選，找到一個(gè)效果不錯(cuò)、能適用各種場景的時(shí)間組件，下面就來一睹它的風(fēng)采吧。
1、效果展示
初始效果
組件中文化和日期格式自定義：只顯示日期
顯示日期和時(shí)間（手機(jī)、平板類設(shè)備可能體驗(yàn)會(huì)更好）
2、源碼說明
初初看了下組件效果，還是給出源碼地址
3、代碼示例
首先引用需要的文件
<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="http://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和bootstrap是必須的。除此之外，還得引用moment-with-locales.js這個(gè)文件，當(dāng)然，你也可以不用這種cdn的方式，完全可以下載這個(gè)js文件到你的本地，然后添加本地引用。
（1）初始效果
<label class="control-label col-xs-3">日期：</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
這樣就能出現(xiàn)如上圖一效果。
（2）中文化和日期格式化
html部分不變。js初始化的時(shí)候增加參數(shù)即可。
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',//日期格式化，只顯示日期
locale: 'zh-CN' //中文化
});
});
</script>
（3）顯示時(shí)間
<label class="control-label col-xs-3">時(shí)間：</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
locale: 'zh-CN'
});
});
</script>
（4）最大日期、最小日期
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',//日期格式化，只顯示日期
locale: 'zh-CN', //中文化
maxDate: '2017-01-01',//最大日期
minDate: '2010-01-01' //最小日期
});
（5）啟用刪除按鈕
showClear: true
（6）View Mode屬性。設(shè)置瀏覽器選中模式
復(fù)制代碼 代碼如下:
viewMode: 'years'
（7）其他
更多強(qiáng)大的功能可以參看API，這里就不一一列舉。里面有大量的屬性、事件、方法來滿足你各種特殊的需求。
二、自增器組件
關(guān)于bootstrap自增器，可能并非每一個(gè)項(xiàng)目里面都需要用到。有一些特殊場景，比如：某一個(gè)文本框需要數(shù)據(jù)數(shù)字、數(shù)組的大小需要微調(diào)等一些情況。說了半天，可能有園友都不知道它長啥樣，上點(diǎn)圖吧。
1、效果展示
其實(shí)效果很簡單，但它可以自動(dòng)設(shè)置最大值、最小值、自增值還是挺方便的，并且可以自動(dòng)做數(shù)字校驗(yàn)。最最方便的是它并需要使用JavaScript去做初始化，只需要在html里面初始化即可。
2、源碼說明
3、代碼示例
首先需要引用的文件如下：
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link rel="stylesheet" > <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>
font-aweaome.min.css文件也是一個(gè)cdn引用的文件，你也可以它引用到你的本地。
（1）初始化
<div class="input-group spinner" data-trigger="spinner"> <input type="text" class="form-control text-center" value="1" data-rule="quantity"> <span class="input-group-addon"> <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a> <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a> </span> </div>
就這么一段簡單的html就能看到如上圖的效果，有沒有很easy~~
（2）自增類型
查看組件的源碼，可以看到在它里面為我們定義了多種自增類型：
可以定義data-rule屬性為這些類型，比如：
data-rule="month"可以控制自增組件的規(guī)則是按照月的規(guī)則來進(jìn)行。
（3）設(shè)置最大值、最小值、自增值
除了上面的幾種特定類型，組件還支持自定義最大值、最小值、自增值
<div class="input-group spinner" data-trigger="spinner"> <input type="text" class="form-control text-center" value="1" data-min="-10" data-max="10" data-step="2" data-rule="quantity"> <span class="input-group-addon"> <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a> <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a> </span> </div>
data-min="-10"：最小值data-max="10"：最大值data-step="2"：自增值
這個(gè)很好理解，不做過多說明。效果：
（4）事件捕捉
組件提供了兩個(gè)事件changed、changing，分別對應(yīng)數(shù)值變化中和變化后的事件回調(diào)。
$('#id').spinner('changed', function(e, newVal, oldVal) {
});
$('[data-trigger="spinner"]').spinner('changing', function(e, newVal, oldVal) {
});
三、加載效果
前幾天，有群友在問bootstrap的加載效果用什么組件。其實(shí)百度搜索一下，也能找到很多的結(jié)果。在此，博主根據(jù)自己的使用經(jīng)歷分享下幾個(gè)加載的小組件，希望大家用得著。主要分為實(shí)用型和炫酷型兩種。實(shí)用型效果一般，但能適用各種瀏覽器；炫酷型使用最新的css3和html5寫出來的，效果很炫，但基本上低版本的IE（10以下）都不能兼容。
一）、實(shí)用型
1、PerfectLoading組件
這個(gè)組件是博主在網(wǎng)上找到的一個(gè)js，但下載下來之后發(fā)現(xiàn)一些大大小小的問題，于是，博主改寫了下，命名為bootstrap-loading組件。它的原理就是在組件啟動(dòng)的時(shí)候彈出一個(gè)覆蓋層，然后組件關(guān)閉時(shí)，將覆蓋層的dom移除，加載效果使用了一張gif的圖片。
PerfectLoad.js文件內(nèi)容：
/*******************************************
*
* Plug-in:友好的頁面加載效果
* Author:sqinyang (sqinyang@sina.com)
* Time:2015/04/20
* Explanation:隨著HTML5的流行，頁面效果越來越炫，同時(shí)也需要加載大量的插件及素材，萬惡的網(wǎng)速，特別對于掛在國外服務(wù)器的網(wǎng)站，一打開一堆素材緩緩加載，位置錯(cuò)亂不齊，故編寫此方法，方便大家使用
*
*********************************************/
jQuery.bootstrapLoading = {
start: function (options) {
var defaults = {
opacity: 1,
//loading頁面透明度
backgroundColor: "#fff",
//loading頁面背景色
borderColor: "#bbb",
//提示邊框顏色
borderWidth: 1,
//提示邊框?qū)挾?
borderStyle: "solid",
//提示邊框樣式
loadingTips: "Loading, please wait...",
//提示文本
TipsColor: "#666",
//提示顏色
delayTime: 1000,
//頁面加載完成后，加載頁面漸出速度
zindex: 999,
//loading頁面層次
sleep: 0
//設(shè)置掛起,等于0時(shí)則無需掛起
}
var options = $.extend(defaults, options);
//獲取頁面寬高
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//在頁面未加載完畢之前顯示的loading Html自定義內(nèi)容
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>';
//呈現(xiàn)loading效果
$("body").append(_LoadingHtml);
//獲取loading提示框?qū)捀?
var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
_LoadingTipsW = document.getElementById("loadingTips").clientWidth;
//計(jì)算距離，讓loading提示框保持在屏幕上下左右居中
var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
_LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;
$("#loadingTips").css({
"left": _LoadingLeft + "px",
"top": _LoadingTop + "px"
});
//監(jiān)聽頁面加載狀態(tài)
document.onreadystatechange = PageLoaded;
//當(dāng)頁面加載完成后執(zhí)行
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();
}
}
這個(gè)js基本上是網(wǎng)上down下來的，只是在此基礎(chǔ)上博主加了一個(gè)end的方法。
來看看組件如何使用，下面是測試代碼：
<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: "正在處理數(shù)據(jù)，請稍候..." });
$.ajax({
type: 'get',
url: '/Home/TestLoading',
data: {},
success: function (data, statu) {
debugger;
},
complete: function () {
$.bootstrapLoading.end();
}
});
})
});
</script>
</head>
<body>
<div class="panel-body" style="padding:0px">
<div class="panel panel-default" style="height:450px;">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group">
<div class="col-xs-4">
<button type="button" id="btn_submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>加載測試</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
使用說明：組件不需要任何的html代碼，只需要在執(zhí)行l(wèi)oading的時(shí)候調(diào)用組件的start方法即可。 start()方法啟動(dòng)彈出層，并可設(shè)置defaults 變量里面的所有參數(shù)。當(dāng)loading結(jié)束后再調(diào)用組件的end方法，自動(dòng)將彈出層移除。來看看效果：
如果對效果不滿意，可自己設(shè)置defaults里面的參數(shù)，注釋寫得很詳細(xì)，在此就不一一列舉了。
2、菊花加載組件spin.js
使用圖片顯示加載效果有它天生的弊端，所以現(xiàn)在很多的加載組件都使用css+js去實(shí)現(xiàn)動(dòng)畫效果。spin.js就是其中一個(gè)例子，spin.js是一個(gè)開源組件，開源地址。
下載源碼后，初始化發(fā)現(xiàn)組件不帶遮罩的效果，只能這樣：
找了半天它的參數(shù)，硬是沒找到，亦或是哪里有“機(jī)關(guān)”沒發(fā)現(xiàn)。沒辦法，博主只能自己加上遮罩的效果了。于是新建了一個(gè)css樣式文件暫且命名為spin.css，里面只有一個(gè)樣式：
.fade {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
opacity: 1;
background-color: grey;
}
然后將spin.js改寫了兩個(gè)地方，改寫后的內(nèi)容如下：
/**
* 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) * astep) % f * ostep, 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" class="spin-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,
coordorigin: -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
改動(dòng)的兩個(gè)地方：
（1）初始化的時(shí)候，如果是顯示，則給對應(yīng)的標(biāo)簽加上fade樣式
（2）、每次都將fade樣式刪除掉。
改好之后，就是測試界面了。
<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, // 花瓣數(shù)目
// length: 1, // 花瓣長度
// width: 10, // 花瓣寬度
// radius: 15, // 花瓣距中心半徑
// corners: 1, // 花瓣圓滑度 (0-1)
// rotate: 0, // 花瓣旋轉(zhuǎn)角度
// direction: 1, // 花瓣旋轉(zhuǎn)方向 1: 順時(shí)針, -1: 逆時(shí)針
// color: '#000', // 花瓣顏色
// speed: 1, // 花瓣旋轉(zhuǎn)速度
// trail: 60, // 花瓣旋轉(zhuǎn)時(shí)的拖影(百分比)
// shadow: false, // 花瓣是否顯示陰影
// hwaccel: false, //spinner 是否啟用硬件加速及高速旋轉(zhuǎn)
// className: 'spinner', // spinner css 樣式名稱
// zIndex: 2e9, // spinner的z軸 (默認(rèn)是2000000000)
// top: 'auto', // spinner 相對父容器Top定位 單位 px
// left: 'auto'// spinner 相對父容器Left定位 單位 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, // 花瓣數(shù)目
length: 1, // 花瓣長度
width: 10, // 花瓣寬度
radius: 15, // 花瓣距中心半徑
shadow: true,
opacity:1/8
};
var target = document.getElementById('foo');
spinner = new Spinner(option).spin(target);//顯示加載
},
success: function (data, statu) {
//debugger;
},
complete: function () {
spinner.spin();//移除加載
}
});
})
});
</script>
</head>
<body>
<div class="panel-body" style="padding:0px">
<div class="panel panel-default" style="height:450px;">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group">
<div class="col-xs-4">
<button type="button" id="btn_submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>加載測試</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="foo"></div>
</body>
</html>
test_spin.cshtml
使用說明：如果你的頁面不使用jQuery，引用spin.js這個(gè)文件，這個(gè)文件不需要jquery的支持；如果想要使用jQuery，則引用jquery.spin.js文件。上面的代碼是不使用jQuery的情況。組件需要定義一個(gè)空的div，然后在此div上面做初始化。得到的效果如下：
當(dāng)然，如果你對此效果不滿意，你還可以設(shè)置遮罩層的透明度，以及整個(gè)遮罩的樣式。還有旋轉(zhuǎn)的各個(gè)參數(shù)，都可以通過初始化的時(shí)候自定義，上述代碼里面有詳細(xì)注釋。
二）、炫酷型
1、jquery.shCircleLoader.js組件
此組件效果不用說，使用也比較簡單，但是對IE10以下版本不支持?？纯葱Ч龋?/p>
至于具體的代碼使用，博主不打算深究，可以去百度或者github上面找找。
2、fakeLoader.js組件
更多的選擇，更好的扁平化效果，更好的手機(jī)、平板設(shè)備體驗(yàn)。只需要看看圖片感受下就知道了。開源地址。
四、流程圖小插件
前段時(shí)間做一個(gè)工作流的需求，需要顯示當(dāng)前流程進(jìn)行到哪一步，找到了一個(gè)流程小插件ystep。此組件優(yōu)點(diǎn)在于使用簡單、夠輕量級。
1、效果展示
先來看看效果
藍(lán)色縮小版
2、源碼說明
開源地址。
3、代碼示例
首先引用必須的文件
<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> <script src="~/Content/ystep-master/js/ystep.js"></script>
這個(gè)組件需要jQuery和bootstrap兩個(gè)組件的支持。
然后定義一個(gè)空的div
<div id="div_ystep1"></div>
最后在點(diǎn)擊按鈕的時(shí)候初始化組件
<script type="text/javascript">
$(function () {
$("#btn_submit").click(function () {
$("#div_ystep1").loadStep({
//ystep的外觀大小
//可選值：small,large
size: "small",
//ystep配色方案
//可選值：green,blue
color: "blue",
//ystep中包含的步驟
steps: [{
//步驟名稱
title: "開始",
//步驟內(nèi)容(鼠標(biāo)移動(dòng)到本步驟節(jié)點(diǎn)時(shí)，會(huì)提示該內(nèi)容)
content: "流程開始"
}, {
title: "審批",
content: "各個(gè)角色開始審批"
}, {
title: "實(shí)施",
content: "需求開始實(shí)施"
}, {
title: "結(jié)束",
content: "流程結(jié)束"
}]
});
$("#div_ystep1").setStep(3);
});
});
</script>
如果是動(dòng)態(tài)步驟，可能需要?jiǎng)討B(tài)去構(gòu)造steps屬性。然后通過setStep()設(shè)置當(dāng)前到了哪一步。
常用方法：
//跳轉(zhuǎn)到下一個(gè)步驟
$(".ystep1").nextStep();
//跳轉(zhuǎn)到上一個(gè)步驟
$(".ystep1").prevStep();
//跳轉(zhuǎn)到指定步驟
$(".ystep1").setStep(2);
//獲取當(dāng)前在第幾步
$(".ystep1").getStep();
五、按鈕提示組件bootstrap-confirmation
按鈕提示組件有點(diǎn)類似js里面confirm的功能，不過這個(gè)confirm是以一種tooltip的方式彈出來的效果，給用戶一個(gè)確定、取消的判斷，界面更加友好。介紹這個(gè)組件之前，可以先來看看bootstrap里面提示框的效果：
bootstrap-confirmation組件就是基于這個(gè)提示框的效果來實(shí)現(xiàn)的。github上面有好多個(gè)bootstrap-confirmation組件，但基本大同小異。。
1、效果展示
最原始的效果
自定義title、按鈕文本
2、源碼說明
3、代碼示例
（1）引用文件：
<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-confirmation/bootstrap-confirmation.js"></script>
樣式需要bootstrap.css的支持JavaScript需要jquery和bootstrap.js的支持。
（2）對應(yīng)的點(diǎn)擊標(biāo)簽（可以是任意標(biāo)簽）
<button type="button" id="btn_submit1" class="btn btn-primary"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除</button>
（3）js初始化
<script type="text/javascript">
$(function () {
$('#btn_submit1').confirmation({
animation: true,
placement: "bottom",
title: "確定要?jiǎng)h除嗎？",
btnOkLabel: '確定',
btnCancelLabel: '取消',
onConfirm: function () {
//alert("點(diǎn)擊了確定");
},
onCancel: function () { //alert("點(diǎn)擊了取消");
}
})
});
</script>
（4）更多屬性、事件、方法
除了上述初始化的屬性，還有一些常用的屬性。比如：
btnOkClass：確定按鈕的樣式；btnCancelClass：取消按鈕的樣式；singleton：是否只允許出現(xiàn)一個(gè)確定框；popout：當(dāng)用戶點(diǎn)擊其他地方的時(shí)候是否隱藏確定框；
比如你可以將btnOkClass設(shè)置成btnOkClass : 'btn btn-sm btn-primary',
六、圖片分類、過濾組件MuxitUp
這是一個(gè)效果非常炫酷的分組、過濾組件，開源地址。博主在網(wǎng)上看到一個(gè)它的demo，覺得效果確實(shí)很好，廢話不多說，上圖。
怎么樣，效果還行吧。這個(gè)組件在項(xiàng)目里面暫時(shí)沒用上，但覺得以后有需要的可能，就將此收藏了一把。實(shí)現(xiàn)代碼是網(wǎng)上copy過來的，沒有深究，有興趣可以看看。html+js代碼實(shí)現(xiàn)如下：
<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 parallax 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 class="container">
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="app card icon logo web">所有分類</span></li>
<li><span class="filter" data-filter="app">手機(jī)應(yīng)用</span></li>
<li><span class="filter" data-filter="card">卡片</span></li>
<li><span class="filter" data-filter="icon">圖標(biāo)</span></li>
<li><span class="filter" data-filter="logo">Logo</span></li>
<li><span class="filter" data-filter="web">網(wǎng)頁</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="~/Content/image/Logo/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<img src="~/Content/image/app/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Visual Infography</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="~/Content/image/web/4.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Sonor's Design</a>
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="~/Content/image/card/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Typography Company</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<img src="~/Content/image/app/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Weatherette</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="~/Content/image/card/4.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">BMF</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="~/Content/image/card/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Techlion</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="~/Content/image/logo/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">KittyPic</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<img src="~/Content/image/app/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Graph Plotting</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="~/Content/image/card/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">QR Quick Response</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="~/Content/image/logo/6.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Mobi Sock</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="~/Content/image/logo/7.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Village Community Church</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="~/Content/image/icon/4.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Domino's Pizza</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="~/Content/image/web/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Backend Admin</a>
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="~/Content/image/icon/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Instagram</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="~/Content/image/web/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Student Guide</a>
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="~/Content/image/icon/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Scoccer</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="~/Content/image/icon/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">3D Map</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="~/Content/image/web/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Note</a>
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="~/Content/image/logo/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Native Designers</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="~/Content/image/logo/4.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bookworm</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="~/Content/image/icon/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Sandwich</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="~/Content/image/card/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Reality</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="~/Content/image/logo/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Speciallisterne</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
</div>
</div><!-- container -->
</body>
</html>
muxitup
以上是博主最近收藏的一些前端組件，在此分享給大家，有實(shí)用型，也有炫酷型，不管如何，希望能幫助需要的朋友節(jié)省尋找組件的時(shí)間。
上面分享了幾個(gè)項(xiàng)目中比較常用的組件，引起了許多朋友的關(guān)注。下面還是繼續(xù)，因?yàn)橛X得還有幾個(gè)非常簡單、實(shí)用的組件，實(shí)在不愿自己一人獨(dú)享，沒辦法，誰讓博主這么愛分享呢~~
七、多值輸入組件manifest
關(guān)于文本框的多值輸入，一直是一個(gè)比較常見的需求，今天博主推薦一款好用的多值輸入組件給大家，不要謝我，請叫我“紅領(lǐng)巾”！
1、效果展示
本地多值輸入框
遠(yuǎn)程多值輸入框
2、源碼說明
感謝開源社區(qū)，感謝那些喜歡分享的可愛的人兒，開源地址。
3、代碼示例
（1）本地多值輸入
首先需要引用如下幾個(gè)文件
<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>
bootstrap的Js和css文件并非必須，本文是為了樣式好看，所以將其引用進(jìn)來。manifest組件不依賴bootstrap，但是依賴jQuery，除此之外還需要引用jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.js三個(gè)文件。
然后就是html和js的初始化
<input type='text' autocomplete="off" id="txt_man" />
<script type="text/javascript">
$(function () {
$('#txt_man').manifest();
});
</script>
通過簡單如上簡單的步驟，上面的效果就可出來，是不是很簡單。簡單來看看它的一些用法
//常用屬性：得到文本框里面所有項(xiàng)的集合
var values = $('#txt_man').manifest('values');
//常用方法1：移除最后一項(xiàng)
$('#txt_man').manifest('remove', ':last');
//常用方法2：項(xiàng)文本框里面新增一項(xiàng)。第二個(gè)參數(shù)的格式由JSON數(shù)據(jù)的格式?jīng)Q定
$('#txt_man').manifest('add', {
id: "1",
name:"ABC"
});
//常用方法3：獲取遠(yuǎn)程搜索到的數(shù)據(jù)的列表
$('#txt_man').manifest('list');
//常用事件1：組件的新增項(xiàng)事件
$('#txt_man').on('manifestadd', function (event, data, $item, initial) {
//alert("新增的項(xiàng)為："+data);
});
//常用事件2：組件的移除項(xiàng)事件
$('#txt_man').on('manifestremove', function (event, data, $item) {
});
//常用事件3：遠(yuǎn)程調(diào)用時(shí)通過鍵盤選擇項(xiàng)變化的事件
$('#txt_man').on('manifestselect', function (event, data, $item) {
});
（2）遠(yuǎn)程多值輸入
遠(yuǎn)程搜索輸入的方式，需要我們提供一個(gè)url地址，獲取數(shù)據(jù)，然后返回到瀏覽器。本文為了簡單，就直接用源碼網(wǎng)站上面的url來展示效果了。
首先需要引用的js文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script> <script src="~/Content/jquery-manifest-master/build/parts/jquery.marcopolo.js"></script> <script src="~/Content/jquery-manifest-master/build/jquery.manifest.js"></script>
和上面的相比，多了一個(gè)文件jquery.marcopolo.js的引用。
然后就是html和js的初始化
<form action="https://api.foursquare.com/v2/venues/search?callback=?" method="get"> <div class="form-group"><div class="col-xs-10"> <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>
至于每一個(gè)參數(shù)的意義，園友們有需要可以研究下，應(yīng)該不難理解。博主簡單監(jiān)視了一下這個(gè)遠(yuǎn)程搜索方法的返回值
如果有打算自己用這個(gè)遠(yuǎn)程的方法，可以參考這個(gè)數(shù)據(jù)格式去實(shí)現(xiàn)。
八、文本框搜索組件bootstrap-typeahead
其實(shí)關(guān)于文本框搜索的功能，很多組件都帶有這個(gè)功能，比如原來博主用過的jQuery UI里面就有一個(gè)autocomplete組件可以實(shí)現(xiàn)自動(dòng)完成。而bootstrap文本框的自動(dòng)搜索組件，網(wǎng)上也是層出不窮，今天之所以選擇這個(gè)組件是因?yàn)橛X得它和bootstrap的風(fēng)格比較類似，而且組件比較小，簡單實(shí)用。
1、效果展示
本地靜態(tài)搜索（數(shù)據(jù)源在本地）
遠(yuǎn)程搜索（數(shù)據(jù)源通過ajax請求遠(yuǎn)程獲取）
2、源碼說明
源碼地址
3、代碼示例
首先需要引用的文件：主要包含一個(gè)css和一個(gè)js文件。需要jQuery和bootstrap的支持。
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/prettify.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"></script>
然后組件的初始化
<input type='text' class="form-control" id="txt_man" />
數(shù)據(jù)源在本地
<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>
數(shù)據(jù)源通過ajax請求獲取
<script type="text/javascript">
$(function () {
$("#txt_man").typeahead({
ajax: {
url: '/Home2/TypeaheadData',
timeout: 300,
method: 'post',
triggerLength: 1,
loadingClass: null,
displayField: null,
preDispatch: null,
preProcess: null
},
display: "value",
val:"key"
});
});
</script>
后臺(tái)對應(yīng)的測試方法
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) ;
}
常用屬性：
•display：顯示的字段名稱
•val：實(shí)際的值
•items：搜索結(jié)果默認(rèn)展示的個(gè)數(shù)。默認(rèn)值為8
•source：本地?cái)?shù)據(jù)源，格式為數(shù)組。
•ajax：ajax請求的對象，可以直接為一個(gè)string的url，也可是object對象。如果是object對象，url這個(gè)就不說了，triggerLength的屬性表示輸入幾個(gè)字符觸發(fā)搜索。
常用事件：
•itemSelected：選中搜索值的時(shí)候觸發(fā)。
<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>
參數(shù)item表示選中的對象，參數(shù)val表示選中項(xiàng)的實(shí)際值，text表示選中項(xiàng)的顯示值。
九、bootstrap步驟組件
關(guān)于bootstrap步驟組件，上篇介紹過一個(gè)ystep這個(gè)小組件，它在查看任務(wù)的進(jìn)度方面能起到一定的作用，但是對于一些復(fù)雜的業(yè)務(wù)，需要按照當(dāng)前的步驟處理相應(yīng)的業(yè)務(wù)這個(gè)方面它就有點(diǎn)無能為力了。今天博主就介紹一款效果相當(dāng)不錯(cuò)的步驟組件，有了這個(gè)組件，程序員再也不用擔(dān)心復(fù)雜的步驟設(shè)計(jì)了。
1、效果展示
一睹風(fēng)采
按照步驟進(jìn)行“上一步”、“下一步”
更多步驟
2、源碼說明
這個(gè)組件是博主在網(wǎng)上找到的，看了下很多的樣式和用法都是bootstrap里面的，唯一需要引用一個(gè)js和一個(gè)css文件。暫時(shí)未找到源碼出處，如果有知道源碼出處的可以告訴博主，博主再加上，為了尊重作者的勞動(dòng)成果博主一定尊重原創(chuàng)！
3、代碼示例
需要引用的文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-step/css/bs-is-fun.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-step/js/brush.js"></script>
bs-is-fun.css和brush.js這兩個(gè)文件需要引用，組件需要jQuery和bootstrap的支持。
然后就是組件的初始化。
（1）箭頭
<ul class="nav nav-pills nav-justified step step-arrow"> <li class="active"> <a>step1</a> </li> <li class="active"> <a>step2</a> </li> <li> <a>step3</a> </li> </ul>
如果是靜態(tài)的步驟，只需要以上一段html代碼即可看到上圖中的箭頭步驟效果。這里的active樣式表示步驟已經(jīng)經(jīng)過的樣式。
（2）正方形
<ul class="nav nav-pills nav-justified step step-square"> <li class="active"> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li> </ul>
（3）圓形
<ul class="nav nav-pills nav-justified step step-round"> <li class="active"> <a>step1</a> </li> <li class="active"> <a>step2</a> </li> <li class="active"> <a>step3</a> </li> </ul>
（4）進(jìn)度條
<ul class="nav nav-pills nav-justified step step-progress"> <li class="active"> <a>step1<span class="caret"></span></a> </li> <li class="active"> <a>step2<span class="caret"></span></a> </li> <li> <a>step3<span class="caret"></span></a> </li> <li> <a>step4<span class="caret"></span></a> </li> <li> <a>step5<span class="caret"></span></a> </li> <li> <a>step6<span class="caret"></span></a> </li> </ul>
（5）上一步、下一步
上圖中的“上一步”、“下一步”是在bootstrap的modal組件里面自己定義的，還是把代碼貼出來，供大家參考。
<div class="modal fade" id="myModalNext"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title">選項(xiàng)配置</h4><ul class="nav nav-pills nav-justified step step-progress"> <li class="active"> <a>步驟一<span class="caret"></span></a> </li> <li> <a>步驟二<span class="caret"></span></a> </li> <li> <a>步驟三<span class="caret"></span></a> </li> <li> <a>步驟四<span class="caret"></span></a> </li> <li> <a>步驟五<span class="caret"></span></a> </li> <li> <a>步驟六<span class="caret"></span></a> </li> </ul> </div> <div class="modal-body"> <div class="container-fluid"> <div class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false"> <div class="carousel-inner" role="listbox"> <div class="item active"> <p>步驟一</p> <div class="col-xs-2"> 配置角色 </div> <div class="col-xs-4"> <input type="text" class="form-control" /> </div> <div class=" col-xs-4"> <button type="button" class=" btn btn-primary">保存</button> </div> </div> <div class="item"> <p>步驟二</p> <div class="col-xs-2"> 配置用戶 </div> <div class="col-xs-4"> <input type="text" class="form-control" /> </div> <div class=" col-xs-4"> <button type="button" class=" btn btn-primary">保存</button> </div> </div> <div class="item"> <p>步驟三</p> </div> <div class="item"> <p>步驟四</p> </div> <div class="item"> <p>步驟五</p> </div> <div class="item"> <p>步驟六</p> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default MN-pre">上一步</button> <button type="button" class="btn btn-primary MN-next">下一步</button> </div> </div> </div> </div>
當(dāng)然，還需要注冊兩個(gè)按鈕的點(diǎn)擊事件
$("#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")
}
}
})
})
邏輯可能并不完善，如果正式使用需要測試。
十、按鈕加載組件ladda-bootstrap
關(guān)于按鈕加載，博主早就想找一個(gè)合適的組件去優(yōu)化，如果不處理，肯定存在重復(fù)操作的可能。今天來看下這么一個(gè)小東西吧。
1、效果展示
初見
自定義顏色、大小、進(jìn)度條
2、源碼說明
源碼地址
3、代碼示例
需要引用的文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js"></script> <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"></script>
組件初始化：初始化4個(gè)按鈕
<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
<button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button><button class="btn btn-primary ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>
<button class="btn btn-primary ladda-button" data-style="zoom-out"><span class="ladda-label">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;
});
});
代碼釋疑：應(yīng)該不難理解，初始化組件主要涉及的代碼 var l = Ladda.create(this); l.start(); ，這里的this表示當(dāng)前點(diǎn)擊的按鈕的對象（注意這里是dom對象而不是jQuery對象），然后請求結(jié)束后調(diào)用 l.stop(); 關(guān)閉加載。
（1）data-style所有選項(xiàng)如下，有興趣可以去試試，看看都是些什么效果：
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）如果需要調(diào)整按鈕的大小，組件內(nèi)置了data-size屬性，data-size所有選項(xiàng)如下：
data-size="xs"
data-size="s"
data-size="l"
（3）如果需要設(shè)置按鈕的顏色，通過data-spinner-color
data-spinner-color="#FF0000"
（4）按鈕的進(jìn)度條的設(shè)置
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);
}
});
});
主要通過instance.setProgress(progress);這一句來設(shè)置當(dāng)前執(zhí)行的進(jìn)度，progress的取值在0到1之間。當(dāng)然，以上只是測試進(jìn)度效果的代碼，在正式項(xiàng)目中這里需要計(jì)算當(dāng)前請求執(zhí)行的情況來動(dòng)態(tài)返回進(jìn)度。
十一、開關(guān)組件bootstrap-switch
在bootstrap中文網(wǎng)的首頁上面，你就能找到這么一個(gè)組件
1、效果展示
初始效果
五花八門的屬性以及事件
2、源碼說明
Bootstrap-Switch源碼地址：https://github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switch文檔以及Demo：http://www.bootstrap-switch.org/examples.html
3、代碼示例
需要引用的文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/js/bootstrap-switch.js"></script>
組件依賴于JQuery和bootstrap
然后就是和html和js的初始化
<input type="checkbox" checked />
$(function () {
$('input[type=checkbox]').bootstrapSwitch({ size: "large" });
})
size屬性并非必須，如果你使用默認(rèn)的樣式，參數(shù)可以不傳。
常用的屬性
•size：開關(guān)大小?？蛇x值有'mini', 'small', 'normal', 'large'
•onColor：開關(guān)中開按鈕的顏色?？蛇x值有'primary', 'info', 'success', 'warning', 'danger', 'default'
•offColor：開關(guān)中關(guān)按鈕的顏色?？蛇x值'primary', 'info', 'success', 'warning', 'danger', 'default'
•onText：開關(guān)中開按鈕的文本，默認(rèn)是“ON”。
•offText：開關(guān)中關(guān)按鈕的文本，默認(rèn)是“OFF”。
•onInit：初始化組件的事件。
•onSwitchChange：開關(guān)變化時(shí)的事件。
常用的事件和方法可以直接查看文檔，官方提供了很詳細(xì)的說明。
十二、評分組件bootstrap-star-rating
某東、某寶上面的評分大家應(yīng)該都有了解，無意中發(fā)現(xiàn)了一塊bootstrap風(fēng)格的評分組件，覺得有點(diǎn)意思，以后做電商、社區(qū)、論壇系統(tǒng)或許用得著，就來分享分享。
1、效果展示
2、源碼說明
源碼下載
3、代碼示例
此組件需要jQuery和bootstrap樣式的支持
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/css/star-rating.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/star-rating.js"></script> <script src="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/locales/zh.js"></script>
直接通過html初始組件
<input id="input-2b" type="number" class="rating" 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" class="rating" min=0 max=5 step=0.5 data-size="xl">
<input id="input-21b" value="4" type="number" class="rating" min=0 max=5 step=0.2 data-size="lg">
<input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
<input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
<input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs">
<input id="input-21f" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="md">
<input id="input-2ba" type="number" class="rating" 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" class="rating" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>
組件通過class="rating"這一個(gè)來進(jìn)行初始化。這里幾個(gè)參數(shù)應(yīng)該很好理解：
•value：表示組件初始化的時(shí)候默認(rèn)的分?jǐn)?shù)
•min：最小分?jǐn)?shù)
•max：最大分?jǐn)?shù)
•step：每次增加的最小刻度
•data-size：星星的大小
•data-stars：星星的個(gè)數(shù)
通過 $("#input-21a").val() 即可得到當(dāng)前的評分?jǐn)?shù)。
十三、總結(jié)
通過這篇文章給大家分享了下bootstrap的十二款組件，博主相信這些里面肯定有些你能夠用上，可能有些并不常用，但留著以后或許能用上呢！至此，bootstrap組件的總結(jié)暫時(shí)告一段落，后面將會(huì)分享下ko的一些封裝。如果你覺得本文能夠幫到你，可以推薦下，博主一定繼續(xù)努力！
您可能感興趣的文章:
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- JS組件Bootstrap Table使用方法詳解
- JS組件Bootstrap Select2使用方法詳解
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- JS組件中bootstrap multiselect兩大組件較量
- JS組件系列之Bootstrap Icon圖標(biāo)選擇組件
- 功能強(qiáng)大的Bootstrap組件（結(jié)合js）
相關(guān)文章
javascript具有自動(dòng)垃圾收集機(jī)制，執(zhí)行環(huán)境會(huì)負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存。在編寫javascript程序時(shí)，開發(fā)人員不用再關(guān)心內(nèi)存使用問題，所需內(nèi)存的分配以及無用內(nèi)存的回收完全實(shí)現(xiàn)了自動(dòng)管理。本文將詳細(xì)介紹javascript的垃圾收集機(jī)制2016-12-12
這篇文章主要介紹了JS常用跨域方法實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
在 UniApp中,自定義TabBar是指替換默認(rèn)的Tab欄以實(shí)現(xiàn)更多個(gè)性化的設(shè)計(jì),自定義 TabBar 可以通過創(chuàng)建一個(gè)新的組件來實(shí)現(xiàn),并在頁面中引用該組件,下面給大家介紹在uniapp中custombar的使用步驟,感興趣的朋友一起看看吧2024-05-05
微信小程序?qū)崿F(xiàn)自動(dòng)播放視頻模仿gif動(dòng)圖效果實(shí)例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動(dòng)播放視頻模仿gif動(dòng)圖效果的相關(guān)資料,通過本文介紹的方法可以實(shí)現(xiàn)自動(dòng)播放視頻，視頻無控制條無聲音且自動(dòng)循環(huán)播放,需要的朋友可以參考下2021-07-07
npm install 、npm install --save 和&n
這篇文章主要介紹了npm install 、npm install --save 和 npm install --save-dev的區(qū)別介紹,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
JavaScript css3實(shí)現(xiàn)簡單視頻彈幕功能
這篇文章主要為大家詳細(xì)介紹了JavaScript css3實(shí)現(xiàn)簡單視頻彈幕功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了JS動(dòng)態(tài)顯示表格上下frame的方法,涉及javascript中顯示表格frame的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
常常會(huì)用到的截取字符串substr()、substring()、slice()方法詳解
javascript中給我們提供三個(gè)截取字符串的方法,分別是:slice(),substring()和substr()。下面我們對這三個(gè)函數(shù)進(jìn)行詳細(xì)說明和比較,需要的朋友可以參考下2015-12-12
本文主要介紹了canvas的相關(guān)知識(shí)。canvas本身很簡單，就是去學(xué)習(xí)它的API，多看實(shí)例，多自己動(dòng)手練習(xí)，多總結(jié)。本文介紹了很多小例，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12
setattribute批量設(shè)置css樣式的實(shí)現(xiàn)代碼。2009-11-11