Layui의 진행률 표시줄 렌더링 소개

진행률 표시줄의 정적 렌더링과 동적 렌더링을 모두 고려하세요.

 <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>

위 코드만으로는 진행률 표시줄 값을 표시할 수 없습니다.

(1) 정적 렌더링

진행률 표시줄은 요소 구성 요소에 따라 달라집니다. 도입되지 않으면 진행률 표시줄이 표시되지 않습니다.

layui.use('element', function () {
    var element = layui.element;
});

이때 진행률 표시줄에는 다음과 같은 결과가 표시됩니다.

(2) 동적 렌더링

진행률 표시줄의 진행률 값을 동적으로 변경해야 할 때 Layui 공식 홈페이지에서는 해당 요소를 다음과 같이 표시합니다. 모듈은 element.progress() 의 기본 메서드를 제공합니다.

먼저 진행률 표시줄 필터(lay-filter="demo")를 설정한 다음 이벤트나 명령문에서 이 메서드를 실행하기만 하면 정확도 표시줄 값을 동적으로 변경할 수 있습니다. 하지만 정밀도 막대에 표시되는 백분율 텍스트의 경우 사용자가 직접 변경해야 합니다.

element.progress('demo', '80%');

이때 진행률 표시줄의 값이 변경됩니다.

layui에 대한 더 많은 지식을 알고 싶으시면 layui 사용법 튜토리얼 칼럼을 주목해주세요.

위 내용은 Layui의 진행률 표시줄 렌더링 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!