閱讀目錄
正文
前言：之前分享過很多bootstrap常用組件，包括表格、表單驗證、文件上傳、復選下拉框、彈出框等。這段時間，博主又收藏了一些好用的組件（有些在項目中已經用起來了），經過兩天的時間，已經整理出了一部分，本著“好東西要與人分享”的原則，今天還是來點福利，將博主收藏的東西分享出來，供需要的園友參考。組件大部分都是些開源組件，也有部分是博主自己在網上找到然后改寫出來的效果，可能不盡如人意，有興趣的且看看吧。
bootstrap風格的時間組件非常多，你可以在github上面隨便搜索“datepicker”關鍵字，可以找到很多的時間組件。博主原來也用過其中的兩個，發現都會有一些大大小小的問題。經過一番篩選，找到一個效果不錯、能適用各種場景的時間組件，下面就來一睹它的風采吧。
初始效果
組件中文化和日期格式自定義：只顯示日期
顯示日期和時間（手機、平板類設備可能體驗會更好）
初初看了下組件效果，還是給出 源碼地址
首先引用需要的文件
<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 這個文件，當然，你也可以不用這種cdn的方式，完全可以下載這個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>
這樣就能出現如上圖一效果。
html部分不變。js初始化的時候增加參數即可。
<script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD',//日期格式化，只顯示日期 locale: 'zh-CN' //中文化 }); }); </script>
<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>
$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD',//日期格式化，只顯示日期 locale: 'zh-CN', //中文化 maxDate: '2017-01-01',//最大日期 minDate: '2010-01-01' //最小日期 });showClear: trueviewMode: 'years'
更多強大的功能可以參看API，這里就不一一列舉。里面有大量的屬性、事件、方法來滿足你各種特殊的需求。
關于bootstrap自增器，可能并非每一個項目里面都需要用到。有一些特殊場景，比如：某一個文本框需要數據數字、數組的大小需要微調等一些情況。說了半天，可能有園友都不知道它長啥樣，上點圖吧。
其實效果很簡單，但它可以自動設置最大值、最小值、自增值還是挺方便的，并且可以自動做數字校驗。最最方便的是它不需要使用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文件是一個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>
就這么一段簡單的html就能看到如上圖的效果，有沒有很easy~~
查看組件的源碼，可以看到在它里面為我們定義了多種自增類型：
可以定義data-rule屬性為這些類型，比如：
data-rule="month" 可以控制自增組件的規則是按照月的規則來進行。
除了上面的幾種特定類型，組件還支持自定義最大值、最小值、自增值
<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>
這個很好理解，不做過多說明。效果：
組件提供了兩個事件changed、changing，分別對應數值變化中和變化后的事件回調。
$('#id').spinner('changed', function(e, newVal, oldVal) {});$('[data-trigger="spinner"]').spinner('changing', function(e, newVal, oldVal) {});前幾天，有群友在問bootstrap的加載效果用什么組件。其實百度搜索一下，也能找到很多的結果。在此，博主根據自己的使用經歷分享下幾個加載的小組件，希望大家用得著。主要分為實用型和炫酷型兩種。實用型效果一般，但能適用各種瀏覽器；炫酷型使用最新的css3和html5寫出來的，效果很炫，但基本上低版本的IE（10以下）都不能兼容。
這個組件是博主在網上找到的一個js，但下載下來之后發現一些大大小小的問題，于是，博主改寫了下，命名為bootstrap-loading組件。它的原理就是在組件啟動的時候彈出一個覆蓋層，然后組件關閉時，將覆蓋層的dom移除，加載效果使用了一張gif的圖片。
PerfectLoad.js文件內容：
/******************************************* * * Plug-in:友好的頁面加載效果 * Author:sqinyang (sqinyang@sina.com) * 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里面的參數，注釋寫得很詳細，在此就不一一列舉了。
使用圖片顯示加載效果有它天生的弊端，所以現在很多的加載組件都使用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改寫了兩個地方，改寫后的內容如下：
改動的兩個地方：
（1）初始化的時候，如果是顯示，則給對應的標簽加上fade樣式
（2）、每次都將fade樣式刪除掉。
改好之后，就是測試界面了。
使用說明：如果你的頁面不使用jQuery，引用spin.js這個文件，這個文件不需要jquery的支持；如果想要使用jQuery，則引用jquery.spin.js文件。上面的代碼是不使用jQuery的情況。組件需要定義一個空的div，然后在此div上面做初始化。得到的效果如下：
當然，如果你對此效果不滿意，你還可以設置遮罩層的透明度，以及整個遮罩的樣式。還有旋轉的各個參數，都可以通過初始化的時候自定義，上述代碼里面有詳細注釋。
此組件效果不用說，使用也比較簡單，但是對IE10以下版本不支持?？纯葱Ч龋?/p>
至于具體的代碼使用，博主不打算深究，可以去百度或者github上面找找。
更多的選擇，更好的扁平化效果，更好的手機、平板設備體驗。只需要看看圖片感受下就知道了。開源地址。
前段時間做一個工作流的需求，需要顯示當前流程進行到哪一步，找到了一個流程小插件ystep。此組件優點在于使用簡單、夠輕量級。
先來看看效果
藍色縮小版
開源地址。
首先引用必須的文件
<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();
按鈕提示組件有點類似js里面confirm的功能，不過這個confirm是以一種tooltip的方式彈出來的效果，給用戶一個確定、取消的判斷，界面更加友好。介紹這個組件之前，可以先來看看bootstrap里面提示框的效果：
bootstrap-confirmation組件就是基于這個提示框的效果來實現的。github上面有好多個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）對應的點擊標簽（可以是任意標簽）
<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設置成 btnOkClass : 'btn btn-sm btn-primary',
這是一個效果非常炫酷的分組、過濾組件，開源地址。博主在網上看到一個它的demo，覺得效果確實很好，廢話不多說，上圖。
怎么樣，效果還行吧。這個組件在項目里面暫時沒用上，但覺得以后有需要的可能，就將此收藏了一把。實現代碼是網上copy過來的，沒有深究，有興趣可以看看。html+js代碼實現如下：
以上是博主最近收藏的一些前端組件，在此分享給大家，有實用型，也有炫酷型，不管如何，希望能幫助需要的園友節省尋找組件的時間。還有一些組件沒有整理出來，待整理好后放到后面分享。如果你覺得本文對你有幫助，不妨推薦下。再次感謝園友們的支持，不管是物資獎勵還是精神支持，都是對博主分享精神的肯定，博主一定繼續努力。
PS：那天上百度查資料，發現博主的很多文章在其他網站上面都能看到。知道很多網站的爬蟲會去博客園爬取文章，但是好多都不見注明出處的。最奇葩的是博主的文章目錄的url它們竟然都改成了自己網站的。再次呼吁：不管作者寫得好不好，請尊重原創！本文原創地址：http://www.cnblogs.com/landeanfen/。
歡迎各位轉載，但是未經作者本人同意，轉載文章之后必須在文章頁面明顯位置給出作者和原文連接，否則保留追究法律責任的權利。
