精华内容
下载资源
问答
  • 在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了layui插件的轮播图,就拿过来用了,但是...

    在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了layui插件的轮播图,就拿过来用了,但是图片高度不会自适应,图片变形。如图:

    解决办法:

    实例代码:

    var b = 1920/460;//我的图片比例

    //获取浏览器宽度

    var W = $(window).width();

    var H = $(window).height();

    layui.use('carousel', function(){

    var carousel = layui.carousel;

    //建造实例

    carousel.render({

    elem: '#banner1'

    ,width: '100%' //设置容器宽度

    ,height: (W/b).toString()+"px" //按比例和浏览器可视页面宽度来获取高度

    ,arrow: 'always' //始终显示箭头

    //,anim: 'updown' //切换动画方式

    });

    });

    //窗口变化是重新加载

    $(window).resize(function () {

    // setBanner();

    window.location.reload()

    })

    以上这篇基于layui轮播图满屏是高度自适应的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • 在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了layui插件的轮播图,就拿过来用了,但是...

    在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了layui插件的轮播图,就拿过来用了,但是图片高度不会自适应,图片变形。如图:

    b2de5355b1201e1c96644ef67155c637.png

    412c871d661e1d001ba6d78877ba1a34.png

    解决办法:

    实例代码:

    var b = 1920/460;//我的图片比例

    //获取浏览器宽度

    var W = $(window).width();

    var H = $(window).height();

    layui.use('carousel', function(){

    var carousel = layui.carousel;

    //建造实例

    carousel.render({

    elem: '#banner1'

    ,width: '100%' //设置容器宽度

    ,height: (W/b).toString()+"px" //按比例和浏览器可视页面宽度来获取高度

    ,arrow: 'always' //始终显示箭头

    //,anim: 'updown' //切换动画方式

    });

    });

    //窗口变化是重新加载

    $(window).resize(function () {

    // setBanner();

    window.location.reload()

    })

    以上这篇基于layui轮播图满屏是高度自适应的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持前端开发者。

    展开全文
  • 打开控制面板f12 查看元素 可以看到搜索按钮是由after动态生成,找到这个样式文件,然后注释 清除浏览器缓存(ctrl+shift+del),刷新,可以看到 按钮已经没有了。 去除layui-form的搜索框 还是老样子 查看...

    layui中layui-form与select2下拉多选样式冲突的解决方案@TOC

    去掉搜索按钮

    1. 打开控制面板f12 查看元素
      在这里插入图片描述

    可以看到搜索按钮是由after动态生成,找到这个样式文件,然后注释

    1. 清除浏览器缓存(ctrl+shift+del),刷新,可以看到
      在这里插入图片描述
      小按钮已经没有了。

    去除layui-form的搜索框

    layui-form
    还是老样子 查看页面元素f12
    layui-form
    确定元素所在位置,通过jquery删除

    $(".select2").next().remove();
    

    删除后的效果
    删除后的图片

    展开全文
  • 相关阅读:X-admin2.2打开页面(添加弹窗),执行成功后如何关闭弹出窗口和刷新table表格内容?基于X-admin2.2的后台管理系统登录实现Spring Boot+JPA微服务中数据更新问题(update)Spring Boot集成X-admin2.2时,...

    相关阅读:
    X-admin2.2打开页面(添加弹窗),执行成功后如何关闭弹出窗口和刷新table表格内容?
    基于X-admin2.2的后台管理系统登录实现

    Spring Boot+JPA微服务中数据更新问题(update)

    Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法

    LayUi搜索时,如何只刷新表格内容,其他内容不变?

    ZTree工具类汇总,包括:新增、编辑和删除节点,并提交后台


    LayUi的动态表格Table中每个td的内容可以设置为可编辑,同时监听我需改,并提交到后台。但是表格中编辑时如果是select下拉框,则处理起来相对麻烦一些。具体各部分操作如下。

    68f277c8fd06dea6bc194f01adda47cd.png

    1.单元格内容使用layui的templet功能。
    如: {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false}

     <select name='roleId' id='roleId'  lay-filter="roleId[Select](http://www.blog2019.net/tag/Select?tagId=271)" data-value = {{d.roleId}}  lay-verify='' lay-search=''>    
            {{d.roleSelect}}
        </select>

    其中select标签务必设置: lay-filter,否则修改的监听无法使用;
    后端代码:
    由于需要选中默认值,且在前台操作较为麻烦,故在后台进行了处理,如下所示:

    @Override
    public Page<User> paging(Pageable pageable, String name, Long departId) {
    	Page<User> page = userRepository.findAll((root, query, builder) -> {
    		Predicate predicate = builder.conjunction();
    		if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(name)) {
    			predicate.getExpressions().add(builder.like(root.get("username"), "%" + name + "%"));
    		}
    		if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(departId)) {
    			predicate.getExpressions().add(builder.equal(root.get("departId"), departId));
    		}
    		query.orderBy(builder.desc(root.get("lastLogin")));
    		return predicate;
    	}, pageable);
    
    	List<User> rets = new ArrayList<>();
    	page.getContent().forEach(n -> rets.add(n));
    	List<Role> roleList = roleRepository.findAll();
    	List<User> users = page.getContent();
    	users.forEach(item -> {
    		for (Role role : roleList) {
    			if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(item.getRoleId())
    					&& role.getId() == item.getRoleId().longValue()) {
    				item.setRole(role);
    				if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(item.getRoleId())) {
                    //处理前端select中的option对象,并设置默认值;
    					item.setRoleSelect(getRoleSelect(roleList, item.getRoleId()));
    				}
    				break;
    			}
    		}
    	});
    	return new PageImpl<>(rets, pageable, page.getTotalElements());
    }
    
    /**
     * 根据roleID设置默认选择,以及构造option值;
     * 
     * @2020年6月7日 下午5:52:50
     *
     * @Title: getRoleSelect
     * 
     * @Description: TODO(这里用一句话描述这个方法的作用)
     * 
     * @param @param roleList
     * 
     * @param @param roleId
     * 
     * @return String 返回类型
     * 
     * @throws
     */
    public String getRoleSelect(List<Role> roleList, Long roleId) {
    	String str = "";
    	for (Role role : roleList) {
    		str += "<option value="" + role.getId() + "" "
    				+ (role.getId() == roleId.longValue() ? "selected="selected"" : "") + " > " + role.getRoleName()
    				+ "</option> ";
    	}
    	System.out.println(str);
    	return str;
    }

    2.然后单元格内容就变成了可编辑的下拉框。3.由于默认样式有些问题,需要调整下样式。

    /* 防止下拉框的下拉列表被隐藏---必须设置--- */        
    .layui-table-cell {            
        overflow: visible !important;        
    } 
    /* 使得下拉框与单元格刚好合适 */       
    td .layui-form-select{	
        margin-top: -10px;	
        margin-left: -15px;	
        margin-right: -15px;
    }


    4.模板代码中给select标签增加data-属性,用于保存对象的id值。下拉框选择时会触发以下代码

    //下拉框监听事件
    	form.on('select(roleIdSelect)', function(data) {
    		//获取行tr对象
    		var elem = data.othis.parents('tr');
            //获取第一列的值,第一列为ID列,
    		var id = elem.first().find('td').eq(1).text();
            //选择的select对象值;
            var selectValue=data.value;
    		//处理字段更新的逻辑
    	});

    #Select #LayUi #X-admin2.2

    展开全文
  • 主要是因为页面向下高度不够打开一个日期弹框,有的电脑屏幕太,或者在打开页面时进行了缩小就可能会出现这样的情况。 只要在laydate.render时加上trigger: 'click’就可以了。具体代码如下: laydate.render({...
  • layui搭建后台管理页

    2019-12-15 14:16:19
    前面Sham做v1版程序的时候,用简单使用layui搭建后台管理页,这个周末,把框架结构重新调整了下,主要是在顶部增加了选项卡,用于放置大类,然后下面左侧树形选项卡放置大类对应的类,界面框架上基本实现和layui...
  • 展开全部材料/工具:css1、打开前端开发软件,新建一个html代码页面2、在新建的html代码页面上找到62616964757a686964616fe59b9ee7ad9431333431346461,在这个标签里创建一个标签,a案例中使用的是。代码:大家好,...
  • 文章目录前言新手版进阶版总结目标思路与步骤目标1:实现多个站点在地图上的显示目标2:显示站点的信息与实时数据卡点击标注出现layui的卡片样式目标4 百度地图窗体InfoBox打开当前窗体时关闭上一个窗体细节处理目标...
  • Layui第三方Dtree的使用——简单记录

    千次阅读 2019-10-25 09:31:48
    一、 最近使用layui做了个项目,由于合同额,也不需要太多繁琐复杂的处理,于是前端选用的...里面有很多示例和使用帮助,我要实现的是,点一个input标签,然后打开一个树页面,选取一个节点,然后把选中的节点信...
  • 使用layer作为后台CRUD UI体系的时候,大多数 添加/编辑 功能我是使用了layer.open来打开一个模态页面框。该方案在高分辨率的时候十分友好,但是在低分辨率特别是笔记本上显示效果堪忧,建议全面。 所以我们的解决...
  • 2、操作弹窗打开的子页面返回值 下面就讲解两个实例,以作总结,以不变应万变: 一、直接操作打开的窗口获取值 Layui内有两种点击事件,第一种是jquery中的click方式第二种是按钮监听组的方式,上篇已经做过...
  • 使用链接新增一个页面 function setEdit(url, title) { window.editIdx = layer.open({ // 原始核心方法 - 打开一个富文本框 type: 2, // 基本层类型 title: title, // 标题 area: ['720px', '100%'], // 弹框...
  • layui教程(一) form 表单的提交问题

    千次阅读 2019-09-27 17:25:28
    页面打开页面的代码 layer.open({ type:2, //类型为1时可以为html,和代码,为2时页面地址 title: title, //弹出层的标题 area: [width, heigth], //大小 fixed: false, //不固定 ...
  • 打开页面时会调用一个查询方法,把数据赋值到数据表格上 ``` layui.use(['table','form','upload','layer'], function(){ var table = layui.table ,form=layui.form; var brandId,categoryId,...
  • 给位大佬,小白询问个问题,需求就是点这个按钮,先出来一个提示框选择相应的功能,再打开相应的页面,现在我遇到的问题就是这个打开这个询问框马上就被覆盖了, ``` this.addOrEditLog = function (url, ...
  • 二、操作弹窗打开的子页面返回值 场景:此处编的场景是操作ztree树,其实和操作列表都是一样的。通过点击增加按钮弹窗选择树节点,关闭窗口返回值 1、先说子页面 1-1、html代码 在body中只需要加以下一...
  • 编公司最近统一给电脑推送了windows 10 1809版本,更新完以后突然发现,上不了网了。。。出现这个问题的不单是编一台电脑,好多同事都反映无法上网...然后打开代理设置页面,果然代理设置不见了。但是问题来...
  • http://layer.layui.com/  点击打开链接
  • 尝试加了Log,发现完全没有调用这个接口,只有打开页面的log js ``` table.render({ elem: '#LendingList' , url: '/Lending/List/' , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 ...
  • 动态添加文本

    2019-05-07 22:05:38
    最近在做一个功能,在网页制作图片,然后最后生成一张新的图片,现在是实现动态添加文本,首先,点击页面上的添加文字按钮打开添加文字模态框 其中有文字和背景是要打开layer中的颜色选择器-layui. Colorpicker,...
  • 包含电脑端、移动端、微信程序等多个平台,现已开源web端、安卓端、程序端源码。 目录结构 novel-front : 前台web网站源码(独立项目,按需安装) novel-admin :平台后台管理系统源码(独立项目,按需安装) ...
  • 比如我进行程序设计时(不在一个域),接口数据中无法捕获图片资源,自然就无法正确使用 > 另外,如果涉及到不同的资源服务器,更要考虑到 FTP上传,可要好好优化咯. Ⅲ. 浏览器访问 对于配置完成后的访问,...

空空如也

空空如也

1 2
收藏数 26
精华内容 10
关键字:

layui打开小页面