JS组件福利大放送 推荐12款好用的Bootstrap组件

前端之家收集整理的这篇文章主要介绍了JS组件福利大放送 推荐12款好用的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、源码说明

代码示例

(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">
    muxitup

    以上是博主最近收藏的一些前端组件,在此分享给大家,有实用型,也有炫酷型,不管如何,希望能帮助需要的朋友节省寻找组件的时间。

    上面分享了几个项目中比较常用的组件,引起了许多朋友的关注。下面还是继续,因为觉得还有几个非常简单、实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~

    七、多值输入组件manifest

    关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我“红领巾”! 1、效果展示 本地多值输入框

    远程多值输入框

    2、源码说明 感谢开源社区,感谢那些喜欢分享的可爱的人儿,3、代码示例 (1)本地多值输入 首先需要引用如下几个文件

    <script src="~/Content/jquery-1.9.1.js">
    <script src="~/Content/bootstrap/js/bootstrap.js">
    <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js">
    <script src="~/Content/jquery-manifest-master/build/jquery.manifest.js">

    bootstrap的Js和css文件并非必须,本文是为了样式好看,所以将其引用进来。

    manifest组件不依赖bootstrap,但是依赖jQuery,除此之外还需要引用jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.js三个文件

    然后就是html和js的初始化


    <script src="~/Content/bootstrap/js/bootstrap.js">
    <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js">
    <script src="~/Content/jquery-manifest-master/build/parts/jquery.marcopolo.js">
    <script src="~/Content/jquery-manifest-master/build/jquery.manifest.js">

    和上面的相比,多了一个文件jquery.marcopolo.js的引用。 然后就是html和js的初始化

    404@
    required: true }); });

    至于每一个参数的意义,园友们有需要可以研究下,应该不难理解。博主简单监视了一下这个远程搜索方法的返回值

    如果有打算自己用这个远程的方法,可以参考这个数据格式去实现。

    八、文本框搜索组件bootstrap-typeahead

    其实关于文本框搜索功能,很多组件都带有这个功能,比如原来博主用过的jQuery UI里面就有一个autocomplete组件可以实现自动完成。而bootstrap文本框的自动搜索组件,网上也是层出不穷,今天之所以选择这个组件是因为觉得它和bootstrap的风格比较类似,而且组件比较小,简单实用。 1、效果展示 本地静态搜索(数据源在本地)

    远程搜索(数据源通过ajax请求远程获取

    2、源码说明 3、代码示例 首先需要引用的文件:主要包含一个css和一个js文件。需要jQuery和bootstrap的支持。

    <script src="~/Content/jquery-1.9.1.js">
    <script src="~/Content/bootstrap/js/bootstrap.js">
    <script src="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js">

    然后组件的初始化 数据源在本地

    数据源通过ajax请求获取

    后台对应的测试方法

    (); 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:选中搜索值的时候触发。

    }
    });
    });

    参数item表示选中的对象,参数val表示选中项的实际值,text表示选中项的显示值。

    九、bootstrap步骤组件

    关于bootstrap步骤组件,上篇介绍过一个ystep这个小组件,它在查看任务的进度方面能起到一定的作用,但是对于一些复杂的业务,需要按照当前的步骤处理相应的业务这个方面它就有点无能为力了。今天博主就介绍一款效果相当不错的步骤组件,有了这个组件,程序员再也不用担心复杂的步骤设计了。 1、效果展示 一睹风采

    按照步骤进行“上一步”、“下一步”

    更多步骤

    2、源码说明 这个组件是博主在网上找到的,看了下很多的样式和用法都是bootstrap里面的,唯一需要引用一个js和一个css文件。暂时未找到源码出处,如果有知道源码出处的可以告诉博主,博主再加上,为了尊重作者的劳动成果博主一定尊重原创! 3、代码示例 需要引用的文件

      
    <script src="~/Content/bootstrap/js/bootstrap.js">
    <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js">
    <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js">

    组件初始化:初始化4个按钮

          $(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所有选项如下,有兴趣可以去试试,看看都是些什么效果:

    (2)如果需要调整按钮的大小,组件内置了data-size属性,data-size所有选项如下: data-size="xs" data-size="s" data-size="l" (3)如果需要设置按钮的颜色,通过data-spinner-color data-spinner-color="#FF0000" (4)按钮的进度条的设置

    主要通过instance.setProgress(progress);这一句来设置当前执行的进度,progress的取值在0到1之间。当然,以上只是测试进度效果的代码,在正式项目中这里需要计算当前请求执行的情况来动态返回进度。

    十一、开关组件bootstrap-switch

    在bootstrap中文网的首页上面,你就能找到这么一个组件

    1、效果展示 初始效果

    五花八门的属性以及事件

    2、源码说明 Bootstrap-Switch源码地址: Bootstrap-Switch文档以及Demo: 3、代码示例 需要引用的文件

      

    <script src="~/Content/jquery-1.9.1.js">
    <script src="~/Content/bootstrap/js/bootstrap.js">
    <script src="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/js/bootstrap-switch.js">

    组件依赖于JQuery和bootstrap 然后就是和html和js的初始化

    $(function () { $('input[type=checkbox]').bootstrapSwitch({ size: "large" }); })

    size属性并非必须,如果你使用默认的样式,参数可以不传。

    常用的属性

    •size:开关大小。可选值有'mini','small','normal','large' •onColor:开关中开按钮的颜色。可选值有'primary','info','success','warning','danger','default' •offColor:开关中关按钮的颜色。可选值'primary','default' •onText:开关中开按钮的文本,默认是“ON”。 •offText:开关中关按钮的文本,默认是“OFF”。 •onInit:初始化组件的事件。 •onSwitchChange:开关变化时的事件。 常用的事件和方法可以直接查看文档,官方提供了很详细的说明。

    十二、评分组件bootstrap-star-rating

    某东、某宝上面的评分大家应该都有了解,无意中发现了一块bootstrap风格的评分组件,觉得有点意思,以后做电商、社区、论坛系统或许用得着,就来分享分享。 1、效果展示

    2、源码说明

    3、代码示例 此组件需要jQuery和bootstrap样式的支持

    <script src="~/Content/jquery-1.9.1.js">
    <script src="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/star-rating.js">
    <script src="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/locales/zh.js">

    直接通过html初始组件

    组件通过class="rating"这一个来进行初始化。这里几个参数应该很好理解: •value:表示组件初始化的时候默认的分数 •min:最小分数 •max:最大分数 •step:每次增加的最小刻度 •data-size:星星的大小 •data-stars:星星的个数 通过 $("#input-21a").val() 即可得到当前的评分数。

    十三、总结

    通过这篇文章给大家分享了下bootstrap的十二款组件,博主相信这些里面肯定有些你能够用上,可能有些并不常用,但留着以后或许能用上呢!至此,bootstrap组件的总结暂时告一段落,后面将会分享下ko的一些封装。如果你觉得本文能够帮到你,可以推荐下,博主一定继续努力!

    猜你在找的Bootstrap相关文章