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

前端之家收集整理的这篇文章主要介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、时间组件

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

1、效果展示

初始效果

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

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

2、源码说明

初初看了下组件效果,还是给出

3、代码示例

首先引用需要的文件

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

(1)初始效果

(3)显示时间

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

(1)初始化

就这么一段简单的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文件内容

页面加载效果 * 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 = '
'; //呈现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的方法

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

loading
查询条件

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

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

2、菊花加载组件spin.js

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

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

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

然后将spin.js改写了两个地方,改写后的内容如下:

> 1) + 'px' }); } for (; i < o.lines; i++) { seg = css(createEl(),top: 1 + ~(o.scale * o.width / 2) + 'px',transform: o.hwaccel ? 'translate3d(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,.1)'))); } return el; },/** * Internal method that adjusts the opacity of a single line. * Will be overwritten in VML fallback mode below. */ opacity: function(el,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,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,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样式删除掉。

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

loading2
test_spin.cshtml

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

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

二、炫酷型

1、jquery.shCircleLoader.js组件

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

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

2、fakeLoader.js组件

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

四、流程图小插件

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

1、效果展示

先来看看效果

蓝色缩小版

2、源码说明

3、代码示例

首先引用必须的文件

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

常用方法:

五、按钮提示组件bootstrap-confirmation

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

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

1、效果展示

最原始的效果

自定义title、按钮文本

2、源码说明

3、代码示例

(1)引用文件

(4)更多属性、事件、方法

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

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

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

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

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

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

mixitup
  • logo" data-cat="logo">
    logo" data-cat="logo">
    logo" data-cat="logo">
    logo" data-cat="logo">
    logo
    muxitup

    七、总结

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

    以上所述是小编给大家介绍的Bootstrap组件系列之福利篇几款好用的组件(推荐)的相关知识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/bootstrap/47628.html
    bootstrap组件

    猜你在找的Bootstrap相关文章