Home > Article > Web Front-end > How to use Layui to implement responsive tab functionality

How to use Layui to implement responsive tab functionality

王林Original: 2023-10-27 12:37:431413browse

How to use Layui to implement responsive tab function

In front-end development, tabs are a common interaction method that can effectively organize page content. Improve user experience. When implementing the tab function, Layui is a very practical tool library. This article will introduce how to use Layui to implement responsive tab functions and provide specific code examples.

1. Introduction to Layui

Layui is a front-end UI framework developed by Xianxin (Xianxin is a famous domestic front-end developer). It is lightweight, easy to use, and efficient. Layui provides a wealth of components and interfaces to quickly build beautiful and feature-rich front-end pages.

2. The HTML structure of the tab

In Layui, the HTML structure of the tab follows certain specifications. The following is the standard structure of the tab:

<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>

In the above code, .layui-tab is the container of the entire tab, which contains .layui-tab-title and .layui-tab-content are two parts. .layui-tab-title is the container of the tab title. Each tab title corresponds to a <li> element, where .layui-this means The currently selected tab. .layui-tab-content is a container for tab content. Each tab content corresponds to a <div> element, where <code>.layui-show means The currently displayed tab content.

3. Use Layui to achieve the tab effect

<li>Introduce the Layui library

First, in the tag Introduce Layui’s CSS and JS files:

<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 tab

After the page is loaded, call Layui’s elementmoduleinit()Method to initialize the tab:

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

<li>Responsive layout

In order to achieve a responsive tab effect, you can use Layui's Responsive module. Wrap a <div> element outside the tab container and set <code>class="layui-tab layui-tab-card" to implement a card-style tab layout. Then, call the resize() method of the Responsive module to re-render the tab when the window size changes:

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

4. Complete sample code

The following is a complete sample code that shows how to use Layui to implement responsive tab functionality. Please introduce the CSS and JS files of the Layui library before use.

<!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>

Through the above code examples, we can easily use Layui to implement responsive tab functions. In actual development, you can modify the style and content of the tab according to your own needs, and add some other functions. Hope this article helps you!

The above is the detailed content of How to use Layui to implement responsive tab functionality. For more information, please follow other related articles on the PHP Chinese website!

css layui html 接口 class JS this li ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How to use Layui to implement responsive tab functionality

Related articles