Table of contents
3.PermissionDao class (add attribute)
5. Simple style Modify the style of the tab:
6. Regarding the use of attribute settings in style
7. Introduction to Element components:
8. Introduction to updating and re-rendering pages in Layui
9. About project reconstruction:
9.1 What is project refactoring?
9.2 What are the benefits of project refactoring?
Preface: Based on our understanding of the previous article, it will become so easy to learn to add tabs. Next, we will continue to implement our click on the left side to realize the function of adding tabs.
1. Realize the effect:
2. Ideas:
1. We set the click event for the secondary menu to open the corresponding tab .
2. Change the content to the content corresponding to the click (passed in the data to the method)Note: Three attributes 1. The name of the title tab corresponds to the left click name
2. The content of the content tab
3. The id tab corresponds to the id of the left clickThere is no such method as element, you need to extend the permission to element
3. Only one click is limited ()
4. Click on the left side, the tab can be switched accordingly
5. Click the tab to switch the corresponding content
3.PermissionDao class (add attribute)
public List<TreeVo<Permission>> menu(Permission Permission ) throws Exception {
List<TreeVo<Permission>> treeov = new ArrayList<TreeVo<Permission>>();
//数据库中的数据
List<com.zking.entity.Permission> list = this.list(Permission, null);
//循环外层
for (Permission p : list) {
TreeVo<Permission> treeVo = new TreeVo<>();//实例TreeVo
treeVo.setId(p.getId()+"");//将p中的id添加到TreeVo中
treeVo.setText(p.getName());//文本
treeVo.setParentId(p.getPid()+"");
Map<String, Object> map = new HashMap<String, Object>();
map.put("solf", p);//(solf指的是Permission中的所有属性值)
treeVo.setAttributes(map);//Attributes节点属性，这时候treeVo就有了所有属性
treeov.add(treeVo);
}
//调用工具类build
return BuildTree.buildList(treeov, "0");
}4. Home page: jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/public.jsp"%>
<!DOCTYPE>
<html>
<head>
<script type="text/javascript"></script>
<!-- 选项卡的css -->
<link rel="stylesheet" href="static/css/main.css" media="all">
<!-- 选项卡的js -->
<script type="text/javascript" src="static/js/main.js"></script>
</head>
<style type="text/css">
.he{
background-color: red;
}
body {
background-image: url("static/images/R-C%20(2).jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /*关键*/
background-position: center;
}
</style>
<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">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
lay-header-event="menuLeft"><i
class="layui-icon layui-icon-spread-left"></i></li>
<!-- Top导航栏 -->
<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item"><a href="javascript:;">nav
groups</a>
<dl class="layui-nav-child">
<dd>
<a href="">menu 11</a>
</dd>
<dd>
<a href="">menu 22</a>
</dd>
<dd>
<a href="">menu 33</a>
</dd>
</dl></li>
</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;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
</fieldset>
<!-- 这里的选项卡名称是demo -->
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11" color:red>网站设置</li>
<li lay-id="22">用户管理</li>
<li lay-id="33">权限分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">订单管理</li>
<li class="he" 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>
</body>
</html>5. Simple style Modify the style of the tab:
Idea: In fact, it is very simple, that is, we use the principle of class selectors in JavaScript.
Analysis: The nesting relationship 1 in our jsp page contains 2 contains 3. When we click the menu on the left, a new li tag will be added to the tab, and the corresponding css attribute will be assigned:
6. Regarding the use of attribute settings in style
/*tab 选项卡*/ /* 去掉下边长灰色线 */ .layui-tab-title { border: none; } /* 给tab选项加背景颜色，5个像素的圆角，每个选项隔开，字体为白式 */ .layui-tab>.layui-tab-title .layui-this { background-color: #5cb85c; border-radius: 5px; margin-left: 10px; color: white; } /* 去选中选项的下边线 */ .layui-tab>.layui-tab-title .layui-this:after { border: none; } /* 选中后，背景颜色改变，5个像素的圆角 */ .layui-tab>.layui-tab-title .layui-this{ background-color: #f0ad4e; border-radius: 50px; } /* 选中后，字体为白色 */ .layui-tab>.layui-tab-title .layui-this{ color: white; }
Modify the color value: In the above code, you can change the background color and text color when selected according to the value of the sum
background-colorand value.colorColors can be set using a color name, a hexadecimal value, or an RGB value.
Here I am using the embedded css, which can also be set on the jsp page:
This completes our simple tab styling!
7. Introduction to Element components:
Element selectors: Layui uses
$functions as element selectors, similar to how jQuery uses them. For example,$('#id')select elements by ID,$('.class')select elements by class, etc.Element operation: Layui provides some common operation methods, such as
show()andhide()for showing and hiding elements,addClass()andremoveClass()for adding and removing classes,attr()andremoveAttr()for setting and removing attributes, etc.
table.render()Data table: The data table can be rendered through the method, and a series of configuration options are provided, such as table header, data content, pagination, etc. Tags can be used<table>to define the structure of the table.Form validation: Layui provides a form validation method, which can be used to
form.verify()define form validation rules, and toform.on()monitor form submission events through methods to implement form validation and submission operations.Pop-up window: A window can pop up through
layer.open()the method, and the title, content, button and other attributes of the window can be set. You can also pop up different types of dialog boxes through methods such aslayer.alert(), and so on.layer.confirm()Tabs: Layui provides a simple tabs component, you can use
element.tabAdd()methods to add tabs andelement.tabChange()methods to switch tabs. The corresponding tag structure needs to be defined in the HTML page.Paging: Through
laypage.render()the method, the pager can be rendered, and parameters and event callback functions can be set. It can be done bylayui.laypagecalling the related pagination operation.Modular loading: Layui uses a modular mechanism to load components, and uses
layui.use()methods to load and use specified modules. Each module has corresponding functions, and the functions of Layui can be extended by introducing and using modules.The above are some common methods and components in the Layui component library, and there are more functions and components available.
We can refer to layui's official website online example- Layui
8. Introduction to updating and re-rendering pages in Layui
In Layui, if you need to update and re-render the page, you can use some methods and mechanisms provided by Layui. Here are some commonly used update rendering methods:
- Update table : If you need to update the data table, you can use
table.reload()the method. This method can reload the table data, refresh the table style, and supports some parameters to set the reload behavior of the table, such as re-reading interface data, reloading sorting, etc.// 重新加载表格数据 table.reload('tableId', { where: { // 设置参数 key: value } });2. Update the form : Layui provides
form.val()methods to dynamically update the value of the form. This method can be used to set the value of form elements, including input boxes, drop-down selection boxes, radio boxes, etc.// 更新表单元素的值 form.val('formId', { field1: value1, field2: value2 });3. Update the pager : When using Layui's paging component, you can use
laypage.render()the method to re-render the pager. This method can be used to reset the paging parameters and event callback function, thereby updating the display and behavior of the pager.// 重新渲染分页器 laypage.render({ elem: 'pageId', count: total, curr: current, jump: function(obj, first) { if (!first) { // 分页切换事件回调 // 根据 obj.curr 获取当前页码进行数据加载或其他操作 } } });4. Refresh interface : If you need to refresh the page content, you can use
location.reload()the method to reload and refresh the page.// 刷新页面 location.reload();The above are some commonly used update rendering methods. In actual development, you can choose an appropriate method to perform update and re-render operations according to specific needs and scenarios. It should be noted that when using Layui components, you may need to consult the corresponding documents according to the specific components and usage methods to learn more detailed update and rendering methods.
9. About project reconstruction:
9.1 What is project refactoring?
Project refactoring refers to the redesign and transformation of existing project structures and codes.
9.2 What are the benefits of project refactoring?
To improve the maintainability, scalability and readability of the project. Refactoring aims to improve the internal quality of software without changing its external behavior.
10. Summary:
Layui's tab component uses
<ul>and<li>tag structure to define the title of the tab, and uses<div>the tag structure to define the content of the tab.Use
element.tabAdd()the method to add a tab, and create a new tab by specifying a title and content.// 添加选项卡 element.tabAdd('tabId', { title: 'Tab Title', content: 'Tab Content' });3. Use
element.tabChange()the method to switch tabs, and switch to the corresponding tab by specifying the index or ID of the tab.// 切换选项卡 element.tabChange('tabId', 'tabIndex'); // 使用索引切换 element.tabChange('tabId', 'tabId'); // 使用ID切换
Well, we will share here today, I hope this blog post can be of great help to your study and work! ! !
