Bootstrap組件福利篇：十二款好用的組件推薦

時間  2019-12-01
標籤 bootstrap 組件 十二 好用 推薦 欄目 Bootstarp 简体版
原文   原文鏈接

閱讀目錄javascript

 

正文css

前言：以前分享過不少bootstrap經常使用組件，包括表格、表單驗證、文件上傳、複選下拉框、彈出框等。這段時間，博主又收藏了一些好用的組件（有些在項目中已經用起來了），通過兩天的時間，已經整理出了一部分，本着「好東西要與人分享」的原則，今天仍是來點福利，將博主收藏的東西分享出來，供須要的園友參考。組件大部分都是些開源組件，也有部分是博主本身在網上找到而後改寫出來的效果，可能不盡如人意，有興趣的且看看吧。html

1、時間組件

 bootstrap風格的時間組件很是多，你能夠在github上面隨便搜索「datepicker」關鍵字，能夠找到不少的時間組件。博主原來也用過其中的兩個，發現都會有一些大大小小的問題。通過一番篩選，找到一個效果不錯、能適用各類場景的時間組件，下面就來一睹它的風采吧。html5

一、效果展現

初始效果java

組件中文化和日期格式自定義：只顯示日期jquery

顯示日期和時間（手機、平板類設備可能體驗會更好）css3

二、源碼說明

初初看了下組件效果，仍是給出 源碼地址git

三、代碼示例

 首先引用須要的文件程序員

複製代碼 
    <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文件到你的本地，而後添加本地引用。github

（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，這裏就不一一列舉。裏面有大量的屬性、事件、方法來知足你各類特殊的需求。

2、自增器組件

關於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引用的文件，你也能夠它引用到你的本地。

（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) {

});
複製代碼

3、加載效果

前幾天，有羣友在問bootstrap的加載效果用什麼組件。其實百度搜索一下，也能找到不少的結果。在此，博主根據本身的使用經歷分享下幾個加載的小組件，但願你們用得着。主要分爲實用型和炫酷型兩種。實用型效果通常，但能適用各類瀏覽器；炫酷型使用最新的css3和html5寫出來的，效果很炫，但基本上低版本的IE（10如下）都不能兼容。

1、實用型

一、PerfectLoading組件

這個組件是博主在網上找到的一個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裏面的參數，註釋寫得很詳細，在此就不一一列舉了。

二、菊花加載組件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上面作初始化。獲得的效果以下：

固然，若是你對此效果不滿意，你還能夠設置遮罩層的透明度，以及整個遮罩的樣式。還有旋轉的各個參數，均可以經過初始化的時候自定義，上述代碼裏面有詳細註釋。

2、炫酷型

一、jquery.shCircleLoader.js組件

此組件效果不用說，使用也比較簡單，可是對IE10如下版本不支持。看看效果先：

至於具體的代碼使用，博主不打算深究，能夠去百度或者github上面找找。

 二、fakeLoader.js組件

 更多的選擇，更好的扁平化效果，更好的手機、平板設備體驗。只須要看看圖片感覺下就知道了。開源地址。

4、流程圖小插件

前段時間作一個工做流的需求，須要顯示當前流程進行到哪一步，找到了一個流程小插件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();
複製代碼

5、按鈕提示組件bootstrap-confirmation

按鈕提示組件有點相似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>
  • 樣式須要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',

 

6、圖片分類、過濾組件MuxitUp

這是一個效果很是炫酷的分組、過濾組件。

一、效果展現

博主在網上看到一個它的demo，以爲效果確實很好，廢話很少說，上圖。

怎麼樣，效果還行吧。這個組件在項目裏面暫時沒用上，但以爲之後有須要的可能，就將此收藏了一把。

二、源碼說明

開源地址。

三、代碼示例

實現代碼是網上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

7、多值輸入組件manifest

關於文本框的多值輸入，一直是一個比較常見的需求，今天博主推薦一款好用的多值輸入組件給你們，不要謝我，請叫我「紅領巾」！

一、效果展現

本地多值輸入框

 遠程多值輸入框

二、源碼說明

感謝開源社區，感謝那些喜歡分享的可愛的人兒。開源地址。

三、代碼示例

