Layuiを使用して折りたたみ可能なコンテンツ表示パネル機能を実装する方法-jsチュートリアル-php.cn

Layuiを使用して折りたたみ可能なコンテンツ表示パネル機能を実装する方法

PHPz

リリース： 2023-10-24 11:45:18

オリジナル

1589 人が閲覧しました

Layuiを使用して折りたたみ可能なコンテンツ表示パネル機能を実装する方法

Layui を使用して折りたたみ可能なコンテンツ表示パネル機能を実装する方法

はじめに:
Layui は、jQuery に基づくモジュール式フロントエンド UI フレームワークであり、次の機能を提供します。豊富な UI コンポーネントと使いやすいインターフェイスにより、開発者はさまざまな Web インターフェイスを迅速に構築できます。その中でも、折りたたみ可能なコンテンツ表示パネルは一般的な UI コンポーネントの 1 つであり、ユーザーのニーズに応じてコンテンツを動的に展開または折りたたむことができ、より優れたインタラクティブエクスペリエンスを提供します。この記事では、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>

ログイン後にコピー

上記のコードを通じて、2 つのパネル項目を含むコンテンツ表示パネルを作成します。各パネル項目にはタイトルとコンテンツ領域が含まれます。ユーザーはパネルのタイトルをクリックして、コンテンツ領域を展開または折りたたむことができます。

3. Layui パネルコンポーネントを初期化する
ページが読み込まれた後、layui.use() メソッドを使用して Layui パネルコンポーネントを初期化する必要があります。 Collapsemodule を渡すことでパネルを初期化できます。以下は、パネルコンポーネントを初期化するコード例です。

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

ログイン後にコピー

上記のコードでは、layui.use() メソッドを通じて折りたたみモジュールを導入して使用し、collapse.render を通じてパネルコンポーネントをレンダリングします。（）方法。このうち、elem はパネルコンポーネントのセレクタ、accordion はアコーディオンモードをオンにするかどうかのパラメータで、デフォルト値は false です。アコーディオンモードでは、同時に展開できるパネル項目は 1 つだけです。

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 中国語 Web サイトの他の関連記事を参照してください。