DDR爱好者之家

Bootstrap组件系列之福利篇几款好用的组件(推荐)
站长资源 2024/11/29 佚名
36 1538
DDR爱好者之家 Design By 杰米

前言：之前分享过很多bootstrap常用组件，包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间，博主又收藏了一些好用的组件（有些在项目中已经用起来了），经过两天的时间，已经整理出了一部分，本着“好东西要与人分享”的原则，今天还是来点福利，将博主收藏的东西分享出来，供需要的园友参考。组件大部分都是些开源组件，也有部分是博主自己在网上找到然后改写出来的效果，可能不尽如人意，有兴趣的且看看吧。

一、时间组件

bootstrap风格的时间组件非常多，你可以在github上面随便搜索“datepicker”关键字，可以找到很多的时间组件。博主原来也用过其中的两个，发现都会有一些大大小小的问题。经过一番筛选，找到一个效果不错、能适用各种场景的时间组件，下面就来一睹它的风采吧。

1、效果展示

初始效果

Bootstrap组件系列之福利篇几款好用的组件(推荐)

组件中文化和日期格式自定义：只显示日期

Bootstrap组件系列之福利篇几款好用的组件(推荐)

显示日期和时间（手机、平板类设备可能体验会更好）

Bootstrap组件系列之福利篇几款好用的组件(推荐)

2、源码说明

初初看了下组件效果，还是给出源码地址

3、代码示例

首先引用需要的文件

<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  <link href="~/Content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
  <script src="/UploadFiles/2021-04-02/jquery-1.9.1.js">


JQuery和bootstrap是必须的。除此之外，还得引用moment-with-locales.js这个文件，当然，你也可以不用这种cdn的方式，完全可以下载这个js文件到你的本地，然后添加本地引用。


（1）初始效果





<label class="control-label col-xs-3">日期：</label>
  <div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div> 
  <script type="text/javascript">
  $(function () {
    $('#datetimepicker1').datetimepicker();
  });
  </script>





这样就能出现如上图一效果。


（2）中文化和日期格式化


html部分不变。js初始化的时候增加参数即可。





 <script type="text/javascript">
  $(function () {
    $('#datetimepicker1').datetimepicker({
      format: 'YYYY-MM-DD',//日期格式化，只显示日期
      locale: 'zh-CN'   //中文化
    });
  });
  </script>





（3）显示时间





<label class="control-label col-xs-3">时间：</label>
  <div class='input-group date' id='datetimepicker2'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div> 
  <script type="text/javascript">
  $(function () {
    $('#datetimepicker2').datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss',
      locale: 'zh-CN'
    });
  });
  </script>





（4）最大日期、最小日期





$('#datetimepicker1').datetimepicker({
      format: 'YYYY-MM-DD',//日期格式化，只显示日期
      locale: 'zh-CN',   //中文化
      maxDate: '2017-01-01',//最大日期
      minDate: '2010-01-01' //最小日期
    });





Bootstrap组件系列之福利篇几款好用的组件(推荐)


（5）启用删除按钮





showClear: true





Bootstrap组件系列之福利篇几款好用的组件(推荐)


（6）View Mode属性。设置浏览器选中模式复制代码 代码如下:viewMode: 'years'


Bootstrap组件系列之福利篇几款好用的组件(推荐)


（7）其他


更多强大的功能可以参看API，这里就不一一列举。里面有大量的属性、事件、方法来满足你各种特殊的需求。


二、自增器组件


关于bootstrap自增器，可能并非每一个项目里面都需要用到。有一些特殊场景，比如：某一个文本框需要数据数字、数组的大小需要微调等一些情况。说了半天，可能有园友都不知道它长啥样，上点图吧。


1、效果展示


Bootstrap组件系列之福利篇几款好用的组件(推荐)


其实效果很简单，但它可以自动设置最大值、最小值、自增值还是挺方便的，并且可以自动做数字校验。最最方便的是它并需要使用JavaScript去做初始化，只需要在html里面初始化即可。


2、源码说明


源码以及文档地址


