GithubHelp home page GithubHelp logo

layui / layui Goto Github PK

View Code? Open in Web Editor NEW
28.8K 959.0 7.3K 12.9 MB

一套遵循原生态开发模式的 Web UI 组件库,采用自身轻量级模块化规范,易上手,可以更简单快速地构建网页界面。

Home Page: https://layui.dev

License: MIT License

JavaScript 81.86% CSS 18.14%
layui ui javascript js html css

layui's Introduction

Layui

Layui

Classic modular front-end UI library

Version License CSS Brotli size JS Brotli size


Layui 是一套开源免费的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,即无需涉足各类构建工具,只需面向浏览器本身,便可将页面所需呈现的元素与交互信手拈来。

快速上手

使用 Layui 只需在页面中引入核心文件即可:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
  </head>
  <body>
    <!-- HTML Content -->
    <script src="./layui/layui.js"></script>
    <script>
    // Usage
    layui.use(function(){
      var layer = layui.layer;
      // Welcome
      layer.msg('Hello World', {icon: 6});
    });
    </script> 
  </body>
</html>

使用文档

当前版本文档

项目参与

项目参与者

破旧立新 🌱

2016年10月14日,Layui 发布了 1.0.0 首版,此后多年被广泛应用于众多 Web 平台。

2021年10月13日,Layui 发布了原官网下线的公告(导读),并将文档站点切换到了 Gitee Pages,社区及日常维护亦全面转移到了 Gitee 和 Github 平台,以此呼吁大家拥抱其他更好的主流框架,导致大家误以为 Layui 停更了。事实上,自那以后,Layui 仍然在 Github 和 Gitee 保持活跃,并不存在所谓的停止更新,从当时的 2.6.8 一直连续迭代到如今的最新版本。

2023年4月24日,Layui 发布了 2.8.0 正式版,并上线了新的文档站点,这是一次朴实的回归,更是情怀的延续。 但我们仍然坚持两年前那则公告中的观点, 即仍然推荐大家去拥抱主流,始终保持对前沿技术的无限热爱,是开发者们都应具备的思维属性而 Layui 所做的,是为填补主流之外的那些略显狭小的空隙。Layui 虽不是前端主流,但也早已不是作者个人的 Layui,而是所有仍在坚持使用它的人的 Layui,它仍然支撑着许多项目,也代表着许多人的工作。作为开源创作者,应该要为这些坚持者而守望。

未来,Layui 会持续陪伴着所有为之热爱的人们,共同去论证 Layui 开发模式的可行性。

开源许可

Layui 采用 MIT 许可发布。其他相关协议亦可参考《免责声明》。

layui's People

Contributors

bourne7 avatar bxjt123 avatar diyar-it avatar fonqing avatar hotlcc avatar icarusion avatar jacksonwj avatar juneszh avatar ladudu avatar litaohms avatar luckxu avatar meihangbo avatar mek1986 avatar mengkunsoft avatar phy25 avatar q8018414 avatar qzstudio avatar sentsim avatar sight-wcg avatar sleeprite avatar smallweis avatar star1029 avatar sunxiaobin89 avatar tsymq-live avatar wanzhende avatar wefly2 avatar weianguo avatar xuexb avatar zjpzjp avatar zzzping avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

layui's Issues

icon过于少了

虽然说现在图标生成很简单,但图标库丰富一点觉得还是挺方便的

function "d" not defined

寻求个问题:
已确认导入:

<script src="/static/layui/layui.js"></script> 在显示数据时使用: {{ d.name }} 提示: function "d" not defined 是少什么了吗,或者是版本支持问题吗,我的是2.x的,非常感谢回答者

关于layer.js 中 设置layer自动居中的问题

看源代码中layer的坐标主要是以下代码统计出来的。
that.offsetTop = (win.height() - area[1])/2;
that.offsetLeft = (win.width() - area[0])/2;

然后我这边发生了一些奇怪的现象,在文档高度超过窗口可见高度的情况下(也就是出现滚动条的情况下),有可能出现win.height() 和 window.innerHeight 数值差别很大的情况

