一套开源的 Web UI 组件库。采用自身极简的模块化规范，并遵循原生 HTML/CSS/JS 的开发模式，极易上手，开箱即用。非常适合网页界面的快速构建。

Go to file

蒋文健 be35ed0b55 增加行的上下文菜单事件增加行的上下文菜单事件和是否显示系统默认上下文菜单事件的配置，方便在表格行上使用`layui.dropdown`组件。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>开始使用 layui</title> <link href="./layui/css/layui.css" rel="stylesheet"> </head> <body> <!-- 你的 HTML 代码 --> <table id="demo" lay-filter="test"></table> <script src="./layui/layui.js"></script> <script> layui.use(['layer', 'table', 'dropdown'], function(){ var layer = layui.layer; var table = layui.table; //第一个实例 table.render({ elem: '#demo' // 不显示系统默认上下文菜单 ,defaultContextmenu: false ,height: 312 ,data: [ {"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"words":82830700,"classify":"作家","score":57} ,{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"words":64928690,"classify":"词人","score":70.5} ,{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"words":6298078,"classify":"酱油","score":31} ,{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"words":37117017,"classify":"诗人","score":68} ,{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"words":76263262,"classify":"作家","score":6} ,{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"words":60344147,"classify":"作家","score":87} ,{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"words":57768166,"classify":"作家","score":34} ,{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"words":82030578,"classify":"作家","score":28} ,{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"words":16503371,"classify":"词人","score":14} ,{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"words":86801934,"classify":"词人","score":75} ] ,page: true //开启分页 ,limit: 2 ,limits: [2, 5, 10] ,cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: '用户名', width:80} ,{field: 'sex', title: '性别', width:80, sort: true} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177} ,{field: 'experience', title: '积分', width: 80, sort: true} ,{field: 'score', title: '评分', width: 80, sort: true} ,{field: 'classify', title: '职业', width: 80} ,{field: 'words', title: '字数', width: 135, sort: true} ]] }); table.on('contextmenu(test)', function(obj){ // 下拉菜单组件 layui.dropdown.render({ show: true ,trigger: 'contextmenu' ,data: [ {title: '操作1', id: 'event1'}, {title: '操作2', id: 'event2'} ], click(data, othis) { console.log(data) } }); }); }); </script> </body> </html> ```		2023-01-04 16:08:54 +08:00
.gitee	优化 gitee issue 模板	2022-07-25 11:47:48 +08:00
.github	update PR template for github	2022-07-20 20:04:28 +08:00
dist	发布 v2.8.0-rc.5	2022-12-12 23:10:55 +08:00
docs	新增 docs 相关说明	2022-09-18 12:07:33 +08:00
examples	更新 laydate 快捷选择面板示例	2022-12-07 18:18:00 +08:00
src	增加行的上下文菜单事件	2023-01-04 16:08:54 +08:00
.gitignore	update	2022-06-08 01:21:33 +08:00
CHANGELOG.md	update	2022-05-18 22:35:13 +08:00
CONTRIBUTING.md	优化 gitee issue 模板	2022-09-02 13:35:20 +08:00
DISCLAIMER.md	更新 DISCLAIMER 文字说明细节	2022-09-02 13:36:17 +08:00
LICENSE	update	2022-05-18 22:56:32 +08:00
README.md	增加 Cloud IDE 在线预览链接	2022-12-07 10:36:35 +08:00
gulpfile.js	更新 comment	2022-12-07 18:28:57 +08:00
package.json	更新 version	2022-12-12 23:08:55 +08:00
preview.yml	Create preview.yml	2022-12-07 10:35:36 +08:00

README.md

Layui

Classic modular front-end UI library

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>开始使用 Layui</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
  </head>
  <body>
    <!-- HTML -->
     
    <script src="./layui/layui.js"></script>
    <script>
    // 使用组件
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer;
      var form = layui.form;
      
      // 欢迎语
      layer.msg('Hello World');
    });
    </script> 
  </body>
</html>