layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）

引言：

组件如何设置调用？
声明式引入：layui.use 引入 var 声明 element 组件

如何设置背景类？
class="layui-bg-red"

如何自定义提示文本？
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">

如何实现 js动态操作？
1.【动态操作进度条】讲述的是一个已经设置了过滤器（lay-filter=“demo”）的进度条
现在你只需要在某个事件或者语句中执行方法：element.progress(‘demo’, ‘50%’);
即可改变进度。

动态操作 · 文档截图：

如何更新渲染：进度条，视图热更新
两种方法，声明式渲染：
第一种：element.render('progress', 'demoStepX') 【文档解说】
第二种：element.init(); 【文档解说】

一、demo案例

1.1. 应用 · 截图：

1.2. 案例 · 全部代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>演示-进度条-三步骤</title><link rel="stylesheet" href="statics/plugin/layui/css/layui.css">
</head>
<body>
<!-- 让IE8/9兼容栅格 -->
<!--[if lt IE 9]><script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--><!--进度条-->
<!-- <div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar layui-bg-red" lay-percent="1 / 3"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar layui-bg-orange" lay-percent="2/ 3"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar layui-bg-green" lay-percent="3 / 3"></div>
</div> -->
<!--进度条设置-->
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demoStepX">
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;"><button class="layui-btn set-btn-active" data-type="setOneStepButton">设置 33.3%</button><button class="layui-btn set-btn-active" data-type="setTwoStepButton">设置 66.6%</button><button class="layui-btn set-btn-active" data-type="setThreeStepButton">设置 100%</button><button class="layui-btn set-btn-active" data-type="loadingButton">模拟 loading</button>
</div><script src="statics/js/laycms_js/jquery.min.js"></script>
<script src="statics/plugin/layui/layui.js"></script>
<script>layui.use(['form', 'element'], function(){var form = layui.form,element = layui.element //Tab的切换功能，切换事件监听等，需要依赖element模块,layer = layui.layer;//进度条：初始化渲染element.progress('demoStepX', '0/3');element.render('progress', 'demoStepX')//触发事件var active = {setOneStepButton: function(){//第一步element.progress('demoStepX', '33.3%');element.init();   },setTwoStepButton: function(){//第二步element.progress('demoStepX', '66.6%');element.init();   },setThreeStepButton: function(){//第三步element.progress('demoStepX', '100%');element.init();   },loadingButton: function(othis){var DISABLED = 'layui-btn-disabled';if(othis.hasClass(DISABLED)) return;//模拟loadingvar n = 0, timer = setInterval(function(){n = n + Math.random()*10|0;  if(n>100){n = 100;clearInterval(timer);othis.removeClass(DISABLED);}element.progress('demoStepX', n+'%');}, 300+Math.random()*1000);othis.addClass(DISABLED);}};//进度条演示$('.set-btn-active').on('click', function(){var othis = $(this), type = $(this).data('type');active[type] ? active[type].call(this, othis) : '';});});
</script>
</body>
</html>

二、自定义案例

2.1. 部分代码：

<!--进度条设置-->
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demoStepX"><div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div><!-- 先引入：防止代码报错不生效 -->
<script src="{APP_PATH}statics/plugin/layui/layui.js"></script><!--然后，再定义代码！-->
{if !isset($_GET['t'])}
<script>layui.use('element', function(){var element = layui.element;     //第一步：作为初始化设置element.progress('demoStepX', '1/3');element.render('progress', 'demoStepX');});
</script>
{elseif isset($_GET['t']) && $_GET['t']==2}
<script>layui.use('element', function(){var element = layui.element;     //第二步element.progress('demoStepX', '2/3');element.render('progress', 'demoStepX');});
</script>
{elseif isset($_GET['t']) && $_GET['t']==3}
<script>layui.use('element', function(){var element = layui.element;     //第三步element.progress('demoStepX', '3/3');element.render('progress', 'demoStepX');});
</script>
{/if}

2.2. 截图：

三、背景设置：

访问：进度条 · 页面元素

然后，找到下图所示的公共类：

四、使用说明：

其他设置：官方演示文档：风格、颜色、尺寸、文本，等等
注意事项分析 · 总结 · 如下：
1. 必须先引入layui.js框架文件；
2. 如需要jquery支持，需要事先引入jquery库；
3. 渲染不生效？一般都是代码编写不规范的问题（建议先从上述两点入手分析并查找bug）;
4. 风格：
5. 颜色：（官方已发现的）六种色系，具体参考：背景色公共类 --> 背景色；
6. 尺寸：width:100%；需要固定尺寸，请增加并设定父级元素宽度；
7. 文本：目前支持规范如下：1/3、0.5/3，33.3%，66/100、50/200，
  另外：小尺寸数字在上，大尺寸数字在内，具体参考：官方文档；

以上就是关于“ layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）”的全部内容。

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）相关推荐

怎么样装修好阿里巴巴国际站产品边框进度条环绕围绕效果动态gif制作代码全屏展示图片首页装修技巧方法教程视频全球旺铺阿里旺铺自定义内容装修模板模块设置内容
如何运营好阿里巴巴国际站店铺呢,首先先要让自己店铺美观起来,好比如自己门店一样.需要装修起来才有更有吸引力或者让用户停留在页面当中. 阿里巴巴国际站装修代码产品首页产品边框进度条环绕围绕移动效果首页动 ...
android 环形时间显示_Android圆形进度条颜色的设置
最近几天由于项目的需要研究了一下listView的滑动数据动态的更新显示,其中需要在数据加载过程有圆形进度条的显示,遇到的问题是进度条的颜色设置,在网上查了一些资料结合自己的所得分享在此. xml布局 ...
android圆形进度条ProgressBar颜色设置
原帖地址:http://www.apkbus.com/android-19012-1-1.html xml布局文件需加入如下的进度条构件: Java代码 <ProgressBar android ...
SpringBoot导出word模板并动态渲染数据
导出word模板并动态渲染数据一.需求介绍背景:需要导出word模板的时候,有些数据是动态或者图片等不确定因素的时候.根据需求定制好的模板要求填充数据,那么这个时候就需要进行根据word模板进行动 ...
工作183：动态渲染数据数据在数字字典里面
1接口调用 /*调用接口*/created() {/*动态渲染content_type接口*/getAction("/dict/list",{dict_code:"con ...
layui进度条bug
对于动态及生成的进度条,在渲染时候要使用element.init();element.init();element.progress('demo', percent+'%'); 转载于:https:/ ...
android 水平进度条自定义颜色,android 水平进度条的颜色设置
首先在布局文件中定义如下: 再在drawable目录下新增progressbar.xml文件,可以设置默认背景色和进度条的颜色(值得一提的是支持渐变色) 内容如下:
layui父页面调用子页面的渲染_layUI ajax加载html页面后重新渲染的方法
相关问题同: 1.layUI使用jquery.load加载界面时,如何让layui渲染页面? 2.layUI ajax加载html页面后重新渲染 layUI ajax加载html页面后渲染,关键在将h ...
php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）

文章目录

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）

一、demo案例

1.1. 应用 · 截图：

1.2. 案例 · 全部代码：

二、自定义案例

2.1. 部分代码：

2.2. 截图：

三、背景设置：

四、使用说明：

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）相关推荐

最新文章

热门文章

layui进度条：调用、参数设置、动态渲染、数据热更新 （含案例、代码）

文章目录

layui进度条：调用、参数设置、动态渲染、数据热更新 （含案例、代码）

一、demo案例

1.1. 应用 · 截图：

1.2. 案例 · 全部代码：

二、自定义案例

2.1. 部分代码：

2.2. 截图：

三、背景设置：

四、使用说明：

layui进度条：调用、参数设置、动态渲染、数据热更新 （含案例、代码）相关推荐

最新文章

热门文章

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）相关推荐