layui选项卡演示

layui选项卡演示

    • .1 引入layui
    • 2. 选项卡演示实列
    • 3.js分离的代码
    • 4运行结果

在前端开发中,选项卡常用于展示多个内容模块,提供用户友好的界面交互方式。layui作为一款简洁易用的前端框架,提供了丰富的组件库,其中包括了强大且易用的选项卡组件。

本文将介绍layui选项卡的基本用法以及常用功能,并通过实例演示具体步骤。

.1 引入layui

首先,我们需要在HTML文件中引入layui的相关文件。可以从layui的官方网站下载最新版本的layui,并将其解压到项目目录中。然后,在HTML文件的标签内添加以下代码:

html
<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

2. 选项卡演示实列

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file = "common/header.jsp" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div><!-- 头部区域(可配合layui 已有的水平导航) --><ul class="layui-nav layui-layout-left"></ul><!-- 个人头像及账号操作 --><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="">Your Profile</a></dd><dd><a href="">Settings</a></dd><dd><a href="login.jsp">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域(可配合layui已有的垂直导航) --><ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu"></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;"><div class="layui-tab" lay-filter="demo" lay-allowclose="true"><ul class="layui-tab-title"><li class="layui-this" lay-id="11">网站设置</li><li lay-id="22">用户管理</li><li lay-id="33">权限分配</li><li lay-id="44">商品管理</li><li lay-id="55">订单管理</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 class="layui-tab-item">内容4</div><div class="layui-tab-item">内容5</div></div>
</div> </div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div>
</div>
<script src="static/index.js" ></script>
</body></html>

3.js分离的代码

