JS组件福利大放送 推荐12款好用的Bootstrap组件
前言:之前分享过很多bootstrap常用组件,包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着“好东西要与人分享”的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考。组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧。
一、时间组件
bootstrap风格的时间组件非常多,你可以在上面随便搜索“datepicker”关键字,可以找到很多的时间组件。博主原来也用过其中的两个,发现都会有一些大大小小的问题。经过一番筛选,找到一个效果不错、能适用各种场景的时间组件,下面就来一睹它的风采吧。
1、效果展示
初始效果
组件中文化和日期格式自定义:只显示日期
显示日期和时间(手机、平板类设备可能体验会更好)
2、源码说明
初初看了下组件效果,还是给出
3、代码示例
首先引用需要的文件
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样式删除掉。
改好之后,就是测试界面了。