3、代码示例


首先需要引用的文件如下：





 <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <link href="~/Content/jquery.spinner-master/dist/css/bootstrap-spinner.css" rel="stylesheet" />
  <script src="/UploadFiles/2021-04-02/jquery-1.9.1.js">


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）自增类型


查看组件的源码，可以看到在它里面为我们定义了多种自增类型：


Bootstrap组件系列之福利篇几款好用的组件(推荐)


可以定义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"：自增值


这个很好理解，不做过多说明。效果：


Bootstrap组件系列之福利篇几款好用的组件(推荐)


（4）事件捕捉


组件提供了两个事件changed、changing，分别对应数值变化中和变化后的事件回调。





$('#id').spinner('changed', function(e, newVal, oldVal) {
});
$('[data-trigger="spinner"]').spinner('changing', function(e, newVal, oldVal) {
});





三、加载效果


前几天，有群友在问bootstrap的加载效果用什么组件。其实百度搜索一下，也能找到很多的结果。在此，博主根据自己的使用经历分享下几个加载的小组件，希望大家用得着。主要分为实用型和炫酷型两种。实用型效果一般，但能适用各种浏览器；炫酷型使用最新的css3和html5写出来的，效果很炫，但基本上低版本的IE（10以下）都不能兼容。


一、实用型


1、PerfectLoading组件


这个组件是博主在网上找到的一个js，但下载下来之后发现一些大大小小的问题，于是，博主改写了下，命名为bootstrap-loading组件。它的原理就是在组件启动的时候弹出一个覆盖层，然后组件关闭时，将覆盖层的dom移除，加载效果使用了一张gif的图片。


PerfectLoad.js文件内容：





