就这么一段简单的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();
}
}