就是win.height()统计出来的不是实际窗口可见高度,而是实际文档的高度,导致layer打开的时候,位置被设置到窗口外,只看见一层半透明蒙版,而layer的框框不见了。

我把上述win.height()换成 window.innerHeight 就能正常居中显示了。

还是希望支持AMD加载

什么年代了,还得必须去手动引用文件,遇到组件依赖多的页面得写多少script标签

同样的参数,layer.photos可以正常使用,但是top.layer.photos没反应

实际需求:先layer.open打开一个help弹窗,再从help弹窗中显示一些图片示例。但是由于会自动基于父窗口缩略,所以要设置基于顶层显示。 图片参数固定,如:

{
    "title": "",
    "id": 1,
    "start": 0,
    "data": [
        {
            "alt": "图1",
            "pid": 1,
            "src": "resources/img/操作演示.gif",
            "thumb": ""
        }
    ]
}

一样的参数,一开始 layer.photos 使用的时候没问题,但是不符合实际需求。改成 top.layer.photos 后无效。

调试发现,参数传入layer后进行判断(源码1071行)
var type = options.photos.constructor === Object;
该判断在默认情况下得到结果是true,但是在top.调用的时候却一直得到结果为false,甚至在上面定义photo参数的时候加入constructor: Object都没有用。 但是调试时分析参数应该是object没问题,不知为何会导致这种情况。

另外,使用 top.layer.open 打开弹窗是正常可以使用的

关于checkbox程序主动触发change

现在有个需求,需要点击一个checkbox联动其他checkbox,我已经给主checkbox监听事件,但是只有在手动点击时候才会触发,在程序选中的时候并不会触发,如何才能通过程序主动触发checkbox的change事件

关于表格全选

我用datatable生成表格,前面的checkbox是动态生成的,点击全选将其他checkbox状态设置和全选按钮一致,并调用form.render(),前两次都能管用,但是第三次就失效了,希望能更改一下这个bug,如果不调用form的render,更改checkbox后如何主动触发按钮变更状态

建议让form的select支持readonly属性

例如可在form.js的第130行前插入if(select.attr("readonly")!==undefined) return false;

//点击标题区域
title.on('click', function(e){
if(select.attr("readonly")!==undefined) return false;//支持readonly
reElem.hasClass(CLASS+'ed') ? (
hideDown()
) : (
hide(e, true),
showDown()
);
dl.find('.'+NONE).remove();
});
..........

弹窗的success 回调貌似不是从弹层加载完成后执行

我具体问题是这样的,我就引了layui的js和css,没有其余样式和js,就写了官网一样的代码,我在success里头加了alert(1),发现怎么弹出1之后弹窗才出来,不是应该出来弹窗后在弹出1吗????有点不理解。。。。还有就是加载层出来时左右移动的动画,我如何关掉呢,anim:-1也没用

layui的一些建议和意见

贤心您好,一直在有使用您的laytpl,最近开发一个后台项目,所以打算使用layui,使用过程中发现一些个人觉得不好的地方,在论坛有发了几个帖子不见回复,于是在这里作为建议提出来,希望您不要介意。

  • laypage模块
    这个模块很棒,但是目前如果我想实现包含搜索在内的全部的ajax功能,因为加入了搜索条件,所以分页的总页码数是会变化的,当前的laypage不像form模块有个重新render的功能,而且好像参数也不支持动态修改分页参数,不支持直接触发跳转到指定页的方法(当然有可能是我不会使用,还请您指出)
  • form模块
    这个模块很难挑出什么样的毛病,但是使用过程中发现一点疑问,第一是filter,在使用filter过滤绑定事件,但是还是会触发默认的submit事件,也就是说必须针对每个表单的submit事件单独做个处理或者绑定一个不带filter的submit时间通用的return false,不是很优雅,个人感觉filter应该放在form上,然后定制一下jquery的选择器过滤,再单独绑定事件,这样处理会不会更好一点,其次form的on方法破坏了链式操作的逻辑,比如我页面有多个表单使用filter来绑定不同的事件,本意是form().verify().on().on().on(),但是发现on之后返回的是layui对象而不是form对象。
  • layer模块
    layer作为一个独立惊艳的弹窗模块个人非常之喜欢,目前layer是支持多次弹窗的,而在官方文档描述说是支持传入一个id参数判断唯一性,那既然有id属性为什么不支持直接用id来关闭指定对话框呢?目前只能根据调用layer方法后的返回值index来关闭,如果我的对话框在某个内部的回调函数中弹出的,如果在外层或者别处的方法里面要关闭这个对话框目前的做法只能是申明一个全局变量来接收这个index或者使用closeAll方法或者close 最后一个index的方法,但是如果我中间可能出现别的弹窗的情况下就只能是全局变量了。其次layer的content参数测试了下,只能支持jquery对象而不是像文档中所说的dom对象,个人觉得应该处理一下都可以支持才对,甚至可以扩展一下content直接支持jquery(css)选择器。
    layer模块里面的图标应该是使用的图片,在视网膜屏幕下看起来比较模糊,既然layer本身内置了一些来自于iconfont的字体,为什么不直接使用字体图标呢?
    而且个人感觉layui既然没有原创的字体的话不建议去内置一批字体,除非组件有需要可以集成少量的必须的字体图标,而且定制后的font名字不应再叫iconfont.xxx,如果用户需要自己去iconfont上定制字体就会导致冲突或必须要换目录结构,毕竟对于真正想用字体图标的人来说肯定会自己去找类似于font awesome等库或者去iconfont自己定制。

有一个小疑问就是官方明确说layui是支持全部引用(不适用模块化)的,而相信大多数“老一代”的后端程序员,做那种后台管理不追求性能的项目时,更乐意接受全部引用的方式(至少我就是这样),后端语言模板支持include的一般会选择在顶部统一引用所有的资源,这样在页面中间写js等时不会提示缺少js库什么的,按照这样的使用场景,如果再页面顶部引用全量打包版本的layui会导致比如导航等无法渲染,必须要将全量js放在导航等元素的下面才能自运行渲染,form至少还有个render方法可以重新渲染一下,所以建议将所有初始化渲染的方法放在页面加载完之后或者给如element等独立提供重新渲染的方法。

最后还有一个问题就是官方的版本modules目录下的js包含的jquery,但是却没有提供jquery的$变量出去,以至于如果需要使用第三方jq库还是得引入一个jquery库,layui.all的体积计算一下的话也应该是内置了一个定制的jquery,所以与其这样还不如精简layui不要内置jquery,要求用户单独引入jquery(如果我理解错误的话请原谅)

element 模块的 bug

element.on('tab(filter)', callback) 为什么要监听 element.tabChange();

对于 element.on('tab(filter)', callback),官方文档描述:tab 选项卡点击切换时触发,回调函数返回一个object 参数,携带两个成员。注意是点击时触发,我手动调用 tabChange() 为什么也会触发?看了源码后发现 tabChange() 方法中调用了 tabClick() 方法,但是不会触发点击事件。

现在有两点解决办法:

  1. element.on('tab(filter)', callback) 不再监听手动调用而非手动点击触发的 tabClick 方法。
  2. 继续监听,但我需要在 element.on('tab(filter)', callback) 回调中 获取当前Tab标题所在的原始DOM元素

紧急提问-第一次用Layui,表单的提交后的回调函数为啥会重复执行两次?

如下代码:

layForm.on('submit(channel-in-confirm)', function (data) {
        alert(2);
        return false;
 });

页面上DOM结构:

<button lay-submit lay-filter="channel-in-confirm" class="layui-btn layui-btn-normal">确认</button>

情景复现:
点击确认按钮后,为啥会弹出两次2,也就是说这里会重复执行,请问是使用的姿势不对吗?看文档就是这样用的吧?
求回复,感激不尽,已star

form内的file input在选择完文件后自动提交表单

问题描述详见在社区链接:https://fly.layui.com/jie/10517/
然后详细看了下代码,发现upload.js第126行有提交表单的操作。
item.parent().submit();

<form target="layui-upload-iframe" method="post" key="set-mine" enctype="multipart/form-data" action="upload"><input name="file" lay-ext="" lay-type="file" lay-title="浏览..." class="layui-upload-file" type="file"></form>

感觉提交错了表单。应该是提交上面代码中upload生成的这个表单,而不是外面我自己写的表单

关于layui表格的一些建议

贤心您好,
最近接触到layui,觉得使用起来很不错,但是对表格,我有些建议,希望能采纳
1、表格分页栏可以扩展一个工具栏,可以实现一些功能,比如下载列表中的报表文档(csv/excel)等等信息
2、对于一些数值型、时间、map或map转的json类型,的列,可以再cols中配置数值、时间的格式化的类型,列表输出的值可以直接格式化,对于参数类型的,可以通过在cols中配置map或者json对象,然后通过列数据的key,在map中取出value;当然这些都可以通过templet来实现,但是希望插件中可以封装类似的功能
3、希望支持内存分页,查询,排序
4、在你的数据表格Demo中>监听单元格事件>点击签名列,弹出修改对话框,关闭对话框以后,该行被选中的灰色背景并没有被移除,而是一直在那个地方.
5.希望支持单双行背景颜色,鼠标悬浮背景颜色,多行选中背景颜色进行区分

因为就目前我使用过也不多,有可能有些功能已经存在。希望layui越来越好.

layer在ios10上面的BUG

//主要问题出现原因
.layui-layer {
    -webkit-overflow-scrolling: touch;
//下面代码是出现使用这个方法的位置
.layui-layer-iframe{
   overflow-y:auto;
   -webkit-overflow-scrolling:touch
}

这段css会再IOS10浏览器里面报错,错误原因是IOS10浏览器的css解析是找不到这个方法。

出现的问题是,比如一篇长文章,你用手指不停(速度要快)的向上或者向下划动屏幕会导致屏幕卡顿(屏幕会出现短暂不渲染,显示浏览器自身底纹),安卓没发现这个问题。

测试浏览器(IOS系统)

微信

苹果自带

UC

测试地址

BUG页面

正常页面

引用layui模块工具包时出错!

java web项目,将官网下载的layui文件夹放入WebRoot目录下,然后出错。layui.js等文件报错:
-Missing semicolon
-Missing semicolon
-Missing semicolon
-Missing semicolon
-Syntax error on token "break",;expected after this token
.....

关于layui的一些建议

layui团队,你们好!
关注了很长时间的layui,本人对前端研究甚少,对于其中很多理念和设计都非常喜欢,layui中对于很多控件分装的很精致,没有过多无用的功能,也能够满足很多开发的需要。在研究文档和使用过程中,也遇到了一些问题,希望layui能够越做越好。

1、layui提供了那么多精致而且实用的控件,让我第一次看到就喜欢上了它,但是layui对于表格的支持却没有想象中的惊艳,只给出了简单地样式区别,当项目涉及一些报表或者表格操作时,使用别的前端控件就会和layui的精致显得格格不入。
2、layui提供模块化加载,使其可以在其他前端框架中单独使用模块,但是在其他前端框架中单独使用layui的过程中,总有些样式或者js和别的插件冲突,导致页面显示不正常。这并不符合layui的独立模块和简单使用的理念。
3、在研究layui使用过程中,发现layui并没有对响应式布局的说明,但是在社区和文档中,确实有对于手机端的支持。不知道是不是我漏掉了某些重要信息。如果确实没有不知道在以后的版本会不会对布局和响应式这方面进行补充。

以上问题,可能对于前端并无伤大雅,但是对于像我这样对前端了解甚少的程序猿确实不好解决。自己也在逐渐学习的过程中,能够碰到这样好用的前端框架自感荣欣,希望layui越做越好。

加载层位置和动画问题

那个加载层出现的时候,为什么不在正中间呢,貌似是一个动画,我用了取消动画也取消不了,help

希望打包的结构能简单点

bootstrap的打包结构

├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js
    ├── bootstrap.js
    ├── bootstrap.min.js
    └── npm.js

layui的打包结构

├── css
│   ├── layui.css
│   ├── layui.mobile.css
│   └── modules
│       ├── code.css
│       ├── laydate
│       │   ├── icon.png
│       │   └── laydate.css
│       └── layer
│           └── default
│               ├── icon-ext.png
│               ├── icon.png
│               ├── layer.css
│               ├── loading-0.gif
│               ├── loading-1.gif
│               └── loading-2.gif
├── font
│   ├── iconfont.eot
│   ├── iconfont.svg
│   ├── iconfont.ttf
│   └── iconfont.woff
├── images
│   └── face
│       ├── 0.gif
│       ├── 1.gif
│       ├── 10.gif
│       ├── 11.gif
│       ├── 12.gif
│       ├── 13.gif
│       ├── 14.gif
│       ├── 15.gif
│       ├── 16.gif
│       ├── 17.gif
│       ├── 18.gif
│       ├── 19.gif
│       ├── 2.gif
│       ├── 20.gif
│       ├── 21.gif
│       ├── 22.gif
│       ├── 23.gif
│       ├── 24.gif
│       ├── 25.gif
│       ├── 26.gif
│       ├── 27.gif
│       ├── 28.gif
│       ├── 29.gif
│       ├── 3.gif
│       ├── 30.gif
│       ├── 31.gif
│       ├── 32.gif
│       ├── 33.gif
│       ├── 34.gif
│       ├── 35.gif
│       ├── 36.gif
│       ├── 37.gif
│       ├── 38.gif
│       ├── 39.gif
│       ├── 4.gif
│       ├── 40.gif
│       ├── 41.gif
│       ├── 42.gif
│       ├── 43.gif
│       ├── 44.gif
│       ├── 45.gif
│       ├── 46.gif
│       ├── 47.gif
│       ├── 48.gif
│       ├── 49.gif
│       ├── 5.gif
│       ├── 50.gif
│       ├── 51.gif
│       ├── 52.gif
│       ├── 53.gif
│       ├── 54.gif
│       ├── 55.gif
│       ├── 56.gif
│       ├── 57.gif
│       ├── 58.gif
│       ├── 59.gif
│       ├── 6.gif
│       ├── 60.gif
│       ├── 61.gif
│       ├── 62.gif
│       ├── 63.gif
│       ├── 64.gif
│       ├── 65.gif
│       ├── 66.gif
│       ├── 67.gif
│       ├── 68.gif
│       ├── 69.gif
│       ├── 7.gif
│       ├── 70.gif
│       ├── 71.gif
│       ├── 8.gif
│       └── 9.gif
├── lay
│   ├── dest
│   │   └── layui.all.js
│   └── modules
│       ├── code.js
│       ├── element.js
│       ├── flow.js
│       ├── form.js
│       ├── jquery.js
│       ├── laydate.js
│       ├── layedit.js
│       ├── layer.js
│       ├── laypage.js
│       ├── laytpl.js
│       ├── mobile.js
│       ├── tree.js
│       ├── upload.js
│       └── util.js
└── layui.js

个人觉得还是直接引入一个css,一个js的开发者比较多,没多少人愿意还分模块去加载,一次加载完,浏览器还可以缓存,没多大的影响吧

真想做模块化也可以做个页面,让用户自己需要什么模块就选什么模块,然后一次性打包 比如 http://v3.bootcss.com/customize/


下面是建议

images/face 下的图片都不大,可以做成base64,放到css里去

最后感谢开源了这么好看的css框架!

请问一个form表单里的事件监听怎么写?

通过form.on来监听好像只能监听submit之类的事件。

如果我想监听form表单里一个普通的button事件。应该怎么写。
比如

<div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-inline">
                    <input type="text" name="i_img" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-small" id="uploadBtn" lay-filter="uploadBtn" type="button">上传</button>
            </div>
        </div>

测试过使用

$('#uploadBtn').on('click',function(){
            console.log(22);
        }) ;

form.on('submit(uploadBtn)',function(){
            console.log(22);
        });

都不能起作用。

关于select主动触发

现在需求是进入页面就触发下拉选择异步加载数据,但是找了半天这个下拉框怎么触发变更事件啊

多级表头colspan=1出现异常

数据表格中,我想实现多级表头,第一级表头是中文(只有1列),第二级表头对应的是英文(也是只有1列),因此需要指定colspan=1,但是数据表格渲染出来后,会出现表头和数据错位的情况,无法使用。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.