閱讀目錄
正文
前言：之前分享過(guò)很多bootstrap常用組件，包括表格、表單驗(yàn)證、文件上傳、復(fù)選下拉框、彈出框等。這段時(shí)間，博主又收藏了一些好用的組件（有些在項(xiàng)目中已經(jīng)用起來(lái)了），經(jīng)過(guò)兩天的時(shí)間，已經(jīng)整理出了一部分，本著“好東西要與人分享”的原則，今天還是來(lái)點(diǎn)福利，將博主收藏的東西分享出來(lái)，供需要的園友參考。組件大部分都是些開(kāi)源組件，也有部分是博主自己在網(wǎng)上找到然后改寫(xiě)出來(lái)的效果，可能不盡如人意，有興趣的且看看吧。
bootstrap風(fēng)格的時(shí)間組件非常多，你可以在github上面隨便搜索“datepicker”關(guān)鍵字，可以找到很多的時(shí)間組件。博主原來(lái)也用過(guò)其中的兩個(gè)，發(fā)現(xiàn)都會(huì)有一些大大小小的問(wèn)題。經(jīng)過(guò)一番篩選，找到一個(gè)效果不錯(cuò)、能適用各種場(chǎng)景的時(shí)間組件，下面就來(lái)一睹它的風(fēng)采吧。
初始效果
組件中文化和日期格式自定義：只顯示日期
顯示日期和時(shí)間（手機(jī)、平板類(lèi)設(shè)備可能體驗(yàn)會(huì)更好）
初初看了下組件效果，還是給出 源碼地址
首先引用需要的文件
<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文件到你的本地，然后添加本地引用。
<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)如上圖一效果。
html部分不變。js初始化的時(shí)候增加參數(shù)即可。
<script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD',//日期格式化，只顯示日期 locale: 'zh-CN' //中文化 }); }); </script>
<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>
$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD',//日期格式化，只顯示日期 locale: 'zh-CN', //中文化 maxDate: '2017-01-01',//最大日期 minDate: '2010-01-01' //最小日期 });showClear: trueviewMode: 'years'
更多強(qiáng)大的功能可以參看API，這里就不一一列舉。里面有大量的屬性、事件、方法來(lái)滿(mǎn)足你各種特殊的需求。
關(guān)于bootstrap自增器，可能并非每一個(gè)項(xiàng)目里面都需要用到。有一些特殊場(chǎng)景，比如：某一個(gè)文本框需要數(shù)據(jù)數(shù)字、數(shù)組的大小需要微調(diào)等一些情況。說(shuō)了半天，可能有園友都不知道它長(zhǎng)啥樣，上點(diǎn)圖吧。
其實(shí)效果很簡(jiǎn)單，但它可以自動(dòng)設(shè)置最大值、最小值、自增值還是挺方便的，并且可以自動(dòng)做數(shù)字校驗(yàn)。最最方便的是它不需要使用JavaScript去做初始化，只需要在html里面初始化即可。
首先需要引用的文件如下：
<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文件是一個(gè)cdn引用的文件，你也可以它引用到你的本地。
<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>
就這么一段簡(jiǎn)單的html就能看到如上圖的效果，有沒(méi)有很easy~~
查看組件的源碼，可以看到在它里面為我們定義了多種自增類(lèi)型：
可以定義data-rule屬性為這些類(lèi)型，比如：
data-rule="month" 可以控制自增組件的規(guī)則是按照月的規(guī)則來(lái)進(jìn)行。
除了上面的幾種特定類(lèi)型，組件還支持自定義最大值、最小值、自增值
<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>
這個(gè)很好理解，不做過(guò)多說(shuō)明。效果：
組件提供了兩個(gè)事件changed、changing，分別對(duì)應(yīng)數(shù)值變化中和變化后的事件回調(diào)。
$('#id').spinner('changed', function(e, newVal, oldVal) {});$('[data-trigger="spinner"]').spinner('changing', function(e, newVal, oldVal) {});前幾天，有群友在問(wèn)bootstrap的加載效果用什么組件。其實(shí)百度搜索一下，也能找到很多的結(jié)果。在此，博主根據(jù)自己的使用經(jīng)歷分享下幾個(gè)加載的小組件，希望大家用得著。主要分為實(shí)用型和炫酷型兩種。實(shí)用型效果一般，但能適用各種瀏覽器；炫酷型使用最新的css3和html5寫(xiě)出來(lái)的，效果很炫，但基本上低版本的IE（10以下）都不能兼容。
這個(gè)組件是博主在網(wǎng)上找到的一個(gè)js，但下載下來(lái)之后發(fā)現(xiàn)一些大大小小的問(wèn)題，于是，博主改寫(xiě)了下，命名為bootstrap-loading組件。它的原理就是在組件啟動(dòng)的時(shí)候彈出一個(gè)覆蓋層，然后組件關(guān)閉時(shí)，將覆蓋層的dom移除，加載效果使用了一張gif的圖片。
PerfectLoad.js文件內(nèi)容：
/******************************************* * * Plug-in:友好的頁(yè)面加載效果 * Author:sqinyang (sqinyang@sina.com) * Time:2015/04/20 * Explanation:隨著HTML5的流行，頁(yè)面效果越來(lái)越炫，同時(shí)也需要加載大量的插件及素材，萬(wàn)惡的網(wǎng)速，特別對(duì)于掛在國(guó)外服務(wù)器的網(wǎng)站，一打開(kāi)一堆素材緩緩加載，位置錯(cuò)亂不齊，故編寫(xiě)此方法，方便大家使用 **********************************************/jQuery.bootstrapLoading = { start: function (options) { var defaults = { opacity: 1, //loading頁(yè)面透明度 backgroundColor: "#fff", //loading頁(yè)面背景色 borderColor: "#bbb", //提示邊框顏色 borderWidth: 1, //提示邊框?qū)挾?/span> borderStyle: "solid", //提示邊框樣式 loadingTips: "Loading, please wait...", //提示文本 TipsColor: "#666", //提示顏色 delayTime: 1000, //頁(yè)面加載完成后，加載頁(yè)面漸出速度 zindex: 999, //loading頁(yè)面層次 sleep: 0 //設(shè)置掛起,等于0時(shí)則無(wú)需掛起 } var options = $.extend(defaults, options); //獲取頁(yè)面寬高 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //在頁(yè)面未加載完畢之前顯示的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ū)捀?/span> 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īng)頁(yè)面加載狀態(tài) document.onreadystatechange = PageLoaded; //當(dāng)頁(yè)面加載完成后執(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下來(lái)的，只是在此基礎(chǔ)上博主加了一個(gè)end的方法。
來(lái)看看組件如何使用，下面是測(cè)試代碼：
<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ù)，請(qǐng)稍候..." }); $.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">查詢(xún)條件</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>加載測(cè)試</button> </div> </div> </form> </div> </div> </div></body></html>
使用說(shuō)明：組件不需要任何的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)將彈出層移除。來(lái)看看效果：
如果對(duì)效果不滿(mǎn)意，可自己設(shè)置defaults里面的參數(shù)，注釋寫(xiě)得很詳細(xì)，在此就不一一列舉了。
使用圖片顯示加載效果有它天生的弊端，所以現(xiàn)在很多的加載組件都使用css+js去實(shí)現(xiàn)動(dòng)畫(huà)效果。spin.js就是其中一個(gè)例子，spin.js是一個(gè)開(kāi)源組件，開(kāi)源地址。
下載源碼后，初始化發(fā)現(xiàn)組件不帶遮罩的效果，只能這樣：
找了半天它的參數(shù)，硬是沒(méi)找到，亦或是哪里有“機(jī)關(guān)”沒(méi)發(fā)現(xiàn)。沒(méi)辦法，博主只能自己加上遮罩的效果了。于是新建了一個(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改寫(xiě)了兩個(gè)地方，改寫(xiě)后的內(nèi)容如下：
改動(dòng)的兩個(gè)地方：
（1）初始化的時(shí)候，如果是顯示，則給對(duì)應(yīng)的標(biāo)簽加上fade樣式
（2）、每次都將fade樣式刪除掉。
改好之后，就是測(cè)試界面了。
使用說(shuō)明：如果你的頁(yè)面不使用jQuery，引用spin.js這個(gè)文件，這個(gè)文件不需要jquery的支持；如果想要使用jQuery，則引用jquery.spin.js文件。上面的代碼是不使用jQuery的情況。組件需要定義一個(gè)空的div，然后在此div上面做初始化。得到的效果如下：
當(dāng)然，如果你對(duì)此效果不滿(mǎn)意，你還可以設(shè)置遮罩層的透明度，以及整個(gè)遮罩的樣式。還有旋轉(zhuǎn)的各個(gè)參數(shù)，都可以通過(guò)初始化的時(shí)候自定義，上述代碼里面有詳細(xì)注釋。
此組件效果不用說(shuō)，使用也比較簡(jiǎn)單，但是對(duì)IE10以下版本不支持?？纯葱Ч龋?/p>
至于具體的代碼使用，博主不打算深究，可以去百度或者github上面找找。
更多的選擇，更好的扁平化效果，更好的手機(jī)、平板設(shè)備體驗(yàn)。只需要看看圖片感受下就知道了。開(kāi)源地址。
前段時(shí)間做一個(gè)工作流的需求，需要顯示當(dāng)前流程進(jìn)行到哪一步，找到了一個(gè)流程小插件ystep。此組件優(yōu)點(diǎn)在于使用簡(jiǎn)單、夠輕量級(jí)。
先來(lái)看看效果
藍(lán)色縮小版
首先引用必須的文件
<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: [{ //步驟名稱(chēng) title: "開(kāi)始", //步驟內(nèi)容(鼠標(biāo)移動(dòng)到本步驟節(jié)點(diǎn)時(shí)，會(huì)提示該內(nèi)容) content: "流程開(kāi)始" }, { title: "審批", content: "各個(gè)角色開(kāi)始審批" }, { title: "實(shí)施", content: "需求開(kāi)始實(shí)施" }, { title: "結(jié)束", content: "流程結(jié)束" }] }); $("#div_ystep1").setStep(3); }); }); </script>
如果是動(dòng)態(tài)步驟，可能需要?jiǎng)討B(tài)去構(gòu)造steps屬性。然后通過(guò)setStep()設(shè)置當(dāng)前到了哪一步。
常用方法：
//跳轉(zhuǎn)到下一個(gè)步驟$(".ystep1").nextStep();//跳轉(zhuǎn)到上一個(gè)步驟$(".ystep1").prevStep();//跳轉(zhuǎn)到指定步驟$(".ystep1").setStep(2);//獲取當(dāng)前在第幾步$(".ystep1").getStep();
按鈕提示組件有點(diǎn)類(lèi)似js里面confirm的功能，不過(guò)這個(gè)confirm是以一種tooltip的方式彈出來(lái)的效果，給用戶(hù)一個(gè)確定、取消的判斷，界面更加友好。介紹這個(gè)組件之前，可以先來(lái)看看bootstrap里面提示框的效果：
bootstrap-confirmation組件就是基于這個(gè)提示框的效果來(lái)實(shí)現(xiàn)的。github上面有好多個(gè)bootstrap-confirmation組件，但基本大同小異。。
最原始的效果
自定義title、按鈕文本
（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>
（2）對(duì)應(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設(shè)置成 btnOkClass : 'btn btn-sm btn-primary',
這是一個(gè)效果非常炫酷的分組、過(guò)濾組件，開(kāi)源地址。博主在網(wǎng)上看到一個(gè)它的demo，覺(jué)得效果確實(shí)很好，廢話(huà)不多說(shuō)，上圖。
怎么樣，效果還行吧。這個(gè)組件在項(xiàng)目里面暫時(shí)沒(méi)用上，但覺(jué)得以后有需要的可能，就將此收藏了一把。實(shí)現(xiàn)代碼是網(wǎng)上copy過(guò)來(lái)的，沒(méi)有深究，有興趣可以看看。html+js代碼實(shí)現(xiàn)如下：
以上是博主最近收藏的一些前端組件，在此分享給大家，有實(shí)用型，也有炫酷型，不管如何，希望能幫助需要的園友節(jié)省尋找組件的時(shí)間。還有一些組件沒(méi)有整理出來(lái)，待整理好后放到后面分享。如果你覺(jué)得本文對(duì)你有幫助，不妨推薦下。再次感謝園友們的支持，不管是物資獎(jiǎng)勵(lì)還是精神支持，都是對(duì)博主分享精神的肯定，博主一定繼續(xù)努力。
PS：那天上百度查資料，發(fā)現(xiàn)博主的很多文章在其他網(wǎng)站上面都能看到。知道很多網(wǎng)站的爬蟲(chóng)會(huì)去博客園爬取文章，但是好多都不見(jiàn)注明出處的。最奇葩的是博主的文章目錄的url它們竟然都改成了自己網(wǎng)站的。再次呼吁：不管作者寫(xiě)得好不好，請(qǐng)尊重原創(chuàng)！本文原創(chuàng)地址：http://www.cnblogs.com/landeanfen/。
歡迎各位轉(zhuǎn)載，但是未經(jīng)作者本人同意，轉(zhuǎn)載文章之后必須在文章頁(yè)面明顯位置給出作者和原文連接，否則保留追究法律責(zé)任的權(quán)利。
聯(lián)系客服
