Layui의 요소 모듈 (탭, 아코디언, 회전 목마 등)을 어떻게 사용합니까?-레이이 튜토리얼-php.cn

Layui의 요소 모듈을 사용하는 방법 (탭, 아코디언, 회전 목마 등)

탭, 아코디언 및 회전식과 같은 Layui의 요소 모듈은 사용 편의성 및 통합을 위해 설계되었습니다. 그들은 주로 HTML 구조와 최소한의 JavaScript 구성에 의존하는 선언적 접근법을 사용합니다. 몇 가지 주요 모듈을 사용하는 방법을 살펴 보겠습니다.

탭 : 탭을 구현하려면 다음과 같이 HTML을 구성합니다.

 <code class="html"><ul class="layui-tab" lay-filter="test"> <li class="layui-this" lay-id="1">Tab 1</li> <li lay-id="2">Tab 2</li> <li lay-id="3">Tab 3</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show" lay-id="1">Content for Tab 1</div> <div class="layui-tab-item" lay-id="2">Content for Tab 2</div> <div class="layui-tab-item" lay-id="3">Content for Tab 3</div> </div> <script> layui.use(&#39;element&#39;, function(){ var element = layui.element; //得到element对象//… other code … }); </script></code>

로그인 후 복사

layui-tab 클래스는 탭 컨테이너를 정의합니다. 각 <li> 탭을 나타내며 layui-this 초기 활성 탭을 나타냅니다. lay-id 각 탭에 대한 고유 식별자를 제공합니다. 해당 컨텐츠는 layui-tab-content Div 내에 있으며 각 layui-tab-item 탭의 lay-id 와 일치합니다. Layui의 element 모듈은 렌더링과 기능을 처리합니다. element 모듈을 포함하여 추가 JavaScript가 필요하지 않습니다.

아코디언 : 아코디언은 비슷한 패턴을 따릅니다.

 <code class="html"><div class="layui-collapse" lay-accordion> <div class="layui-colla-item"> <h2 class="layui-colla-title">Title 1</h2> <div class="layui-colla-content">Content for Accordion 1</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">Title 2</h2> <div class="layui-colla-content">Content for Accordion 2</div> </div> </div></code>

로그인 후 복사

다시, 구조는 선언적입니다. lay-accordion 사용한 layui-collapse 아코디언 기능을 가능하게합니다. 각 layui-colla-item layui-colla-title 의 제목과 layui-colla-content 의 내용을 나타내는 섹션을 나타냅니다. element 모듈은 확장 및 붕괴 동작을 처리합니다.

회전 목마 : 회전 목마 모듈에는 약간 더 많은 구성이 필요합니다.

 <code class="html"><div class="layui-carousel" id="test1" lay-filter="test"> <div carousel-item> <div><img src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt=""></div> <div><img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt=""></div> <div><img src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt=""></div> </div> </div> <script> layui.use(&#39;carousel&#39;, function(){ var carousel = layui.carousel; carousel.render({ elem: &#39;#test1&#39; ,width: &#39;100%&#39; //设置容器宽度,height: &#39;200px&#39; ,arrow: &#39;always&#39; //始终显示箭头,interval: 3000 //自动切换时间}); }); </script></code>

로그인 후 복사

여기에서 layui-carousel 과 ID가있는 회전 목마 용기를 지정합니다. carousel-item DIV에는 회전식 항목이 포함되어 있습니다. JavaScript 코드는 layui.carousel.render() 를 사용하여 폭, 높이, 화살표 디스플레이 및 자동 전환 간격과 같은 옵션으로 회전 목마를 초기화합니다.

Layui의 요소 모듈 모양을 사용자 정의 할 수 있습니까?

예, Layui의 요소 모듈은 광범위한 사용자 정의 옵션을 제공합니다. CSS를 통해 외관을 수정할 수 있습니다. Layui는 모듈 식 CSS 구조를 사용하여 특정 요소를 대상으로 비교적 간단합니다. 더 높은 특이성으로 자신의 CSS 규칙을 만들어 기본 스타일을 재정의 할 수 있습니다. 예를 들어 탭의 배경색을 변경합니다.

 <code class="css">.layui-tab-title li.layui-this { background-color: #f00; /* Change to your desired color */ }</code>

로그인 후 복사

이 CSS 규칙은 활성 탭의 기본 배경색을 무시합니다. 각 클래스 이름을 대상으로하여 모든 Layui 요소의 색상, 글꼴, 크기, 간격 및 기타 시각적 측면을 유사하게 수정할 수 있습니다. Layui의 CSS 다음에 사용자 정의 CS를 포함하여 스타일이 우선하는지 확인하십시오. Layui의 테마 시스템을 사용하여 응용 프로그램에 대해 완전히 다른 시각적 스타일을 만들 수 있습니다.

Layui의 요소 모듈을 다른 JavaScript 프레임 워크와 통합하려면 어떻게해야합니까?

Layui의 요소 모듈은 일반적으로 다른 JavaScript 프레임 워크와 호환되지만 잠재적 충돌을 염두에 두어야합니다. Layui는 주로 자체 이벤트 시스템을 사용하며 글로벌 변수에 크게 의존하지 않아 충돌 가능성을 줄입니다. 그러나 예기치 않은 동작을 방지하기 위해 이벤트 핸들러 및 DOM 조작이 올바르게 관리되도록해야합니다. 예를 들어, React, Vue 또는 Angular와 같은 프레임 워크를 사용하는 경우 프레임 워크의 구성 요소 수명주기에 Layui의 요소를 이상적으로 통합해야합니다. 이를 통해 DOM 조작 문제를 피하고 Framework의 렌더링주기 내에서 Layui의 요소가 올바르게 업데이트되도록합니다. 경우에 따라 프레임 워크의 렌더링 프로세스를 수용하기 위해 Layui 모듈을 초기화하는 방법을 조정해야 할 수도 있습니다. 일반적으로 프레임 워크의 구성 요소 구조 내에서 Layui 모듈을 사용하고 구성 요소의 수명주기 내에서 DOM 상호 작용을 관리하는 것이 통합을위한 최선의 방법입니다.