How to use Layui to implement responsive tab functionality-JS Tutorial-php.cn

How to use Layui to implement responsive tab functionality

王林

Release： 2023-10-27 12:37:43

Original

1518 people have browsed it

How to use Layui to implement responsive tab functionality

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>

Copy after login

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 .layui-show means The currently displayed tab content.

3. Use Layui to achieve the tab effect

<li>Introduce the Layui library

First, in the <head> 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>

Copy after login

<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();
});

Copy after login

<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 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();
  });
});

Copy after login

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>

Copy after login

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!