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>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )