2 Star 15 Fork 7

宋国栋 / layui扩展

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

layui扩展

介绍

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>

主要方法loading(elem,options)。

  • elem:容器id。
  • options对象:
  1. type:加载类型。前3个跟官方一致.自己加了上传,下载,成功,失败状态类型(自己做的gif和图片,有点丑,有好的资源可以替换)分别对应数字3、4、5、6。
  2. times:加载时间后自动关闭,默认无限循环。
  3. zindex:loading层级。
  4. point:提示文本对象。
  5. point.show:默认false;
  6. point.conent:提示文本,默认“加载中”。
  7. point.style:string类型,自定义样式。如:"color: blue;font-size: smaller"。

关闭loading

  • 关闭当前close(elem)
  • 关闭所有closeAll()

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

特技

  1. 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
  2. Gitee 官方博客 blog.gitee.com
  3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
  4. GVP 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
  5. Gitee 官方提供的使用手册 https://gitee.com/help
  6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/
MIT License Copyright (c) 2021 宋国栋 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

layui组件扩展。目前只有bindLoading组件。 展开 收起
JavaScript 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/song-guodong/layui-extension.git
git@gitee.com:song-guodong/layui-extension.git
song-guodong
layui-extension
layui扩展
master

搜索帮助