微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！
Bootstrap组件系列之福利篇几款好用的组件(推荐)
前言：之前分享过很多bootstrap常用组件，包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间，博主又收藏了一些好用的组件（有些在项目中已经用起来了），经过两天的时间，已经整理出了一部分，本着“好东西要与人分享”的原则，今天还是来点福利，将博主收藏的东西分享出来，供需要的园友参考。组件大部分都是些开源组件，也有部分是博主自己在网上找到然后改写出来的效果，可能不尽如人意，有兴趣的且看看吧。
一、时间组件
bootstrap风格的时间组件非常多，你可以在上面随便搜索“datepicker”关键字，可以找到很多的时间组件。博主原来也用过其中的两个，发现都会有一些大大小小的问题。经过一番筛选，找到一个效果不错、能适用各种场景的时间组件，下面就来一睹它的风采吧。
1、效果展示
初始效果
组件中文化和日期格式自定义：只显示日期
显示日期和时间（手机、平板类设备可能体验会更好）
2、源码说明
初初看了下组件效果，还是给出
首先引用需要的文件
rush:js;">
这样就能出现如上图一效果。
（2）中文化和日期格式化
html部分不变。js初始化的时候增加参数即可。
rush:js;">
（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，分别对应数值变化中和变化后的事件回调。
rush:js;">
$('#id').spinner('changed',function(e,newVal,oldVal) {
});
$('[data-trigger="spinner"]').spinner('changing',oldVal) {
});
前几天，有群友在问bootstrap的加载效果用什么组件。其实百度搜索一下，也能找到很多的结果。在此，博主根据自己的使用经历分享下几个加载的小组件，希望大家用得着。主要分为实用型和炫酷型两种。实用型效果一般，但能适用各种浏览器；炫酷型使用最新的css3和html5写出来的，效果很炫，但基本上低版本的IE（10以下）都不能兼容。
一、实用型
1、PerfectLoading组件
这个组件是博主在网上找到的一个js，但下载下来之后发现一些大大小小的问题，于是，博主改写了下，命名为bootstrap-loading组件。它的原理就是在组件启动的时候弹出一个覆盖层，然后组件关闭时，将覆盖层的dom移除，加载效果使用了一张gif的图片。
PerfectLoad.js文件内容：
rush:js;">
/*******************************************
*
* Plug-in:友好的
页面加载
效果
* 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的方法。
来看看组件如何使用，下面是测试代码：
rush:js;">
loading
disk" aria-hidden="true">加载测试
使用说明：组件不需要任何的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样式删除掉。
改好之后，就是测试界面了。
