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

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

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

1. Layui の紹介

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

2. タブの HTML 構造

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

 
 
选项卡1
 
选项卡2
 
选项卡3
 
 
 
内容1
 
内容2
 
内容3
 
 

上記のコードでは、.layui-tabは、.layui-tab- を含むタブ全体のコンテナです。 titleと.layui-tab-contentは 2 つの部分です。.layui-tab-titleはタブ タイトルのコンテナです。各タブ タイトルは

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

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

        
  
 
 
选项卡1
 
选项卡2
 
选项卡3
 
 
 
内容1
 
内容2
 
内容3