领取MOLI红包
你的位置:Hamster中文网 > BabyChita中文网 > JS组件福利大放送 推荐12款好用的Bootstrap组件
BabyChita中文网
JS组件福利大放送 推荐12款好用的Bootstrap组件
发布日期:2025-01-03 19:24    点击次数:195
前言:之前分享过很多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属性。设置浏览器选中模式 (7)其他 更多强大的功能可以参看API,这里就不一一列举。里面有大量的属性、事件、方法来满足你各种特殊的需求。 二、自增器组件 关于bootstrap自增器,可能并非每一个项目里面都需要用到。有一些特殊场景,比如:某一个文本框需要数据数字、数组的大小需要微调等一些情况。说了半天,可能有园友都不知道它长啥样,上点图吧。 1、效果展示 其实效果很简单,但它可以自动设置最大值、最小值、自增值还是挺方便的,并且可以自动做数字校验。最最方便的是它并需要使用JavaScript去做初始化,只需要在html里面初始化即可。 2、源码说明 源码以及文档地址 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文件内容: 这个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代码实现如下: 以上是博主最近收藏的一些前端组件,在此分享给大家,有实用型,也有炫酷型,不管如何,希望能帮助需要的朋友节省寻找组件的时间。 上面分享了几个项目中比较常用的组件,引起了许多朋友的关注。下面还是继续,因为觉得还有几个非常简单、实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~ 七、多值输入组件manifest  关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我“红领巾”! 1、效果展示  本地多值输入框 远程多值输入框 2、源码说明 感谢开源社区,感谢那些喜欢分享的可爱的人儿,开源地址。 3、代码示例 (1)本地多值输入 首先需要引用如下几个文件  bootstrap的Js和css文件并非必须,本文是为了样式好看,所以将其引用进来。manifest组件不依赖bootstrap,但是依赖jQuery,除此之外还需要引用jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.js三个文件。 然后就是html和js的初始化 通过简单如上简单的步骤,上面的效果就可出来,是不是很简单。简单来看看它的一些用法 (2)远程多值输入  远程搜索输入的方式,需要我们提供一个url地址,获取数据,然后返回到浏览器。本文为了简单,就直接用源码网站上面的url来展示效果了。  首先需要引用的js文件  和上面的相比,多了一个文件jquery.marcopolo.js的引用。  然后就是html和js的初始化  至于每一个参数的意义,园友们有需要可以研究下,应该不难理解。博主简单监视了一下这个远程搜索方法的返回值  如果有打算自己用这个远程的方法,可以参考这个数据格式去实现。  八、文本框搜索组件bootstrap-typeahead 其实关于文本框搜索的功能,很多组件都带有这个功能,比如原来博主用过的jQuery UI里面就有一个autocomplete组件可以实现自动完成。而bootstrap文本框的自动搜索组件,网上也是层出不穷,今天之所以选择这个组件是因为觉得它和bootstrap的风格比较类似,而且组件比较小,简单实用。  1、效果展示  本地静态搜索(数据源在本地)  远程搜索(数据源通过ajax请求远程获取) 2、源码说明 源码地址 3、代码示例  首先需要引用的文件:主要包含一个css和一个js文件。需要jQuery和bootstrap的支持。 然后组件的初始化 <input type='text' class="form-control" id="txt_man" /> 数据源在本地  数据源通过ajax请求获取  后台对应的测试方法  常用属性:  •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、代码示例  需要引用的文件 bs-is-fun.css和brush.js这两个文件需要引用,组件需要jQuery和bootstrap的支持。  然后就是组件的初始化。  (1)箭头  如果是静态的步骤,只需要以上一段html代码即可看到上图中的箭头步骤效果。这里的active样式表示步骤已经经过的样式。 (2)正方形  (3)圆形  (4)进度条  (5)上一步、下一步  上图中的“上一步”、“下一步”是在bootstrap的modal组件里面自己定义的,还是把代码贴出来,供大家参考。  当然,还需要注册两个按钮的点击事件  逻辑可能并不完善,如果正式使用需要测试。   十、按钮加载组件ladda-bootstrap  关于按钮加载,博主早就想找一个合适的组件去优化,如果不处理,肯定存在重复操作的可能。今天来看下这么一个小东西吧。  1、效果展示  初见  自定义颜色、大小、进度条  2、源码说明 源码地址 3、代码示例 需要引用的文件  组件初始化:初始化4个按钮  代码释疑:应该不难理解,初始化组件主要涉及的代码 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源码地址:https://github.com/nostalgiaz/bootstrap-switch  Bootstrap-Switch文档以及Demo:-switch.org/examples.html  3、代码示例  需要引用的文件 组件依赖于JQuery和bootstrap  然后就是和html和js的初始化  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:开关变化时的事件。 常用的事件和方法可以直接查看文档,官方提供了很详细的说明。  十二、评分组件bootstrap-star-rating  某东、某宝上面的评分大家应该都有了解,无意中发现了一块bootstrap风格的评分组件,觉得有点意思,以后做电商、社区、论坛系统或许用得着,就来分享分享。  1、效果展示  2、源码说明  源码下载  3、代码示例   此组件需要jQuery和bootstrap样式的支持  直接通过html初始组件  组件通过class="rating"这一个来进行初始化。这里几个参数应该很好理解:  •value:表示组件初始化的时候默认的分数  •min:最小分数  •max:最大分数  •step:每次增加的最小刻度  •data-size:星星的大小  •data-stars:星星的个数  通过 $("#input-21a").val() 即可得到当前的评分数。  十三、总结  通过这篇文章给大家分享了下bootstrap的十二款组件,博主相信这些里面肯定有些你能够用上,可能有些并不常用,但留着以后或许能用上呢!至此,bootstrap组件的总结暂时告一段落,后面将会分享下ko的一些封装。如果你觉得本文能够帮到你,可以推荐下,博主一定继续努力! 您可能感兴趣的文章:JS表格组件神器bootstrap table详解(基础版)JS组件Bootstrap实现弹出框和提示框效果代码JS组件Bootstrap Table使用方法详解JS组件Bootstrap Select2使用方法详解JS组件Form表单验证神器BootstrapValidatorJS组件Bootstrap Table表格多行拖拽效果实现代码JS组件Bootstrap Table表格行拖拽效果实现代码JS组件中bootstrap multiselect两大组件较量JS组件系列之Bootstrap Icon图标选择组件功能强大的Bootstrap组件(结合js)

Powered by Hamster中文网 @2013-2022 RSS地图 HTML地图

Copyright Powered by站群系统 © 2013-2024