1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/song-guodong-layui-extension

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

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/

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/song-guodong-layui-extension.git
git@api.gitlife.ru:oschina-mirror/song-guodong-layui-extension.git
oschina-mirror
song-guodong-layui-extension
song-guodong-layui-extension
master