Bootstrap元件福利篇：十二款好用的元件推薦
閱讀目錄
- 一、時間元件
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 二、自增器元件
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 三、加載效果
- 一、實用型
- 二、炫酷型
- 四、流程圖小插件
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 五、按鈕提示元件bootstrap-confirmation
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 六、圖檔分類、過濾元件MuxitUp
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 七、多值輸入元件manifest
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 八、文本框搜尋元件bootstrap-typeahead
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 九、bootstrap步驟元件
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 十、按鈕加載元件ladda-bootstrap
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 十一、開關元件bootstrap-switch
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 十二、評分元件bootstrap-star-rating
- 1、效果展示
- 2、源碼說明
- 3、代碼示例
- 十三、總結
正文
前言：之前分享過很多bootstrap常用元件，包括表格、表單驗證、檔案上傳、複選下拉框、彈出框等。這段時間，部落客又收藏了一些好用的元件（有些在項目中已經用起來了），經過兩天的時間，已經整理出了一部分，本着“好東西要與人分享”的原則，今天還是來點福利，将部落客收藏的東西分享出來，供需要的園友參考。元件大部分都是些開源元件，也有部分是部落客自己在網上找到然後改寫出來的效果，可能不盡如人意，有興趣的且看看吧。
回到頂部
一、時間元件
bootstrap風格的時間元件非常多，你可以在github上面随便搜尋“datepicker”關鍵字，可以找到很多的時間元件。部落客原來也用過其中的兩個，發現都會有一些大大小小的問題。經過一番篩選，找到一個效果不錯、能适用各種場景的時間元件，下面就來一睹它的風采吧。
回到頂部
1、效果展示
初始效果
元件中文化和日期格式自定義：隻顯示日期
顯示日期和時間（手機、平闆類裝置可能體驗會更好）
回到頂部
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="//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 這個檔案，當然，你也可以不用這種cdn的方式，完全可以下載下傳這個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> 這樣就能出現如上圖一效果。
（2）中文化和日期格式化
html部分不變。js初始化的時候增加參數即可。
<script type="text/javascript">
$(function () {
$(\'#datetimepicker1\').datetimepicker({
format: \'YYYY-MM-DD\',//日期格式化，隻顯示日期
locale: \'zh-CN\' //中文化
});
});
</script> （3）顯示時間
<label class="control-label col-xs-3">時間：</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屬性。設定浏覽器選中模式
viewMode: \'years\' （7）其他
更多強大的功能可以參看API，這裡就不一一列舉。裡面有大量的屬性、事件、方法來滿足你各種特殊的需求。
回到頂部
二、自增器元件
關于bootstrap自增器，可能并非每一個項目裡面都需要用到。有一些特殊場景，比如：某一個文本框需要資料數字、數組的大小需要微調等一些情況。說了半天，可能有園友都不知道它長啥樣，上點圖吧。
回到頂部
1、效果展示
其實效果很簡單，但它可以自動設定最大值、最小值、自增值還是挺友善的，并且可以自動做數字校驗。最最友善的是它不需要使用JavaScript去做初始化，隻需要在html裡面初始化即可。
回到頂部
2、源碼說明
源碼以及文檔位址
回到頂部
3、代碼示例
首先需要引用的檔案如下：
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-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> font-aweaome.min.css檔案是一個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" 可以控制自增元件的規則是按照月的規則來進行。
（3）設定最大值、最小值、自增值
除了上面的幾種特定類型，元件還支援自定義最大值、最小值、自增值
<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"：自增值
這個很好了解，不做過多說明。效果：
（4）事件捕捉
元件提供了兩個事件changed、changing，分别對應數值變化中和變化後的事件回調。
$(\'#id\').spinner(\'changed\', function(e, newVal, oldVal) {
});
$(\'[data-trigger="spinner"]\').spinner(\'changing\', function(e, newVal, oldVal) {
}); 回到頂部
三、加載效果
前幾天，有群友在問bootstrap的加載效果用什麼元件。其實百度搜尋一下，也能找到很多的結果。在此，部落客根據自己的使用經曆分享下幾個加載的小元件，希望大家用得着。主要分為實用型和炫酷型兩種。實用型效果一般，但能适用各種浏覽器；炫酷型使用最新的css3和html5寫出來的，效果很炫，但基本上低版本的IE（10以下）都不能相容。
回到頂部
一、實用型
1、PerfectLoading元件
這個元件是部落客在網上找到的一個js，但下載下傳下來之後發現一些大大小小的問題，于是，部落客改寫了下，命名為bootstrap-loading元件。它的原理就是在元件啟動的時候彈出一個覆寫層，然後元件關閉時，将覆寫層的dom移除，加載效果使用了一張gif的圖檔。
PerfectLoad.js檔案内容：
/*******************************************
*
* Plug-in:友好的頁面加載效果
* Author:sqinyang ([email protected])
* Time:2015/04/20
* Explanation:随着HTML5的流行，頁面效果越來越炫，同時也需要加載大量的插件及素材，萬惡的網速，特别對于挂在國外伺服器的網站，一打開一堆素材緩緩加載，位置錯亂不齊，故編寫此方法，友善大家使用
*
*********************************************/
jQuery.bootstrapLoading = {
start: function (options) {
var defaults = {
opacity: 1,
//loading頁面透明度
backgroundColor: "#fff",
//loading頁面背景色
borderColor: "#bbb",
//提示邊框顔色
borderWidth: 1,
//提示邊框寬度
borderStyle: "solid",
//提示邊框樣式
loadingTips: "Loading, please wait...",
//提示文本
TipsColor: "#666",
//提示顔色
delayTime: 1000,
//頁面加載完成後，加載頁面漸出速度
zindex: 999,
//loading頁面層次
sleep: 0
//設定挂起,等于0時則無需挂起
}
var options = $.extend(defaults, options);
//擷取頁面寬高
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//在頁面未加載完畢之前顯示的loading Html自定義内容
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>\';
//呈現loading效果
$("body").append(_LoadingHtml);
//擷取loading提示框寬高
var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
_LoadingTipsW = document.getElementById("loadingTips").clientWidth;
//計算距離，讓loading提示框保持在螢幕上下左右居中
var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
_LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;
$("#loadingTips").css({
"left": _LoadingLeft + "px",
"top": _LoadingTop + "px"
});
//監聽頁面加載狀态
document.onreadystatechange = PageLoaded;
//當頁面加載完成後執行
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();
}
} 這個js基本上是網上down下來的，隻是在此基礎上部落客加了一個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: "正在處理資料，請稍候..." });
$.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代碼，隻需要在執行loading的時候調用元件的start方法即可。 start()方法啟動彈出層，并可設定defaults 變量裡面的所有參數。當loading結束後再調用元件的end方法，自動将彈出層移除。來看看效果：
如果對效果不滿意，可自己設定defaults裡面的參數，注釋寫得很詳細，在此就不一一列舉了。
2、菊花加載元件spin.js
使用圖檔顯示加載效果有它天生的弊端，是以現在很多的加載元件都使用css+js去實作動畫效果。spin.js就是其中一個例子，spin.js是一個開源元件，開源位址。
下載下傳源碼後，初始化發現元件不帶遮罩的效果，隻能這樣：
找了半天它的參數，硬是沒找到，亦或是哪裡有“機關”沒發現。沒辦法，部落客隻能自己加上遮罩的效果了。于是建立了一個css樣式檔案暫且命名為spin.css，裡面隻有一個樣式：
.fade {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
opacity: 1;
background-color: grey;
} 然後将spin.js改寫了兩個地方，改寫後的内容如下：
/**
* 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
改動的兩個地方：
（1）初始化的時候，如果是顯示，則給對應的标簽加上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, // 花瓣數目
// length: 1, // 花瓣長度
// width: 10, // 花瓣寬度
// radius: 15, // 花瓣距中心半徑
// corners: 1, // 花瓣圓滑度 (0-1)
// rotate: 0, // 花瓣旋轉角度
// direction: 1, // 花瓣旋轉方向 1: 順時針, -1: 逆時針
// color: \'#000\', // 花瓣顔色
// speed: 1, // 花瓣旋轉速度
// trail: 60, // 花瓣旋轉時的拖影(百分比)
// shadow: false, // 花瓣是否顯示陰影
// hwaccel: false, //spinner 是否啟用硬體加速及高速旋轉
// className: \'spinner\', // spinner css 樣式名稱
// zIndex: 2e9, // spinner的z軸 (預設是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, // 花瓣數目
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這個檔案，這個檔案不需要jquery的支援；如果想要使用jQuery，則引用jquery.spin.js檔案。上面的代碼是不使用jQuery的情況。元件需要定義一個空的div，然後在此div上面做初始化。得到的效果如下：
當然，如果你對此效果不滿意，你還可以設定遮罩層的透明度，以及整個遮罩的樣式。還有旋轉的各個參數，都可以通過初始化的時候自定義，上述代碼裡面有詳細注釋。
回到頂部
二、炫酷型
1、jquery.shCircleLoader.js元件
此元件效果不用說，使用也比較簡單，但是對IE10以下版本不支援。看看效果先：
至于具體的代碼使用，部落客不打算深究，可以去百度或者github上面找找。
2、fakeLoader.js元件
更多的選擇，更好的扁平化效果，更好的手機、平闆裝置體驗。隻需要看看圖檔感受下就知道了。開源位址。
回到頂部
四、流程圖小插件
前段時間做一個工作流的需求，需要顯示目前流程進行到哪一步，找到了一個流程小插件ystep。此元件優點在于使用簡單、夠輕量級。
回到頂部
1、效果展示
先來看看效果
藍色縮小版
回到頂部
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> 這個元件需要jQuery和bootstrap兩個元件的支援。
然後定義一個空的div
<div id="div_ystep1"></div> 最後在點選按鈕的時候初始化元件
<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: "開始",
//步驟内容(滑鼠移動到本步驟節點時，會提示該内容)
content: "流程開始"
}, {
title: "審批",
content: "各個角色開始審批"
}, {
title: "實施",
content: "需求開始實施"
}, {
title: "結束",
content: "流程結束"
}]
});
$("#div_ystep1").setStep(3);
});
});
</script> 如果是動态步驟，可能需要動态去構造steps屬性。然後通過setStep()設定目前到了哪一步。
常用方法：
//跳轉到下一個步驟
$(".ystep1").nextStep();
//跳轉到上一個步驟
$(".ystep1").prevStep();
//跳轉到指定步驟
$(".ystep1").setStep(2);
//擷取目前在第幾步
$(".ystep1").getStep(); 回到頂部
五、按鈕提示元件bootstrap-confirmation
按鈕提示元件有點類似js裡面confirm的功能，不過這個confirm是以一種tooltip的方式彈出來的效果，給使用者一個确定、取消的判斷，界面更加友好。介紹這個元件之前，可以先來看看bootstrap裡面提示框的效果：
bootstrap-confirmation元件就是基于這個提示框的效果來實作的。github上面有好多個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）對應的點選标簽（可以是任意标簽）
<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: "确定要删除嗎？",
btnOkLabel: \'确定\',
btnCancelLabel: \'取消\',
onConfirm: function () {
//alert("點選了确定");
},
onCancel: function () { //alert("點選了取消");
}
})
});
</script> （4）更多屬性、事件、方法
除了上述初始化的屬性，還有一些常用的屬性。比如：
- btnOkClass：确定按鈕的樣式；
- btnCancelClass：取消按鈕的樣式；
- singleton：是否隻允許出現一個确定框；
- popout：當使用者點選其他地方的時候是否隐藏确定框；
比如你可以将btnOkClass設定成 btnOkClass : \'btn btn-sm btn-primary\',
回到頂部
六、圖檔分類、過濾元件MuxitUp
這是一個效果非常炫酷的分組、過濾元件。
回到頂部
1、效果展示
部落客在網上看到一個它的demo，覺得效果确實很好，廢話不多說，上圖。
怎麼樣，效果還行吧。這個元件在項目裡面暫時沒用上，但覺得以後有需要的可能，就将此收藏了一把。
回到頂部
2、源碼說明
開源位址。
回到頂部
3、代碼示例
實作代碼是網上copy過來的，沒有深究，有興趣可以看看。html+js代碼實作如下：
<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">手機應用</span></li>
<li><span class="filter" data-filter="card">卡片</span></li>
<li><span class="filter" data-filter="icon">圖示</span></li>
<li><span class="filter" data-filter="logo">Logo</span></li>
<li><span class="filter" data-filter="web">網頁</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
回到頂部
七、多值輸入元件manifest
關于文本框的多值輸入，一直是一個比較常見的需求，今天部落客推薦一款好用的多值輸入元件給大家，不要謝我，請叫我“紅領巾”！
回到頂部
1、效果展示
本地多值輸入框
遠端多值輸入框
回到頂部
2、源碼說明
感謝開源社群，感謝那些喜歡分享的可愛的人兒。開源位址。
回到頂部
3、代碼示例
（1）本地多值輸入
首先需要引用如下幾個檔案
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" />
<script src="~/Content/jquery-1.9.1.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
<script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script>
<script src="~/Content/jquery-manifest-master/build/jquery.manifest.js"></script> bootstrap的Js和css檔案并非必須，本文是為了樣式好看，是以将其引用進來。manifest元件不依賴bootstrap，但是依賴jQuery，除此之外還需要引用jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.js三個檔案。
然後就是html和js的初始化
<input type=\'text\' autocomplete="off" id="txt_man" /> <script type="text/javascript">
$(function () {
$(\'#txt_man\').manifest();
});
</script> 通過簡單如上簡單的步驟，上面的效果就可出來，是不是很簡單。簡單來看看它的一些用法
//常用屬性：得到文本框裡面所有項的集合
var values = $(\'#txt_man\').manifest(\'values\');
//常用方法1：移除最後一項
$(\'#txt_man\').manifest(\'remove\', \':last\');
//常用方法2：項文本框裡面新增一項。第二個參數的格式由JSON資料的格式決定
$(\'#txt_man\').manifest(\'add\', {
id: "1",
name:"ABC"
});
//常用方法3：擷取遠端搜尋到的資料的清單
$(\'#txt_man\').manifest(\'list\');
//常用事件1：元件的新增項事件
$(\'#txt_man\').on(\'manifestadd\', function (event, data, $item, initial) {
//alert("新增的項為："+data);
});
//常用事件2：元件的移除項事件
$(\'#txt_man\').on(\'manifestremove\', function (event, data, $item) {
});
//常用事件3：遠端調用時通過鍵盤選擇項變化的事件
$(\'#txt_man\').on(\'manifestselect\', function (event, data, $item) {
}); （2）遠端多值輸入
遠端搜尋輸入的方式，需要我們提供一個url位址，擷取資料，然後傳回到浏覽器。本文為了簡單，就直接用源碼網站上面的url來展示效果了。
首先需要引用的js檔案
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" />
<script src="~/Content/jquery-1.9.1.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
<script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script>
<script src="~/Content/jquery-manifest-master/build/parts/jquery.marcopolo.js"></script>
<script src="~/Content/jquery-manifest-master/build/jquery.manifest.js"></script> 和上面的相比，多了一個檔案jquery.marcopolo.js的引用。
然後就是html和js的初始化
<form action="https://api.foursquare.com/v2/venues/search?callback=?" method="get">
<div 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> 至于每一個參數的意義，園友們有需要可以研究下，應該不難了解。部落客簡單監視了一下這個遠端搜尋方法的傳回值
如果有園友打算自己用這個遠端的方法，可以參考這個資料格式去實作。
回到頂部
八、文本框搜尋元件bootstrap-typeahead
其實關于文本框搜尋的功能，很多元件都帶有這個功能，比如原來部落客用過的jQuery UI裡面就有一個autocomplete元件可以實作自動完成。而bootstrap文本框的自動搜尋元件，網上也是層出不窮，今天之是以選擇這個元件是因為覺得它和bootstrap的風格比較類似，而且元件比較小，簡單實用。
回到頂部
1、效果展示
本地靜态搜尋（資料源在本地）
遠端搜尋（資料源通過ajax請求遠端擷取）
回到頂部
2、源碼說明
源碼位址
回到頂部
3、代碼示例
首先需要引用的檔案：主要包含一個css和一個js檔案。需要jQuery和bootstrap的支援。
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/prettify.css" rel="stylesheet" />
<script src="~/Content/jquery-1.9.1.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
<script src="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"></script> 然後元件的初始化
<input type=\'text\' class="form-control" id="txt_man" /> 資料源在本地
<script type="text/javascript">
$(function () {
$("#txt_man").typeahead({
source: [
{ key: 1, value: \'Toronto\' },
{ key: 2, value: \'Montreal\' },
{ key: 3, value: \'New York\' },
{ key: 4, value: \'Buffalo\' },
{ key: 5, value: \'Boston\' },
{ key: 6, value: \'Columbus\' },
{ key: 7, value: \'Dallas\' },
{ key: 8, value: \'Vancouver\' },
{ key: 9, value: \'Seattle\' },
{ key: 10, value: \'Los Angeles\' }
],
display: "value",
val:"key"
});
});
</script> 資料源通過ajax請求擷取
<script type="text/javascript">
$(function () {
$("#txt_man").typeahead({
ajax: {
url: \'/Home2/TypeaheadData\',
timeout: 300,
method: \'post\',
triggerLength: 1,
loadingClass: null,
displayField: null,
preDispatch: null,
preProcess: null
},
display: "value",
val:"key"
});
});
</script> 背景對應的測試方法
public JsonResult TypeaheadData()
{
var lstRes = new List<object>();
for (var i = 0; i < 20; i++)
lstRes.Add(new { key = i, value = Guid.NewGuid().ToString().Substring(0, 4) });
return Json(lstRes, JsonRequestBehavior.AllowGet) ;
} 常用屬性：
- display：顯示的字段名稱
- val：實際的值
- items：搜尋結果預設展示的個數。預設值為8
- source：本地資料源，格式為數組。
- ajax：ajax請求的對象，可以直接為一個string的url，也可是object對象。如果是object對象，url這個就不說了，triggerLength的屬性表示輸入幾個字元觸發搜尋。
常用事件：
- itemSelected：選中搜尋值的時候觸發。
<script type="text/javascript">
$(function () {
$("#txt_man").typeahead({
ajax: {
url: \'/Home2/TypeaheadData\',
timeout: 300,
method: \'post\',
triggerLength: 1,
loadingClass: null,
displayField: null,
preDispatch: null,
preProcess: null
},
display: "value",
val: "key",
itemSelected: function (item, val, text) {
}
});
});
</script> 參數item表示選中的對象，參數val表示選中項的實際值，text表示選中項的顯示值。
回到頂部
九、bootstrap步驟元件
關于bootstrap步驟元件，上篇介紹過一個ystep這個小元件，它在檢視任務的進度方面能起到一定的作用，但是對于一些複雜的業務，需要按照目前的步驟處理相應的業務這個方面它就有點無能為力了。今天部落客就介紹一款效果相當不錯的步驟元件，有了這個元件，程式員再也不用擔心複雜的步驟設計了。
回到頂部
1、效果展示
一睹風采
按照步驟進行“上一步”、“下一步”
更多步驟
回到頂部
2、源碼說明
這個元件是部落客在網上找到的，看了下很多的樣式和用法都是bootstrap裡面的，唯一需要引用一個js和一個css檔案。暫時未找到源碼出處，如果有知道源碼出處的可以告訴部落客，部落客再加上，為了尊重作者的勞動成果部落客一定尊重原創！
回到頂部
3、代碼示例
需要引用的檔案
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-step/css/bs-is-fun.css" rel="stylesheet" />
<script src="~/Content/jquery-1.9.1.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
<script src="~/Content/bootstrap-step/js/brush.js"></script> bs-is-fun.css和brush.js這兩個檔案需要引用，元件需要jQuery和bootstrap的支援。
然後就是元件的初始化。
（1）箭頭
<ul 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> 如果是靜态的步驟，隻需要以上一段html代碼即可看到上圖中的箭頭步驟效果。這裡的active樣式表示步驟已經經過的樣式。
（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）進度條
<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">選項配置</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> 當然，還需要注冊兩個按鈕的點選事件
$("#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
關于按鈕加載，部落客早就想找一個合适的元件去優化，如果不處理，肯定存在重複操作的可能。今天來看下這麼一個小東西吧。
回到頂部
1、效果展示
初見
自定義顔色、大小、進度條
回到頂部
2、源碼說明
源碼位址
回到頂部
3、代碼示例
需要引用的檔案
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.css" rel="stylesheet" />
<script src="~/Content/jquery-1.9.1.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
<script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js"></script>
<script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"></script> 元件初始化：初始化4個按鈕
<button 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;
});
}); 代碼釋疑：應該不難了解，初始化元件主要涉及的代碼 var l = Ladda.create(this); l.start(); ，這裡的this表示目前點選的按鈕的對象（注意這裡是dom對象而不是jQuery對象），然後請求結束後調用 l.stop(); 關閉加載。
（1）data-style所有選項如下，有興趣可以去試試，看看都是些什麼效果：
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）如果需要調整按鈕的大小，元件内置了data-size屬性，data-size所有選項如下：
data-size="xs"
data-size="s"
data-size="l" （3）如果需要設定按鈕的顔色，通過
data-spinner-color
data-spinner-color="#FF0000" （4）按鈕的進度條的設定
Ladda.bind(\'button\', {
callback: function (instance) {
var progress = 0;
var interval = setInterval(function () {
progress = Math.min(progress + Math.random() * 0.1, 1);
instance.setProgress(progress);
if (progress === 1) {
instance.stop();
clearInterval(interval);
}
}, 200);
}
});
}); 主要通過instance.setProgress(progress);這一句來設定目前執行的進度，progress的取值在0到1之間。當然，以上隻是測試進度效果的代碼，在正式項目中這裡需要計算目前請求執行的情況來動态傳回進度。
回到頂部
十一、開關元件bootstrap-switch
在bootstrap中文網的首頁上面，你就能找到這麼一個元件
回到頂部
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屬性并非必須，如果你使用預設的樣式，參數可以不傳。
常用的屬性
- size：開關大小。可選值有\'mini\', \'small\', \'normal\', \'large\'
- onColor：開關中開按鈕的顔色。可選值有\'primary\', \'info\', \'success\', \'warning\', \'danger\', \'default\'
- offColor：開關中關按鈕的顔色。可選值\'primary\', \'info\', \'success\', \'warning\', \'danger\', \'default\'
- onText：開關中開按鈕的文本，預設是“ON”。
- offText：開關中關按鈕的文本，預設是“OFF”。
- onInit：初始化元件的事件。
- onSwitchChange：開關變化時的事件。
常用的事件和方法可以直接檢視文檔，官方提供了很詳細的說明。
回到頂部
十二、評分元件bootstrap-star-rating
某東、某寶上面的評分大家應該都有了解，無意中發現了一塊bootstrap風格的評分元件，覺得有點意思，以後做電商、社群、論壇系統或許用得着，就來分享分享。
回到頂部
1、效果展示
回到頂部
2、源碼說明
源碼下載下傳
回到頂部
3、代碼示例
此元件需要jQuery和bootstrap樣式的支援
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/css/star-rating.css" rel="stylesheet" />
<script src="~/Content/jquery-1.9.1.js"></script>
<script src="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/star-rating.js"></script>
<script src="~/Content/bootstrap-star-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"這一個來進行初始化。這裡幾個參數應該很好了解：
- value：表示元件初始化的時候預設的分數
- min：最小分數
- max：最大分數
- step：每次增加的最小刻度
- data-size：星星的大小
- data-stars：星星的個數
通過 $("#input-21a").val() 即可得到目前的評分數。
回到頂部
十三、總結
通過這兩篇給大家分享了下bootstrap的十二款元件，部落客相信這些裡面肯定有些你能夠用上，可能有些并不常用，但留着以後或許能用上呢！或許有園友會覺得天天去扒别人的元件沒啥意思，也沒啥技術含量，或許是的，但部落客覺得如果将這些東西整理成一套完善的bootstrap元件庫，對于以後是非常有用的，這十二款元件隻是部落客元件庫的一部分，還有很多沒有抽離出來，有需要的園友可以聯系部落客。至此，bootstrap元件的總結暫時告一段落，後面将會分享下ko的一些封裝。如果你覺得本文能夠幫到你，可以推薦下，部落客一定繼續努力！
歡迎各位轉載，但是未經作者本人同意，轉載文章之後必須在文章頁面明顯位置給出作者和原文連接配接，否則保留追究法律責任的權利
出處：http://www.cnblogs.com/landeanfen/p/5461849.html http://www.cnblogs.com/landeanfen/p/5603790.html