Layui를 사용하여 접이식 콘텐츠 표시 패널 기능을 구현하는 방법-JS 튜토리얼-php.cn

Layui를 사용하여 접이식 콘텐츠 표시 패널 기능을 구현하는 방법

PHPz

풀어 주다： 2023-10-24 11:45:18

원래의

1528명이 탐색했습니다.

Layui를 사용하여 접이식 콘텐츠 표시 패널 기능을 구현하는 방법

Layui를 사용하여 축소 가능한 콘텐츠 표시 패널 기능을 구현하는 방법

소개:
Layui는 jQuery를 기반으로 하는 모듈식 프런트 엔드 UI 프레임워크로 개발자가 신속하게 작업할 수 있도록 풍부한 UI 구성 요소와 사용하기 쉬운 인터페이스를 제공합니다. 다양한 웹 인터페이스를 구축하세요. 그중 접이식 콘텐츠 표시 패널은 사용자의 필요에 따라 콘텐츠를 동적으로 확장하거나 축소하여 더 나은 대화형 경험을 제공하는 일반적인 UI 구성 요소 중 하나입니다. 이 글에서는 Layui를 사용하여 접이식 콘텐츠 디스플레이 패널 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. Layui 라이브러리 가져오기
Layui를 사용하기 전에 Layui 라이브러리의 관련 파일을 소개해야 합니다. CDN을 통해 도입할 수도 있고, 프로젝트에 관련 파일을 다운로드할 수도 있습니다. 다음은 Layui 라이브러리 및 관련 스타일 파일을 소개하는 코드 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可折叠的内容展示面板</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.all.js"></script>
</head>
<body>
    <!-- 内容展示面板的HTML结构 -->
</body>
</html>

로그인 후 복사

2. 접을 수 있는 콘텐츠 표시 패널 만들기
HTML 파일에서는 Layui의 패널 컴포넌트인layui-collapse 패널을 통해 접을 수 있는 콘텐츠 표시를 쉽게 만들 수 있습니다. 다음은 간단한 패널 구성 요소의 코드 예입니다.

<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">面板1</h2>
        <div class="layui-colla-content">
            面板1的内容
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">面板2</h2>
        <div class="layui-colla-content">
            面板2的内容
        </div>
    </div>
    <!-- 添加更多面板项 -->
</div>

로그인 후 복사

위 코드를 사용하여 두 개의 패널 항목이 포함된 콘텐츠 표시 패널을 생성합니다. 각 패널 항목에는 제목과 콘텐츠 영역이 포함됩니다. 사용자는 패널 제목을 클릭하여 콘텐츠 영역을 확장하거나 축소할 수 있습니다.

3. Layui 패널 컴포넌트 초기화
페이지가 로드된 후layui.use() 메소드를 통해 Layui 패널 컴포넌트를 초기화해야 합니다. Collapse모듈을 전달하면 패널을 초기화할 수 있습니다. 다음은 패널 컴포넌트를 초기화하는 코드 예시입니다.

<script>
layui.use(['collapse'], function() {
    var collapse = layui.collapse;
    collapse.render({
        elem: '.layui-collapse',
        accordion: true // 是否开启手风琴模式，默认值为false
    });
});
</script>

로그인 후 복사

위 코드에서는layui.use() 메소드를 통해 축소 모듈을 도입하여 사용하고, Collapse.render() 메소드를 통해 패널 컴포넌트를 렌더링했습니다. 그 중 elem은 패널 컴포넌트의 선택자이고, 아코디언은 아코디언 모드를 켤지 여부를 나타내는 파라미터이며, 기본값은 false입니다. 아코디언 모드에서는 하나의 패널 항목만 동시에 확장할 수 있습니다.

4. 사용자 정의 스타일
패널 구성 요소를 필요에 맞게 만들기 위해 CSS 스타일을 사용자 정의하여 패널의 모양을 수정할 수 있습니다. 다음은 사용자 정의 스타일의 간단한 코드 예입니다.

<style>
.layui-colla-item {
    margin-bottom: 10px;
    border: 1px solid #e6e6e6;
}
.layui-colla-title {
    padding: 10px;
    background-color: #f2f2f2;
    cursor: pointer;
}
.layui-colla-content {
    padding: 10px;
    display: none;
}
.layui-colla-content.show {
    display: block;
}
</style>

로그인 후 복사

위 스타일을 사용하여 패널 항목의 테두리 스타일, 제목의 배경색 및 콘텐츠의 기본 표시 모드를 수정합니다.

요약:
Layui를 사용하면 폴더블 콘텐츠 디스플레이 패널 기능을 쉽게 구현하여 사용자에게 더 나은 대화형 경험을 제공할 수 있습니다. Layui 라이브러리를 도입하고, 패널 구성요소를 생성하고, 스타일을 초기화 및 사용자 정의함으로써 요구 사항에 맞는 접이식 콘텐츠 표시 패널을 빠르게 구축할 수 있습니다. 이 글의 소개가 여러분에게 도움이 되기를 바랍니다.

위 내용은 Layui를 사용하여 접이식 콘텐츠 표시 패널 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!