ホームページ >ウェブフロントエンド >jsチュートリアル >Layuiを使用して折りたたみ可能なコンテンツ表示パネル機能を実装する方法
Layuiを使用して折りたたみ可能なコンテンツ表示パネル機能を実装する方法
- PHPzオリジナル
- 2023-10-24 11:45:181589ブラウズ
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 サイトの他の関連記事を参照してください。