ホームページ > 記事 > ウェブフロントエンド > Layui を使用してレスポンシブタブ機能を実装する方法

Layui を使用してレスポンシブタブ機能を実装する方法

王林オリジナル: 2023-10-27 12:37:431413ブラウズ

フロントエンド開発では、タブはページコンテンツを効果的に整理できる一般的な対話方法であり、ユーザーエクスペリエンスを向上させます。タブ機能を実装する場合、Layuiは非常に実用的なツールライブラリです。この記事では、Layui を使用してレスポンシブタブ機能を実装する方法と、具体的なコード例を紹介します。

1. Layui の紹介

Layui は Xianxin (Xianxin は有名な国内フロントエンド開発会社) が開発したフロントエンド UI フレームワークで、軽量で使いやすく、効率的です。。 Layui は、美しく機能豊富なフロントエンドページを迅速に構築するための豊富なコンポーネントとインターフェイスを提供します。

2. タブの HTML 構造

Layui では、タブの HTML 構造は特定の仕様に従います。タブの標準構造は次のとおりです。

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
  </div>
</div>

上記のコードでは、.layui-tab は、.layui-tab- を含むタブ全体のコンテナです。 title と .layui-tab-content は 2 つの部分です。 .layui-tab-title はタブタイトルのコンテナです。各タブタイトルは <li> 要素に対応します。ここで、.layui-this は意味を意味します現在選択されているタブ。 .layui-tab-content はタブコンテンツのコンテナです。各タブコンテンツは <div> 要素に対応します。ここで、<code>.layui-show は、現在表示されているタブの内容。

3. Layui を使用してタブ効果を実現する

<li>Layui ライブラリを紹介します

まず、 tag Layui の CSS および JS ファイルを紹介します:

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>

<li>Initialization タブ

ページがロードされた後、Layui の elementmoduleinit を呼び出します()タブを初期化する方法:

layui.use('element', function(){
  var element = layui.element;
  
  // 初始化选项卡
  element.init();
});

<li>レスポンシブレイアウト

レスポンシブタブ効果を実現するには、Layui の Responsive# を使用できます。 ## モジュール。タブコンテナーの外側で

要素をラップし、class="layui-tablayui-tab-card" を設定して、カードスタイルのタブレイアウトを実装します。次に、Responsive モジュールの resize()

 メソッドを呼び出して、ウィンドウ サイズが変更されたときにタブを再レンダリングします。

layui.use('element', function(){
  var element = layui.element;
  
  // 响应式选项卡布局
  $(window).on('resize', function(){
    element.tabResize();
  });
});

4. サンプルコードを完成させます

以下は、Layui を使用してレスポンシブタブ機能を実装する方法を示す完全なサンプルコードです。ご利用前にLayuiライブラリのCSS、JSファイルを導入してください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>利用Layui实现响应式的选项卡功能</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
</head>
<body>
  <div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
      <li class="layui-this">选项卡1</li>
      <li>选项卡2</li>
      <li>选项卡3</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">内容1</div>
      <div class="layui-tab-item">内容2</div>
      <div class="layui-tab-item">内容3</div>
    </div>
  </div>

  <script>
    layui.use('element', function(){
      var element = layui.element;
      
      // 初始化选项卡
      element.init();

      // 响应式选项卡布局
      $(window).on('resize', function(){
        element.tabResize();
      });
    });
  </script>
</body>
</html>

上記のコード例を通じて、Layui を使用してレスポンシブタブ関数を簡単に実装できます。実際の開発では、必要に応じてタブのスタイルや内容を変更したり、その他の機能を追加したりできます。この記事がお役に立てば幸いです!

以上がLayui を使用してレスポンシブタブ機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css layui html 接口 class JS this li ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript を使用して、アスペクト比の効果を維持しながら、ページの下部までスクロールするときに自動的に読み込まれるコンテンツを拡大縮小するにはどうすればよいですか?次の記事：JavaScript を使用して、アスペクト比の効果を維持しながら、ページの下部までスクロールするときに自動的に読み込まれるコンテンツを拡大縮小するにはどうすればよいですか?

続きを見る

Layui を使用してレスポンシブ タブ機能を実装する方法

関連記事

Layui を使用してレスポンシブタブ機能を実装する方法