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文件内容： '; //呈现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的方法。 来看看组件如何使用，下面是测试代码： |
