Bootstrap组件系列之福利篇几款好用的组件(推荐)
前端之家收集整理的这篇文章主要介绍了
Bootstrap组件系列之福利篇几款好用的组件(推荐)，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前言：之前分享过很多bootstrap常用组件，包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间，博主又收藏了一些好用的组件（有些在项目中已经用起来了），经过两天的时间，已经整理出了一部分，本着“好东西要与人分享”的原则，今天还是来点福利，将博主收藏的东西分享出来，供需要的园友参考。组件大部分都是些开源组件，也有部分是博主自己在网上找到然后改写出来的效果，可能不尽如人意，有兴趣的且看看吧。
一、时间组件
bootstrap风格的时间组件非常多，你可以在上面随便搜索“datepicker”关键字，可以找到很多的时间组件。博主原来也用过其中的两个，发现都会有一些大大小小的问题。经过一番筛选，找到一个效果不错、能适用各种场景的时间组件，下面就来一睹它的风采吧。
1、效果展示
初始效果
组件中文化和日期格式自定义：只显示日期
显示日期和时间（手机、平板类设备可能体验会更好）
2、源码说明
初初看了下组件效果，还是给出
首先引用需要的文件
403_14@
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）设置最大值、最小值、自增值
除了上面的几种特定类型，组件还支持自定义最大值、最小值、自增值
这个组件是博主在网上找到的一个js，但下载下来之后发现一些大大小小的问题，于是，博主改写了下，命名为bootstrap-loading组件。它的原理就是在组件启动的时候弹出一个覆盖层，然后组件关闭时，将覆盖层的dom移除，加载效果使用了一张gif的图片。
页面加载
效果
* 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();
}
}