/*******************************************
 * 
 * Plug-in:友好的页面加载效果
 * Author:sqinyang (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 "#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="/UploadFiles/2021-04-02/jquery-1.9.1.js">


使用说明：组件不需要任何的html代码，只需要在执行loading的时候调用组件的start方法即可。 start()方法启动弹出层，并可设置defaults 变量里面的所有参数。当loading结束后再调用组件的end方法，自动将弹出层移除。来看看效果：


Bootstrap组件系列之福利篇几款好用的组件(推荐)


如果对效果不满意，可自己设置defaults里面的参数，注释写得很详细，在此就不一一列举了。


2、菊花加载组件spin.js


使用图片显示加载效果有它天生的弊端，所以现在很多的加载组件都使用css+js去实现动画效果。spin.js就是其中一个例子，spin.js是一个开源组件，开源地址。


下载源码后，初始化发现组件不带遮罩的效果，只能这样：


Bootstrap组件系列之福利篇几款好用的组件(推荐)


找了半天它的参数，硬是没找到，亦或是哪里有“机关”没发现。没办法，博主只能自己加上遮罩的效果了。于是新建了一个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' "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 "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样式


Bootstrap组件系列之福利篇几款好用的组件(推荐)


（2）、每次都将fade样式删除掉。


Bootstrap组件系列之福利篇几款好用的组件(推荐)


改好之后，就是测试界面了。





<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="/UploadFiles/2021-04-02/jquery-1.9.1.js">


使用说明：如果你的页面不使用jQuery，引用spin.js这个文件，这个文件不需要jquery的支持；如果想要使用jQuery，则引用jquery.spin.js文件。上面的代码是不使用jQuery的情况。组件需要定义一个空的div，然后在此div上面做初始化。得到的效果如下：


Bootstrap组件系列之福利篇几款好用的组件(推荐)


当然，如果你对此效果不满意，你还可以设置遮罩层的透明度，以及整个遮罩的样式。还有旋转的各个参数，都可以通过初始化的时候自定义，上述代码里面有详细注释。


二、炫酷型


1、jquery.shCircleLoader.js组件


此组件效果不用说，使用也比较简单，但是对IE10以下版本不支持。看看效果先：


Bootstrap组件系列之福利篇几款好用的组件(推荐)


至于具体的代码使用，博主不打算深究，可以去百度或者github上面找找。


2、fakeLoader.js组件


更多的选择，更好的扁平化效果，更好的手机、平板设备体验。只需要看看图片感受下就知道了。开源地址。


Bootstrap组件系列之福利篇几款好用的组件(推荐)


四、流程图小插件


前段时间做一个工作流的需求，需要显示当前流程进行到哪一步，找到了一个流程小插件ystep。此组件优点在于使用简单、够轻量级。


1、效果展示


先来看看效果


Bootstrap组件系列之福利篇几款好用的组件(推荐)


蓝色缩小版


Bootstrap组件系列之福利篇几款好用的组件(推荐)


2、源码说明


开源地址。


3、代码示例


首先引用必须的文件





 <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  <link href="~/Content/ystep-master/css/ystep.css" rel="stylesheet" />
  <script src="/UploadFiles/2021-04-02/jquery-1.9.1.js">


这个组件需要jQuery和bootstrap两个组件的支持。


然后定义一个空的div





<div id="div_ystep1"></div>





最后在点击按钮的时候初始化组件





<script type="text/javascript">
    $(function () {
      $("#btn_submit").click(function () {
        $("#div_ystep1").loadStep({
          //ystep的外观大小
          //可选值：small,large
          size: "small",
          //ystep配色方案
          //可选值：green,blue
          color: "blue",
          //ystep中包含的步骤
          steps: [{
            //步骤名称
            title: "开始",
            //步骤内容(鼠标移动到本步骤节点时，会提示该内容)
            content: "流程开始"
          }, {
            title: "审批",
            content: "各个角色开始审批"
          }, {
            title: "实施",
            content: "需求开始实施"
          }, {
            title: "结束",
            content: "流程结束"
          }]
        });
        $("#div_ystep1").setStep(3);
      });
    });
  </script>





如果是动态步骤，可能需要动态去构造steps属性。然后通过setStep()设置当前到了哪一步。


常用方法：





//跳转到下一个步骤
$(".ystep1").nextStep();
//跳转到上一个步骤
$(".ystep1").prevStep();
//跳转到指定步骤
$(".ystep1").setStep(2);
//获取当前在第几步
$(".ystep1").getStep();





五、按钮提示组件bootstrap-confirmation


按钮提示组件有点类似js里面confirm的功能，不过这个confirm是以一种tooltip的方式弹出来的效果，给用户一个确定、取消的判断，界面更加友好。介绍这个组件之前，可以先来看看bootstrap里面提示框的效果：


Bootstrap组件系列之福利篇几款好用的组件(推荐)


bootstrap-confirmation组件就是基于这个提示框的效果来实现的。github上面有好多个bootstrap-confirmation组件，但基本大同小异。。


1、效果展示


最原始的效果


Bootstrap组件系列之福利篇几款好用的组件(推荐)


自定义title、按钮文本


Bootstrap组件系列之福利篇几款好用的组件(推荐)


2、源码说明


开源地址


3、代码示例


（1）引用文件：





<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
  <script src="/UploadFiles/2021-04-02/jquery-1.9.1.js">


样式需要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',


Bootstrap组件系列之福利篇几款好用的组件(推荐)


六、图片分类、过滤组件MuxitUp


这是一个效果非常炫酷的分组、过滤组件，开源地址。博主在网上看到一个它的demo，觉得效果确实很好，废话不多说，上图。


Bootstrap组件系列之福利篇几款好用的组件(推荐)


怎么样，效果还行吧。这个组件在项目里面暂时没用上，但觉得以后有需要的可能，就将此收藏了一把。实现代码是网上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="/UploadFiles/2021-04-02/jquery-1.9.1.js">


七、总结


以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。


以上所述是小编给大家介绍的Bootstrap组件系列之福利篇几款好用的组件(推荐)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
DDR爱好者之家 Design By 杰米

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
ddrfans.com
                                            
                                                DDR爱好者之家 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            8,675无损音乐
                                        

                                        

                                            1,324高清电影
                                        

                                        

                                            213破解软件
                                        

                                        

                                            70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米