Home  >  Article  >  Web Front-end  >  Introduction to progress bar rendering in layui

Introduction to progress bar rendering in layui

尚
forward
2020-02-12 16:14:156310browse

Introduction to progress bar rendering in layui

Consider two situations: static rendering and dynamic rendering of progress bars.

 <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
 </div>

With the above code alone, the progress bar value cannot be displayed.

(1) Static rendering

The progress bar depends on the element component. If it is not introduced, the progress bar will not be displayed.

layui.use(&#39;element&#39;, function () {
    var element = layui.element;
});

At this time, the progress bar displays the following results:

Introduction to progress bar rendering in layui

(2) Dynamic rendering

When you need to dynamically change the progress value of the progress bar , layui official website says that the element module provides the basic method of element.progress().

First set the progress bar filter (lay-filter="demo"), and then you only need to execute this method in an event or statement to dynamically change the precision bar value. But for the percentage text displayed in the accuracy bar, users need to change it themselves.

element.progress(&#39;demo&#39;, &#39;80%&#39;);

At this time the progress bar value changes:

Introduction to progress bar rendering in layui

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Introduction to progress bar rendering in layui. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete