精华内容
下载资源
问答
  • 主要介绍了解决jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题,需要的朋友可以参考下
  • 今天小编就为大家分享一篇在layui.use 中自定义 function 的正确方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui.layer弹层组件

    2020-10-23 17:47:28
    layui.layerlayui前端UI框架layer弹层组件layer使用方法layer方法使用layer.msg(content, options, end) - 提示框layer.load(icon, options) - 加载层layer.tips(content, follow, options) - tips层layer.alert...

    layui前端UI框架

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互。
    **兼容:**layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。

    layer弹层组件

    layer 是作为 layui 的一个弹层模块.layer可以独立使用,也可以通过Layui模块化使用。

    layer使用方法

    1.作为独立组件使用
    需要下载layer组件包、引入jQuery1.8以上的任意版本,并引入layer.js.

     <script src="js/jquery2.1.4.js"></script>
     <script src="layer/layer.js"></script>
    // 引入好layer.js后,直接用即可
     <script>
     layer.msg('hello'); 
     </script>
    
    1. layui 模块化使用
      需要下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js
    layui.use('layer', function(){
      var layer = layui.layer;
      layer.msg('hello');
    });           
    

    layer方法使用

    layer.msg(content, options, end) - 提示框

    content:文本内容
    options:基础参数
    end:层销毁后触发的回调

    <script>
        function msgOne(){
           layer.msg("天干物燥,小心火烛",{icon:6});//icon:0-6
              }
    </script>
    <body>
        <button onclick="msgOne()">msg函数</button>
    </body>
    

    在这里插入图片描述

    layer.load(icon, options) - 加载层

    icon:图标。信息框和加载层的私有参数
    信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2

    <script>
    function onloadOne() {
                var index = layer.load(1); //icon数值在0-2
                setTimeout(function () {
                    layer.close(index);
                },2000);
            }
            function onloadTwo() {
              var indexOne = layer.load(2,{time: 8000});
              layer.close(indexOne);
            }
    </script>
    <body>
        <button onclick="onloadOne()">onload函数1</button>
        <button onclick="onloadTwo()">onload函数2</button>
    </body>
    

    在这里插入图片描述

    layer.tips(content, follow, options) - tips层

    follow:事件回调体(对象)

    <script>
          function tipOne() {
                layer.tips( "曹丕","#sq",{tipsMore:true,tips:3});
            }
    </script>
    <body>
       <button onclick="tipOne()">tip函数</button>
    </body>
    

    tips - tips方向和颜色:上右下左四个方向,通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定tips: [1, ‘#c00’]
    tipsMore - 是否允许多个tips.允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启

    在这里插入图片描述

    layer.alert(content, options, yes) - 普通信息框

    yes:确定按钮回调方法

    <script>
         function alertOne() {
                layer.alert("这就是嗨的代价",{icon: 6})
            }
    </script>
    <body>
       <button onclick="alertOne()">alert函数</button>
    </body>
    

    在这里插入图片描述

    layer.close(index) - 关闭特定层

    index:每一种弹层调用方式,都会返回一个index,它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的

     var indexOne = layer.load(2,{time: 8000});
              layer.close(indexOne);
    
    展开全文
  • 今天小编就为大家分享一篇layUI使用layer.open,在content打开数据表格,获取值并返回的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui: layer.open加载窗体时出现遮罩层的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui.js下载

    2020-07-15 17:00:56
    layui超实用插件,直接引入使用使用方法见链接http://www.layui.com/doc/modules/layer.html#offset js
  • layui.css 下载

    2020-08-20 19:08:15
    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
  • layui.all.js

    2018-11-12 15:31:04
    实现layui点击行选中CheckBox并改变行背景色,集成在js框架中
  • layui.mobile.css

    2019-05-15 17:01:16
    web就餐刷卡页面设计web就餐刷卡页面设计web就餐刷卡页面设计
  • layui渲染弹出层里的样式没法渲染 折腾了几个小时,试了各种方法,最后发现是没把表单设为layui-form <form class="layui-form" >非常重要 触发弹出层代码 弹出层页面注意一定要把 表单设为layui-form ...

    layui渲染弹出层里的样式没法渲染

    折腾了几个小时,试了各种方法,最后发现是没把表单设为layui-form 

    <form class="layui-form" >非常重要

    触发弹出层代码

    弹出层页面注意一定要把

    表单设为layui-form 

    <form class="layui-form" >非常重要

    再加上

    重新渲染,问题完美解决

    展开全文
  • 今天小编就为大家分享一篇在layuilayer弹出层点击事件无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui.tree组件的使用以及搜索节点功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui.carousel轮播组件实现移动端手势左右滑动效果
  • layui layer.open()中的select,radio不显示.zip
  • 为后端程序员设计的前端框架。这是一个封装了各种css和js、Ajax等等的前端框架,其封装程度之高,有时...包含layuilayer的js和css文件,文件非常完整齐全,不缺任何一个文件,解压即用!个人使用没有遇到任何问题。
  • layui.layer的文档

    2020-04-02 22:06:39
    我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要所有...

    基础参数

    我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要所有都去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意,从2.3开始,无需通过layer.config来加载拓展模块

    type - 基本层类型

    title - 标题

    content - 内容

    skin - 样式类名

    类型:Number,默认:0

    layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

    类型:String/Array/Boolean,默认:'信息'

    title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

    类型:String/DOM/Array,默认:''

    content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。譬如:

     

    codelayui.code

    1. /!*
    2. 如果是页面层
    3. */
    4. layer.open({
    5. type: 1,
    6. content: '传入任意的文本或html' //这里content是一个普通的String
    7. });
    8. layer.open({
    9. type: 1,
    10. content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
    11. });
    12. //Ajax获取
    13. $.post('url', {}, function(str){
    14. layer.open({
    15. type: 1,
    16. content: str //注意,如果str是object,那么需要字符拼接。
    17. });
    18. });
    19. /!*
    20. 如果是iframe层
    21. */
    22. layer.open({
    23. type: 2,
    24. content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
    25. });
    26. /!*
    27. 如果是用layer.open执行tips层
    28. */
    29. layer.open({
    30. type: 4,
    31. content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
    32. });
    33.  

    类型:String,默认:''

    skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lanlayui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子

     

    codelayui.code

    1.  
    2. //单个使用
    3. layer.open({
    4. skin: 'demo-class'
    5. });
    6. //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
    7. layer.config({
    8. skin: 'demo-class'
    9. })
    10. //CSS
    11. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
    12. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
    13. body .demo-class .layui-layer-btn a{background:#333;}
    14. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
    15. 加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。
    16.  

    你也可以去查看layer皮肤制作说明

    展开全文
  • 今天小编就为大家分享一篇解决Layuilayer报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 报错提示: 报错代码: /*添加权限页面*/ function createAuthoritypage() { console.log("... layer.open({ type: 1, title: "添加权限", area:["40%","35%"], ...

    报错提示:
    这里写图片描述

    报错代码:
    /*添加权限页面*/
        function createAuthoritypage() {
            console.log("onclick");
            layer.open({
                type: 1,
                title: "添加权限",
                area:["40%","35%"],
                content: ["/oceanNMS/authority/addAuthorityPage?fatherAuthorityId="+window.selectedAuthorityId]
            });   
        }

    错误原因:type为1的时候是直接打开文本或者页面,而打开一个url需要使用type:2,修改即可。

    展开全文
  • Layui调整layui.confirm的样式

    千次阅读 2020-09-08 16:09:25
    layer.confirm('你吃饭了吗?', { title:'标题', area:['240px','160px'], //弹框的大小 btn:['吃了','还没'] //按钮 }, function(){ //点击“吃了”执行的操作 }, function(){ //点击“还没”执行的操作 ...
  • layer.js和layui.js的学习

    2021-05-31 10:35:06
    官网: layui:https://www.layui.com/doc/element/timeline.html ...https://www.layui.com/doc/modules/layer.html https://layer.layui.com/ 例子: <!DOCTYPE html> <html lang="en"> &..
  • layer弹窗:top.layer弹窗到父页面跨域,通过postMessage方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开弹窗,对象内不能存在事件。
  • layui.js和layui.all.js的区别

    万次阅读 多人点赞 2019-03-06 15:10:10
    layui这个框架虽然还有一些不足之处但是我觉得已经非常优秀了,对于layui.js和layui.all.js的区别,网上别人各执一词,我今天遇到个非常恶心令我难受的问题发表一下我对这两个的看法。首先我引入layui.all.js,今天...
  • 在使用layui的layer插件打开弹出层的时候,会出现弹出层...layui.layer.open({ type:2, //此处只规定宽度,不规定高度,让插件自适应高度 area:['300px'], content:'www.baidu.com', shade:0.5, title:'百度页面
  • 完全不知道是什么原因。不过看网上说springboot的类似错误,重启idea就可以。但是我是php7和laravel7和vscode。 把phpstudy里面的nginx的conf修改……覆盖……错了……再改回来,然后可以了。 不了解。......
  • 该资源主要应用于layui框架下table表格渲染后判断checkbox多选控件是否可用,当然done下还可以做其他逻辑判定,附上源码,绝对可用。
  • 使用layui.upload上传文件与使用layer.open方式上传文件。上传文件的方式有很多种,这里简单介绍以下两种方式。 第一种:layui.upload上传文件 layui.use(['layer','upload'], function () { var upload = layui....
  • A页面 调用layui.layer.open layui.use(["layer"], function () { layui.layer.open({ type: 2, title: "管理角色拥有的部门", btn: ["确定修改", "关闭"], content: '@Url.Content("~/Role/UserRoleView?rid...
  • layui.layer 弹出层使用

    万次阅读 2018-03-18 20:55:16
    layer 在 layui 体系中的位置比较特殊,甚至让很多人都误... 获取laery,你需要去官网下载laery.js 地址--http://layer.layui.com/ 2. 引入laery.js 在此之前你必须要先引入jQuery1.8以上的任意版本 <script s...
  • Layui.open弹出图片及视频预览

    千次阅读 2019-07-16 14:26:35
    图片预览 注:imgHtml 外部不加div时,如果图片是一张长图,则预览效果非常不好,加... https://www.layui.com/doc/modules/layer.html function previewImg(obj) { var img = new Image(); img.src = obj.src; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,821
精华内容 7,528
关键字:

layui.layer