（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>
複製代碼

 至於每個參數的意義，園友們有須要能夠研究下，應該不難理解。博主簡單監視了一下這個遠程搜索方法的返回值

若是有園友打算本身用這個遠程的方法，能夠參考這個數據格式去實現。

8、文本框搜索組件bootstrap-typeahead

其實關於文本框搜索的功能，不少組件都帶有這個功能，好比原來博主用過的jQuery UI裏面就有一個autocomplete組件能夠實現自動完成。而bootstrap文本框的自動搜索組件，網上也是層出不窮，今天之因此選擇這個組件是由於以爲它和bootstrap的風格比較相似，並且組件比較小，簡單實用。

一、效果展現

本地靜態搜索（數據源在本地）

遠程搜索（數據源經過ajax請求遠程獲取）

二、源碼說明

源碼地址

三、代碼示例

 首先須要引用的文件：主要包含一個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表示選中項的顯示值。

9、bootstrap步驟組件

關於bootstrap步驟組件，上篇介紹過一個ystep這個小組件，它在查看任務的進度方面能起到必定的做用，可是對於一些複雜的業務，須要按照當前的步驟處理相應的業務這個方面它就有點無能爲力了。今天博主就介紹一款效果至關不錯的步驟組件，有了這個組件，程序員不再用擔憂複雜的步驟設計了。

一、效果展現

一睹風采

按照步驟進行「上一步」、「下一步」

更多步驟

二、源碼說明

這個組件是博主在網上找到的，看了下不少的樣式和用法都是bootstrap裏面的，惟一須要引用一個js和一個css文件。暫時未找到源碼出處，若是有知道源碼出處的能夠告訴博主，博主再加上，爲了尊重做者的勞動成果博主必定尊重原創！

三、代碼示例

須要引用的文件

　　<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">&times;</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")
                    }
                }
            })
        })
複製代碼

邏輯可能並不完善，若是正式使用須要測試。 

10、按鈕加載組件ladda-bootstrap

關於按鈕加載，博主早就想找一個合適的組件去優化，若是不處理，確定存在重複操做的可能。今天來看下這麼一個小東西吧。

一、效果展現

初見

自定義顏色、大小、進度條

二、源碼說明

源碼地址

三、代碼示例

須要引用的文件

複製代碼 
　　<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之間。固然，以上只是測試進度效果的代碼，在正式項目中這裏須要計算當前請求執行的狀況來動態返回進度。

11、開關組件bootstrap-switch

在bootstrap中文網的首頁上面，你就能找到這麼一個組件

一、效果展現

初始效果

五花八門的屬性以及事件

二、源碼說明

Bootstrap-Switch源碼地址：https://github.com/nostalgiaz/bootstrap-switch

Bootstrap-Switch文檔以及Demo：http://www.bootstrap-switch.org/examples.html

三、代碼示例

須要引用的文件

複製代碼 
　　<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：開關變化時的事件。

經常使用的事件和方法能夠直接查看文檔，官方提供了很詳細的說明。

12、評分組件bootstrap-star-rating

某東、某寶上面的評分你們應該都有了解，無心中發現了一塊bootstrap風格的評分組件，以爲有點意思，之後作電商、社區、論壇系統或許用得着，就來分享分享。

一、效果展現

二、源碼說明

源碼下載

三、代碼示例

 此組件須要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="&#xe005;" 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="&#xe005;" 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() 便可獲得當前的評分數。

十3、總結

經過這兩篇給你們分享了下bootstrap的十二款組件，博主相信這些裏面確定有些你可以用上，可能有些並不經常使用，但留着之後或許能用上呢！或許有園友會以爲每天去扒別人的組件沒啥意思，也沒啥技術含量，或許是的，但博主以爲若是將這些東西整理成一套完善的bootstrap組件庫，對於之後是很是有用的，這十二款組件只是博主組件庫的一部分，還有不少沒有抽離出來，有須要的園友能夠聯繫博主。至此，bootstrap組件的總結暫時告一段落，後面將會分享下ko的一些封裝。若是你以爲本文可以幫到你，能夠推薦下，博主必定繼續努力！

歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利

 

 

出處：http://www.cnblogs.com/landeanfen/p/5461849.html            http://www.cnblogs.com/landeanfen/p/5603790.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程