浅谈layui前端遇到的难点(集合)


一、表格中插入下拉框的情况

问题:表格遇到下拉框表单的情况,下拉框在表格中没办法显示出来,效果:

1.gif

1、表格中下拉框被隐藏----方法1

这种方法解决了表格中下拉框被隐藏的状态了,但是显示并不是很美观,距离最下面的表格的下拉框展开之后会撑开表格的滚动条显示出来,可以看到截图效果:

2.gif

这个办法只是简单是修改了一下css:

.layui-table-cell{overflow: visible;}

2、表格中下拉框被隐藏----方法2

第二种办法就是给下拉框加上这个属性:lay-ignore.忽略了美化效果自然就是普通的下拉框了,可以正常显示的,但是效果并不美观,你觉得不是你想要的,别急,我给它美观一下.

首先给select表单加了lay-ignore属性,这样子就变成普通的表单了.

再美化一下css改变效果:

 .table_select { width: 100%; height: 38px;
            line-height: 1.3;
            line-height: 38px \9;
            border-width: 1px;
            border-style: solid;
            border-color: #ccc;
            background-color: #fff;
            border-radius: 2px;
            padding-left:10px;
        }
        .table_select option{
            padding: 0 10px;
            line-height: 36px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;}
        /*修改表单默认文字颜色*/

        input, textarea,select {
            color: #999; /* 光标的颜色*/
            text-shadow: 0px 0px 0px #999; /* 文本颜色 */
            -webkit-text-fill-color: transparent; }
        input::-webkit-input-placeholder,select::-webkit-input-placeholder { color: rgb(60, 0, 248); /* 改变placeholder文本颜色 */ text-shadow: none; -webkit-text-fill-color: initial; }

效果如下:

3.gif

大家可以看到效果了,只是默认效果跟原来的差不多一样,只是点击效果内容有点丑,也勉强接受..

3、表格中下拉框被隐藏----方法3

参考:@FIRSTK 的bootstrap下拉菜单组件 https://fly.layui.com/jie/20494/

由于这个版本当时是layui-v2.24版本的,现在插件已经到2.4.5了,做的时候同步就有点麻烦,所以要切换成旧版本的.

bootstrap下拉菜单效果如果,需要的也可以用:

 <div class="layui-btn-dropdown">
        <button type="button" class="layui-btn layui-btn-sm" data-toggle="dropdown">操作 <span class="layui-icon" style="font-size: 14px"></span></button>
        <ul class="layui-dropdown-menu">
            <li><a href="#" onclick="alert(2)">功能</a></li>
            <li><a href="#">另一个功能</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li><!--分割线-->
            <li><a href="#">分离的链接</a></li>
        </ul>
    </div>

效果如下:

4.gif


二.弹窗中下拉框显示被隐藏1.当弹窗高度不够的时候,这个就有问题了

解决办法:

①修改全局css

.layui-layer-page .layui-layer-content { overflow: visible !important; }

②修改当前的弹窗的css,给弹窗加个id,比如#layer_pop;这样不影响其他的弹窗效果.

#layer_pop.layui-layer-content { overflow: visible !important; }
layer.open({
            id:'layer_pop',
            type: 1,
            title: '点击弹窗',
            area: '640px',
            shadeClose: true, //点击遮罩关闭
            content: $('#clickBtnView'),
            btnAlign: 'c'
            , zIndex: 198910160
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
                //按钮【按钮一】的回调

                layer.close(index);
            }
            , btn2: function (index, layero) {
                //按钮【按钮二】的回调
                if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时,该层才会关闭
                    layer.close(index)
                }
                // return false //开启该代码可禁止点击该按钮关闭
            }
            , cancel: function (index, layero) {
                //右上角关闭回调

                //return false 开启该代码可禁止点击该按钮关闭
            }
        });

效果:

1.gif

本文转载自:https://fly.layui.com/jie/44698/


推荐文章
浅谈layui表单中的inline和block

layui表单中的inline和block:block:block元素会独自占一行,多个block元素各自新起一行,默认情况下,block元素宽度自动填充其父元素宽度 单行输入框 验证必填项

layui中关于弹出层关闭和刷新问题

描述:主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图:1是主页面,2是子弹窗,3是孙弹窗功能一:好了,第一个我要实现的功能是点击弹窗3的确定之后关闭弹窗3上js代码,先贴出如何在主页面1中

浅谈layui标签输入框inputTags

layui标签输入框inputTags样式:目录结构:页面代码: inputTags layui.config({ base:'js/

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

浅谈layui数据表格的基础使用

表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstraptable、layuitable、ea

layui 开源吗?

layui开源吗?layui是免费开源的。layui是一款开源和免费的前端UI框架,可随意使用;不过为了维持发展,在其生态下,也会推出一些基于layui的收费产品,比如:layuiAdmin和layI

layui表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui数据表格删除当前行的方法

数据表格如下:t2={ elem:'#test2', data:tableData2, page:false, width:$(parent.window).width()-50, cols:[[ {

laypage组件常见用法总结

laypage的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。核心方法:laypage.render(options)来设置基础参数。一、laypage的常用基

layui的优缺点是什么?

layui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实上layu

layui怎么监听多个radio事件?

需求如下图:想要选中单选框3,是单选框3下的复选框全选如果面板信息不多的话,可以给每个单选框3添加一个固定的监听事件但是实际项目中,不仅仅只有两个,会有几十个,这时总不能绑定一个lay-filter,

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

layui如何关闭弹出层?

layui可以使用closeAll关闭弹出层,如果不指向层类型的话,它会销毁掉当前页所有的layer层。我们可以使用下面的方法关闭指定层:layer.closeAll();//疯狂模式,关闭所有层la

layui封装模块基础教程

layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块。平常使用中,ajax可以说使用广泛,所以这里我们添加一

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

layui之弹出form表单以及提交

第一步:引用两个文件第二步:点击删除按钮弹出提示框/*删除开始*/ $(".del").click(function(){ varid=$(this).attr("id"); layer.alert(

Django+Layui学习之浅谈后台布局

前言Layui对于没有太多前端基础的我来说,第一次接触还是有点困难,不过文档还算详细,摸索着的逐渐的了解了,这次来说下后台布局。Layui后台布局:一、后台布局之顶边栏 layui后台布局 控制台

layui的好处是什么?

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui如何实现下载功能?

layui实现下载功能的方法:a标签中的href属性可以直接给下载链接的地址,点击的时候会自动跳出下载保存窗口。用原生上传文件标签上传文件,获取上传文件的全路径:$('#file').change(f

layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取