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

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

作者：懒得安分 字体：[增加 减小] 类型：转载 时间：2017-07-18 我要评论

这篇文章主要介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐) 的相关资料,需要的朋友可以参考下

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

一、时间组件

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

1、效果展示

初始效果



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



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



2、源码说明

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

3、代码示例

首先引用需要的文件

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

（1）初始效果

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

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

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

?
（3）显示时间

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

?


（5）启用删除按钮

?


（6）View Mode属性。设置浏览器选中模式

复制代码 代码如下:
viewMode: 'years'



（7）其他

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

二、自增器组件

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

1、效果展示



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

2、源码说明

源码以及文档地址

3、代码示例

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

?
font-aweaome.min.css文件也是一个cdn引用的文件，你也可以它引用到你的本地。

（1）初始化

?

<span class= "input-group-addon" >

就这么一段简单的html就能看到如上图的效果，有没有很easy~~

（2）自增类型

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




可以定义data-rule属性为这些类型，比如：

data-rule="month"可以控制自增组件的规则是按照月的规则来进行。

（3）设置最大值、最小值、自增值

除了上面的几种特定类型，组件还支持自定义最大值、最小值、自增值

?
data-min="-10"：最小值data-max="10"：最大值data-step="2"：自增值

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



（4）事件捕捉

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

?
三、加载效果

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

一、实用型

1、PerfectLoading组件

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

PerfectLoad.js文件内容：

?
这个js基本上是网上down下来的，只是在此基础上博主加了一个end的方法。

来看看组件如何使用，下面是测试代码：

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




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

2、菊花加载组件spin.js

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

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




找了半天它的参数，硬是没找到，亦或是哪里有“机关”没发现。没办法，博主只能自己加上遮罩的效果了。于是新建了一个css样式文件暂且命名为spin.css，里面只有一个样式：

?
然后将spin.js改写了两个地方，改写后的内容如下：

?
spin.js

改动的两个地方：

（1）初始化的时候，如果是显示，则给对应的标签加上fade样式




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




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

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




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

二、炫酷型

1、jquery.shCircleLoader.js组件

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




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

2、fakeLoader.js组件

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




四、流程图小插件

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

1、效果展示

先来看看效果



蓝色缩小版



2、源码说明

开源地址。

3、代码示例

首先引用必须的文件

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

然后定义一个空的div

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

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

常用方法：

?
五、按钮提示组件bootstrap-confirmation

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




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

1、效果展示

最原始的效果



自定义title、按钮文本



2、源码说明

开源地址

3、代码示例

（1）引用文件：

?
样式需要bootstrap.css的支持JavaScript需要jquery和bootstrap.js的支持。

（2）对应的点击标签（可以是任意标签）

?
（3）js初始化

?
（4）更多属性、事件、方法

除了上述初始化的属性，还有一些常用的属性。比如：

btnOkClass：确定按钮的样式；btnCancelClass：取消按钮的样式；singleton：是否只允许出现一个确定框；popout：当用户点击其他地方的时候是否隐藏确定框；

比如你可以将btnOkClass设置成btnOkClass : 'btn btn-sm btn-primary',



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

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




怎么样，效果还行吧。这个组件在项目里面暂时没用上，但觉得以后有需要的可能，就将此收藏了一把。实现代码是网上copy过来的，没有深究，有兴趣可以看看。html+js代码实现如下：

?
七、总结

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

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

转载地址：http://www.jb51.net/article/87189.htm