var element,layer,util,$;layui.use(['element', 'layer', 'util'], function(){element = layui.element,layer = layui.layer,util = layui.util,$ = layui.$$.ajax({url:"{pageContext.request.contextPath}/permisson.action?methodName=menus",dataType:'json',success:function(data){console.log(data);	 var htmlStr ='';$.each(data,function(i,n){htmlStr+='<li class="layui-nav-item layui-nav-itemed">';htmlStr+='<a class="" href="javascript:;">'+n.text+'</a>';if (n.hasChildren) {var children=n.children;htmlStr+=' <dl class="layui-nav-child">';$.each(children,function(idx,node){htmlStr+=' <dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id +'\')">'+node.text+'</a></dd>';console.log(node.text);	 });htmlStr+=' </dl>';}htmlStr+='</li>'; console.log(n.text);	 });$("#menu").html(htmlStr);element.render('menu');}});});
/*** */
function openTab(title,content,id) {var $node=$('li[lay-id="'+id+'"]')console.log($node);if ($node.length==0) {element.tabAdd('demo', {title: title,content: content,id: id //实际使用一般是规定好的id,这里以时间戳模拟下})}}

4运行结果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/1199.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

J2EEXML建模

目录 用一个xml-config文件实例&#xff1a; 先看config.xml文件 再看 ActionModel ConfigModel ActionNotFoundException ForwardNotFoundException ConfigModelFactory ActionDuplicateDefinitionException ForwardDuplicateDefinitionException InvalidPathExcept…

《MySQL》事务

文章目录 概念事务的操作属性&#xff08;aicd&#xff09; 概念 一组DML语句&#xff0c;这组语句要一次性执行完毕&#xff0c;是一个整体 为什么要有事务&#xff1f; 为应用层提供便捷服务 事务的操作 有一stu表 # 查看事务提交方式(默认是开启的) show variables like au…

【PAT】1022.D进制的A+B

【PAT】1022.D进制的AB 输入两个非负 10 进制整数 A 和 B ( ≤ 2 ​ 30 2​^{30} 2​30​ −1)&#xff0c;输出 AB 的 D (1<D≤10)进制数。 输入格式&#xff1a; 输入在一行中依次给出 3 个整数 A、B 和 D。 输出格式&#xff1a; 输出 AB 的 D 进制数。 输入样例&am…

pytorch深度学习逻辑回归 logistic regression

# logistic regression 二分类 # 导入pytorch 和 torchvision import numpy as np import torch import torchvision from torch.autograd import Variable import torch.nn as nn import torch.nn.functional as F import torch.optim as optim import matplotlib.pyplot as …

Kafka第二课-代码实战、参数配置详解、设计原理详解

一、代码实战 一、普通java程序实战 引入依赖 <dependencies><dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>2.4.1</version></dependency><dependency>&l…

docker 部署网页相关服务

docker 部署网页相关服务 // 安装SFTP 1.拉取镜像 docker pull netresearch/sftp 2.启动后容器&#xff1a; docker run --name Sftp -v E:\wwwroot\julong\fsnfiles:/home/sftpuser/upload --privilegedtrue -p 22:22 -d netresearch/sftp sftpuser:123456:::upload //安装ftp…

Ceph的安装部署

文章目录 一、存储基础1.1 单机存储设备1.2 单机存储的问题1.3分布式存储&#xff08;软件定义的存储 SDS&#xff09; 二、Ceph 简介2.1 Ceph 优势2.2 Ceph 架构2.3 Ceph 核心组件2.4 Pool、PG 和 OSD 的关系&#xff1a;2.5 OSD 存储后端2.6 Ceph 数据的存储过程2.7 Ceph 版本…

面向初学者的卷积神经网络

卷积神经网络在机器学习中非常重要。如果你想做计算机视觉或图像识别任务&#xff0c;你根本离不开它们。但是很难理解它们是如何工作的。 在这篇文章中&#xff0c;我们将讨论卷积神经网络背后的机制、它的优点和应用领域。 什么是神经网络&#xff1f; 首先&#xff0c;让…

架构训练营:3-3设计备选方案与架构细化

3架构中期 什么是备选架构&#xff1f; 备选架构定义了系统可行的架构模式和技术选型 备选方案筛选过程 头脑风暴 &#xff1a;对可选技术进行排列组合&#xff0c;得到可能的方案 红线筛选&#xff1a;根据系统明确的约束和限定&#xff0c;一票否决某些方案&#xff08;主要…

Docker 安装 Nginx,并实现负载均衡

1、获取 nginx 的镜像 # 默认是latest版本docker pull nginx 2、运行 nginx 容器 docker run --name nginx-80 -p 80:80 --rm -d nginx# --name nginx-80 设定容器的名称# -p 80:80 端口进行映射&#xff0c;将本地的80端口映射到容器内部的80端口# --rm 表示容器退出后直接…

GreenPlum on K8s

https://pgconf.in/files/presentations/2019/01-0103-Greenplum_for_Kubernetes_PGConf_India_2019.pdf About the Greenplum Operator | VMware Tanzu Greenplum for Kubernetes Docs VMware Greenplum - Greenplum Database | VMware Tanzu 数据库上云最佳选择—Greenplum…

Vue中v-html用法以及指令汇总

操作数组的方法 &#xff1a; push&#xff1a;数组最后位置新增元素 pop&#xff1a; 删除最后一个元素 shift&#xff1a; 删除第一个元素 unshift&#xff1a;往前面加一个元素 splice&#xff1a;在数组的指定位置插入、删除、替换一个元素 sort&#xff1a; 数组排序…

卷积神经网络(CNN)原理详解

近些年人工智能发展迅速&#xff0c;在图像识别、语音识别、物体识别等各种场景上深度学习取得了巨大的成功&#xff0c;例如AlphaGo击败世界围棋冠军&#xff0c;iPhone X内置了人脸识别解锁功能等等&#xff0c;很多AI产品在世界上引起了很大的轰动。 而其中 卷积神经网络&am…

【微信小程序-uniapp】CustomButton 自定义常用吸底按钮组件

1. 效果图 2. 组件完整代码 <template><view:class="[custom-btn flex-center, size == big ? big : mid, type == primary ? primary : info, plain ? plain : , disabled ? disabled : , round ? round : ]"

【 LeetCode 算法】Add Strings 字符串相加

文章目录 Add Strings 字符串相加问题描述&#xff1a;分析代码 Tag Add Strings 字符串相加 问题描述&#xff1a; 给定两个字符串形式的非负整数 num1 和num2 &#xff0c;计算它们的和并同样以字符串形式返回。 你不能使用任何內建的用于处理大整数的库&#xff08;比如 Bi…

神经网络之VGG

目录 1.VGG的简单介绍 1.2结构图 3.参考代码 VGGNet-16 架构&#xff1a;完整指南 |卡格尔 (kaggle.com) 1.VGG的简单介绍 经典卷积神经网络的基本组成部分是下面的这个序列&#xff1a; 带填充以保持分辨率的卷积层&#xff1b; 非线性激活函数&#xff0c;如ReLU&a…

挖矿记录+解决方案:利用GitLab组件对服务器进行挖矿导致CPU占用200%

文章目录 什么是云服务器挖矿?事件记录事件分析产生影响解决方案后期预防什么是云服务器挖矿? 云服务器挖矿是指利用云服务器从事赚取比特币的活动。比特币是一种虚拟数字货币,挖矿是将一段时间内比特币系统中发生的交易进行确认,并记录在区块链上形成新区块的过程。 用于…

Mybatis:传参+提交事务(自动or手动)+sql多表关联查询(两种方法)

目录 一、参数两种类型&#xff1a; 二、传参的几种方法&#xff1a; 三、提交事务 四、sql多表关联查询(两种方法) 一、参数两种类型&#xff1a; 1.#{参数}&#xff1a;预编译方式&#xff0c;更安全&#xff0c;只用于向sql中传值&#xff1b; select * from admin w…

Unifying Large Language Models and Knowledge Graphs: A Roadmap

本文依旧是LLM系列的相关文章&#xff0c;LLM与知识图谱结合&#xff0c;针对《Unifying Large Language Models and Knowledge Graphs: A Roadmap》的翻译。 统一大语言模型与知识图谱&#xff1a;路线图 摘要1 引言2 背景2.1 大语言模型&#xff08;LLMs&#xff09;2.1.1 仅…

只需一个提示词解除GPT-4的字符限制!

ChatGPT的内存有限,GPT-3.5-turbo的限制为4897个令牌,而GPT-4的最大限制为8192。如果您在使用GPT-4进行聊天时超过8192个令牌(约6827个单词),它就会开始遗忘。我想出了一种新的技巧,可以轻松将对话扩展10倍。 这种技巧不会将对话中的每个字都保存到内存中。当您去开会时,会有人…