精华内容
下载资源
问答
  • 2019-12-20 16:22:44
    • 1、Layui 表格一个单元格显示多行数据
    .layui-table-cell {
        height: auto;
        text-overflow: inherit;
        overflow: visible;
        white-space: normal;
        word-wrap: break-word;
    }
    
    • 2、Layui表格,单元格宽度溢出,鼠标移入时会出现下拉框,点击时会弹窗显示所有单元格内容,影响美观,可在表格渲染完毕后的done事件中解绑该事件
    $('.layui-table-body').off('mouseenter','td');
    • 3、Layui控件会重写当前div(传入layui控件的元素),一些style不会生效,要获取当前控件的兄弟元素或父子元素:
    • <div id="likeLevel' + i + '">' + 这里是控件div,可能在表格里,因此每个元素设置id不方便 + '</div><div style="display:none;">' + 把一个其他地方用到的属性隐藏在这里 +'</div>

      下文中{其他作用域}this.spanthis可以指向控件内的元素,但不能this.next() {this本身是一个包含了当前控件的对象,但不是指向某一个元素,所以this.parent()指向别的地方会报错}

      因此,想要使用旁边元素,可以先指向子元素,在指到父元素:

      this.span.parent().next().text();

     

     

     

    更多相关内容
  • 使用layUI之前首先要下载LayUI库,因为使用的是LayUI中提供的样式 所以使用前要在head中加载环境,主要加载css和js。加载前先将包导入项目中然后加载 <!DOCTYPE html> <html> <head> <meta ...

    练习功能

    一、布局容器+栅格
    1.布局
    2.栅格基本使用
    3.按键
    二、导航界面
    1.水平导航+子导航
    2.垂直导航
    3.边侧导航

    使用layUI之前首先要下载LayUI库,因为使用的是LayUI中提供的样式
    所以使用前要在head中加载环境,主要加载css和js。加载前先将包导入项目中然后加载
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <!--加载LayUI中的css-->
    <link rel="stylesheet" type="text/css" href="/layui-v2.6.8/layui/css/layui.css">
    <!--加载LayUI中的js-->
    <script src="/layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <title>导航界面</title>
    </head>
    

    一、布局和栅格

    1.布局

    就是在页面中显示信息内容的位置
    a)边侧留白

    <div class="layui-container" style="background-color:navajowhite;height:300px;" >
    

    在这里插入图片描述
    b)全局

    <div class="layui-fluid" style="background-color:cyan;height:300px;" ></div>
    

    height设置高度范围为300像素 style中设置背景颜色
    在这里插入图片描述

    2.栅格

    a)栅格放置
    栅格的放置类似于tr和td之间,分行列进行放入,在每行中放入列。
    ******添加行的方法

    <div class="layui-row"><div>
    

    *****添加列
    通过class的预设来定义一组列(column),语法为 :layui-col-md

    其中md代表不同分辨率对应大小标记,如果是手机则改为xs,超大屏改为lg。
    最后的" * "代表占用多少列,一共每行12列,可以给信息分配在多少列内显示。
    在这里插入图片描述
    例如:
    该条文本在md大小分辨率下显示时,该条文本占整行7列,该条背景颜色为syan

    	  定义行<div class="layui-row">
    <!-- 	  		定义列 内容的5-12 -->
    			<div class="layui-col-md5" style="background-color:cyan;">
    			第一行前5/12
    			</div>
    			<div class="layui-col-md7" style="background-color:green;">
    			第一行后7/12
    			</div>
    			</div>
    

    显示效果
    在这里插入图片描述
    如果想要每列之间有间距可以通过使用 layui-col-space “*”,其中“ *”代表间隔列数.,但实际上是给的padding层的空隙.
    在这里插入图片描述
    border中为全部背景颜色的框,如果我们设置了背景颜色,那么即使设置space在页面中也看不出效果,因为space实际改变的是padding层中,中心内容和border边框的间距。所以如果想看出效果,可以在中心框的文字层中设置,也就是在设置列的div标签下再套一个div标签中设置背景颜色,此时则是给最终新的文本框区域设置了背景颜色,而周围的白色空隙就是space隔出的空间。否则将看不出效果。

    <!-- 定义列 内容的4/12 -->
    			<div class="layui-col-md4  " >
    			<div style="background-color:pink;">第3行前4/12</div>
    			</div>
    			<div class="layui-col-md5 " style="background-color:powderblue;" >
    			<div >列嵌套行</div>
    			</div>
    

    在这里插入图片描述

    3.按键

    使用layUI中的按键

    			<!-- 标准按钮 -->
    			<button type="button" class="layui-btn ">无功能	</button>
    			<a href="http://www.baidu.com" class="layui-btn ">可跳转按钮</a>
    			<div class="layui-btn ">一个按钮而已</div>
    

    在这里插入图片描述
    默认绿色 layui中的样式修改,官网给出不同样式
    在这里插入图片描述
    在这里插入图片描述
    通过加入i标签中加入class=layui-icon,可以加入官方给出的一些图案元素例如在这里插入图片描述

    在这里插入图片描述
    随便添加进去两个看看

    			<button class="layui-btn layui-btn-warm">
    			<i class="layui-icon">&#xe608;</i>暖色添加按键</button>
    			<button class="layui-btn layui-btn-danger">警告按键</button>
    			<button class="layui-btn layui-btn-normal">百搭按键
    			<i class="layui-icon layui-icon-heart">特别</i>
    			</button>
    

    在这里插入图片描述
    大概就是 加入一些图案进去。

    二、导航

    1.水平导航
    使用无序表单标签ul,导航菜单用到layui中class=layui-nav
    其中layui-this可以选中标签按键

    <ul class="layui-nav">
    	<li class="layui-nav-item"><a href="http://www.baidu.com">最新活动</a></li>
    	<li class="layui-nav-item layui-this"><a href="http://www.baidu.com">产品</a></li>
    	<li class="layui-nav-item"><a href="http://www.baidu.com">大数据</a></li>
    	<li class="layui-nav-item"><a href="http://www.baidu.com">解决方案</a>
    	<!-- 二级菜单 -->
    			<dl class="layui-nav-child">
    					<dt><a href="">方案1</a></dt>
    					<dd><a href="">方案2</a></dd>
    					<dd><a href="">方案3</a></dd>
    			</dl>
    		</li>
    </ul>
    

    在这里插入图片描述
    2.垂直
    使用时需要在class中加入layui-nav-tree

    <!-- 垂直导航 -->
    <ul class="layui-nav layui-nav-tree">
    	<li class="layui-nav-item"><a href="http://www.baidu.com">最新活动</a></li>
    	<li class="layui-nav-item layui-this"><a href="http://www.baidu.com">产品</a></li>
    	<li class="layui-nav-item"><a href="http://www.baidu.com">大数据</a></li>
    	<li class="layui-nav-item"><a href="javascript:void(0);">解决方案</a>
    	<!-- 二级菜单 -->
    			<dl class="layui-nav-child">
    					<dt><a href="">方案1</a></dt>
    					<dd><a href="">方案2</a></dd>
    					<dd><a href="">方案3</a></dd>
    			</dl>
    		</li>
    </ul>
    

    在这里插入图片描述

    3.边侧导航
    边侧导航还要在class中加上layui-nav-side 设置背景颜色可以通过layui-bg-blue
    通过span标签 class="layui-badge "可以附加小标记 ,标记也可以在更改颜色图案等

    <!-- 侧边导航 layui-nav-side -->
    <ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-blue">
    	<li class="layui-nav-item"><a href="http://www.baidu.com">最新活动<span class="layui-badge " >6</span></a></li>
    	<li class="layui-nav-item"><a href="http://www.baidu.com">产品</a></li>
    	<li class="layui-nav-item"><a href="http://www.baidu.com">大数据</a></li>
    	<li class="layui-nav-item"><a href="http://www.baidu.com">解决方案</a>
    	<!-- 二级菜单 -->
    			<dl class="layui-nav-child">
    					<dt><a href="">方案1</a></dt>
    					<dd><a href="">方案2</a></dd>
    					<dd><a href="">方案3</a></dd>
    			</dl>
    		</li>
    </ul>
    

    在这里插入图片描述

    今天练习做到这里先

    展开全文
  • jquery修改layui样式不生效的问题

    千次阅读 2021-02-18 22:24:53
    div class="layui-upload"> <button type="button" style="width:200px;height:200px;border-style:dashed" class="layui-btn layui-btn-primary" id="goodsPicBtn"><h2>+</h2></button>...
    <div class="layui-upload">
        <button type="button" style="width:200px;height:200px;border-style:dashed" class="layui-btn layui-btn-primary" id="goodsPicBtn"><h2>+</h2></button>
    </div>

    html中定义一个上传按钮,下图的样子。

    场景:上传文件后在虚框中显示上传的图片

    未生效代码(部分截取)

    $("#goodsPicBtn").css({"background-image":"url"}); 
    

    在虚框处右击-检查,鼠标移到button处,显示出定位点

    修改选择器,样式生效

    $("#goodsPicBtn.layui-btn.layui-btn-primary").css({"background-image":"url"}); 
    

    总结:DOM修改layui样式时需要再选择器上追加class,不能只使用id定位。

    展开全文
  • layui 表单样式无效

    千次阅读 2019-11-04 15:01:50
    样式无效解决办法:在form标签中加入class="layui-form" 隐藏了相关select、checkbox、radio元素的解决办法:初始化加入form.render();
    • 样式无效解决办法:在form标签中加入class="layui-form"

     

     

    • 隐藏了相关select、checkbox、radio 元素的解决办法: 初始化加入form.render();

     

    展开全文
  • layui分页样式改变

    千次阅读 2020-01-17 09:04:45
    layui分页的原始样式: 修改成如下样式: 新增css代码如下:(pageBox为放置分页的容器id) /*修改layui分页的样式*/ #pageBox .layui-laypage a{ color: #94999F; font-size: 12px; } #pageBox .layui-...
  • thinkphp5 layui分页样式

    万次阅读 2019-09-02 13:23:08
    tp5之layui分页样式 1.分页类 路径:\thinkphp\library\think\paginator\driver Layui.php <?php namespace think\paginator\driver; use think\Paginator; class Layui extends Paginator { /** * 上一...
  • 在之前的版本,默认复选框是要有值得,默认为“勾选”...<span xss=removed> </span><div class=layui-form> <table class=layui-table> <th><input type=checkbox name= lay-skin=primary lay-filter=all
  • 1.先配置你的分页参数: //分页配置 'paginate'=>[ 'type'=>'Layui', 'var_page'=>'page', 'list_rows'=>15, 'newstyle'=>true, ], ...
  • 如下所示: ... <span class=layui-badge>正常</span> {{# } else { }} <span class=layui-badge>禁用</span> {{# } }} [removed] layui.use(['layer', 'form','table'], function(){ layer
  • ../../static/frame/layui-v2.5.6/layui/css/layui.css"> <link rel="stylesheet" href="../../static/css/log/log.css"> <link rel="stylesheet" href=...
  • 1.要求:radio按钮选择通过拒绝...div class="layui-form-item"> <label class="layui-form-label">审核结果<span style="color: red;">*</span></label> <div class="layui-input-bl
  • 国产前端框架LayUI使用教程

    千次阅读 2022-03-05 14:11:18
    第十三章 LayUI 官方文档https://www.layui.com/doc 1.杂七杂八知识点 使用LayUI需要引LayUI的源码,之后在引入layui.css以及layui.js <meta name="viewport" content="width=device-width, initial-scale=1, ...
  • Layui的tag标签

    千次阅读 2020-12-01 11:13:02
    1.页面显示 <!... <... <head>...meta charset="utf-8">...layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <
  • layui帮助

    2021-04-25 09:45:49
    ----------------------------------表格显示图片----...前面添加的CSS样式代码如下 <style> .layui-table-cell { height: auto !important; } .layui-table img { max-width: 100%; } </style> -.
  • jsp样式代码: 分析: 我只需要从span标签开始,到tr标签结束 层级: <table> <tr> <td> <div> <span> 3,代码: {field: 'reportstatus', title: '审核状态', ...
  • layui排序后table样式丢失

    千次阅读 2019-05-24 16:00:34
    table.on('sort(goods-table2)', function(obj){ //注:tool是工具条事件名,goods-table2是table原始容器的属性 lay-filter="对应的... $(".layui-table-main .layui-table tbody tr td").css("height","120px"); ...
  • layui给数据表格列添加样式的方式目前我就发现三种方式,如下是给表格的列“类型”添加字体颜色的三种方式。 一、方式一(最简单的方法) 如下给列“类型”添加了字体颜色#f67d06 layList.tableList('userList',&...
  • 目前layui是没有给复选框设置禁用的样式的:比如说这种: &lt;input type="checkbox" class="layui-input layui-disabled layui-unselect" name="like[andit_app]" title="...
  • 转自:http://www.pinlue.com/article/2019/08/0209/579435145152.html
  • LayUI

    2021-08-25 15:34:54
    由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则...
  • layui 列表 模板

    2021-04-26 19:32:29
    <!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">...link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" /> <link rel="stylesheet" href
  • LayUI的卡片布局以及超链接带参跳转

    千次阅读 2020-12-15 15:18:12
    1. 怎么使用layui的卡片布局 2. 点击卡片布局中的卡片怎么跳转到对应tab页 3. 跳转怎么携带卡片中的内容作为参数 下面进入正文: 项目背景:tab页显示的数据为待审核关键字表中的数据,tab的header部分有几个单选...
  • LayUi 的基本使用步骤

    千次阅读 2020-06-26 23:48:59
    使用步骤 第一步:下载 https://www.layui.com/ 第二步:导入 把下载的解压缩,然后把整个文件拷贝...要先写基础类名 “layui-btn” ,后面再添加其他样式,才好看。并且按钮都可以组合使用。 普通类型按钮 layui-bt
  • layui laydate时间控件样式放大

    千次阅读 2020-06-04 17:25:26
    .laydate-set-ym span, .layui-laydate-header i{ font-size: 30px; } .layui-laydate-content td, .layui-laydate-content th{ padding: 5px 15px !important; font-size: 26px !important; } .layui-laydate-...
  • thinkphp5 默认分页改为 Layui分页样式

    千次阅读 2018-08-08 09:43:18
    在extend目录下新增layui目录 新建Layui.php,内容如下 &lt;?php namespace layui; use think\Paginator; class Layui extends Paginator { protected $uri; /** * 上一页按钮 * @param string $text...
  • layui table 外观美化

    千次阅读 2020-01-22 19:07:41
    layui所提供的数据表格简洁大方,虽然没有像bootstrap table提供了丰富的操作数据的api,但一般情景均可使用。此处不做功能的对比,只做一个简单的table外观的美化。
  • 说起来layui前端框架,做后端开发的也是再熟悉不过了,模块开发,有好的UI界面,对前端后端人员都十分友好,当然,文档和示例也算是相当完备了。但是在开发项目时会遇到这样一种情况,就是想实现一种布局:左边是一个...
  • 修改layui 数据表格每行样式 tabledivid 是数据表格div的id 其中颜色根据自己喜好调整 #tabledivid .layui-table{ background-color: transparent !important; } #tabledivid .layui-table-view{ background-color...
  • layui复选框使用介绍

    2020-12-19 10:32:48
    layui复选框:效果图layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置html代码使用...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼当表格有两个或多个不同的状态时,...如图所示:想要做到这样的效果,首先要在表头参数加上templet(自定义列模板)并给它一个名字,如代码所示:tabReceived= layuiTable.r...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,200
精华内容 480
关键字:

layui的span样式