代码拉取完成,页面将自动刷新
layui组件扩展。目前只有bindLoading组件。 做这个加载状态组件的原因是在工作中经常使用echarts做一些比较装杯的页面给投资人看,使用layer原生的加载层是全局的影响使用体验,能展示各个布局模块的加载状态在使用体验上面就比较好一点,并且layer原生的每次使用都要改索性自己就写一个工具模块。由于没有美术细胞所以就乱做了一些上传下载的gif,反正意思大家都理解了,希望有艺术细胞的能做些美观的加载gif更新上来。
模仿layer的加载层做了一点改变封装一下就OK了。兼容ie8。
<script type="text/javascript" src="../bindLoading/bindLoading.js"></script>
<script>
layui.config({
base: '/BindLoading/'
}).extend({
bindLoading: 'bindLoading/bindLoading'
});
layui.use(['bindLoading'],function(){
var bindLoading = layui.bindLoading;
//5秒后自动关闭
bindLoading.loading("#loading1",{type:1,times: 5000,point:{show:true}});//默认为加载中
//默认加载类型,跟layui一致
bindLoading.loading("#loading2");
bindLoading.loading("#loading3",{type:3,point:{show:true,content:'上传中'}});
bindLoading.loading("#loading4",{type:4,zindex:19891015,point:{show:true,content:'下载中',style:"color: blue"}});
bindLoading.loading("#loading5",{type:3,point:{show:true,content:'上传中'}});
setTimeout(function(){
bindLoading.loading('#loading5',{type:5,point:{show:true,content:'上传完成'}});
},10000)
bindLoading.loading("#loading6",{type:4,point:{show:true,content:'下载中'}});
setTimeout(function(){
bindLoading.loading('#loading6',{type:6,point:{show:true,content:'下载失败'}});
},10000)
})
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型