Layui - easy to use front end UI framework

Yuxuan Xiaoqing 2021-05-03 08:59:21
layui easy use end ui


Front end frameworks and ideas are constantly changing , The current mainstream front-end framework is basically based on MVVM At the bottom , It will unavoidably make some developers feel uncomfortable , Especially for the back-end staff who are unfamiliar with the front-end development .Layui, Return to “ Classic modularity ” The front end of the idea , Try to build a browser oriented front-end application in the simplest and fastest way .


LayUI - Easy to use front end UI frame

Layui


brief introduction

Layui, yes sentsin stay Github Open source on a front-end using its own module specification UI frame , The warehouse is located at https://github.com/sentsin/layui(https://gitee.com/sentsin/layui), The current version is 2.6.5.

Layui A front end written with its own module specification UI frame , Follow the original HTML/CSS/JS Development mode , Easy to use , Use immediately . Its

  • The style is simple and light , And the components are elegant and rich , Every detail from the source code to the method of use has been carefully carved , Very suitable for the rapid development of web interface
  • Different from those based on MVVM The underlying front-end framework , But it's not against the road , It's about returning to nature .
  • More for back-end developers , You don't have to get involved in front-end tools , Just face the browser itself , Let all the elements and interactions you need , Come from here

LayUI - Easy to use front end UI frame

layui


Use

Front end framework different from mainstream ,Layui Don't depend on NPM and Yarn And so on , Just download layui, Then deploy it to the static resource project directory , And introduce the following document :

./layui/css/layui.css./layui/layui.js

You can develop .Layui The structure of the project is as follows :

 ├─css //css Catalog │ │─modules // modular css Catalog ( Generally, if the module is relatively large , We'll extract... Separately , as follows :) │ │ ├─laydate │ │ └─layer │ └─layui.css // Core style file ├─font // Font Icon Directory └─layui.js // Core library 

You can also use CDN introduce :

<!-- introduce layui.css --><link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css"> <!-- introduce layui.js --><script src="//unpkg.com/layui@2.6.5/dist/layui.js">

Of course , Use NPM It's also possible to download :

npm i layui

layui Compatible with all browsers on the market (IE6/7 With the exception of ), Can be used as Web Interface quick development plan .

Let's look at a basic Layui Examples of use :

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title> Start using layui</title> <link rel="stylesheet" href="../layui/css/layui.css"></head><body> <!-- Yours HTML Code --> <script src="../layui/layui.js"></script><script>// It's usually written directly in a js In file layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World');});</script> </body></html>

If you are familiar with jQuery The front-end development of the times , I believe you will not be unfamiliar with this form . In this case , We wrote the simplest HTML file , introduce Layui Provided CSS Style files and JS library , And use it directly script tag For initialization use .

One layui Modules are defined like this :

//layui Definition of modules ( new js file )layui.define([mods], function(exports){ //…… exports('mod', api);}); //layui Use of modules layui.use(['mod1', 'mod2'], function(args){ var mod = layui.mod1; //…… }); 

Layui Defined as 「 Classic modularity 」, Avoid the present JS Mainstream community programs , Try to interpret efficiency in as simple a way as possible .Layui Have the ability to AMD Shadow , It's not limited to CommonJS The rules and regulations of ,layui I think this kind of lightweight organization , Than WebPack More in line with most scenarios . So stick to classic modularity , It's the complex configuration that allows people to avoid tools , Return to simplicity , Quietly and efficiently weave the original ecological HTML/CSS/JS.

however layui It's not RequireJS Module loaders like that , It's a UI Solution , And BootStrap And the difference is :layui Blending their own understanding of classic modularity . This allows you to layui Within the framework of the organization , With more maintainable code 、 To better weave rich user interfaces .

Can follow layui Create an entry file according to the module specification of , And pass layui.use() Method to load the entry file , As shown below :

<!-- You introduced layui.js Suggestions are downloaded from the home page of the official website . Of course, it can also be done by github or gitee clone --><script src="./layui/layui.js"></script> <script>layui.config({ base: '/res/js/modules/' // The directory where you store the new module , Be careful , No layui Module directory }).use('index'); // Loading entry </script> 

Aforementioned index For you /res/js/modules/ In the catalog index.js, Its content should be as follows :

/** index.js project JS The main entrance Rely on layui Of layer and form Module as an example **/ layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); exports('index', {}); // Be careful , This is the core of the module output , The module name must be the same as use The module name is the same as the module name }); 


Layui Provides a large number of page elements and controls , It basically includes all the elements of the mainstream front-end framework .Layui Provide grid layout , Use a responsive row and column pattern :

<div class="layui-container"> General layout ( Take a medium screen desktop for example ): <div class="layui-row"> <div class="layui-col-md9"> Your content 9/12 </div> <div class="layui-col-md3"> Your content 3/12 </div> </div> Mobile devices 、 Flat 、 Different performance of desktop side : <div class="layui-row"> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> Move :6/12 | Flat :6/12 | desktop :4/12 </div> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> Move :6/12 | Flat :6/12 | desktop :4/12 </div> <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> Move :4/12 | Flat :12/12 | desktop :4/12 </div> <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> Move :4/12 | Flat :7/12 | desktop :8/12 </div> <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> Move :4/12 | Flat :5/12 | desktop :4/12 </div> </div></div>

LayUI - Easy to use front end UI frame

Grid layout

Layui Provides a beautiful and powerful form

<form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label"> Input box </label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder=" Please enter a title " autocomplete="off" class="layui-input"> </div> ...

LayUI - Easy to use front end UI frame

Forms

Layui Provides easy-to-use data tables , You can intelligently render beautiful tables from data :

layui.use('table', function(){ var table = layui.table; // First instance table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' // Data interface ,page: true // Open paging ,cols: [[ // Header {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: ' user name ', width:80} ,{field: 'sex', title: ' Gender ', width:80, sort: true} ,{field: 'city', title: ' City ', width:80} ,{field: 'sign', title: ' Signature ', width: 177} ,{field: 'experience', title: ' integral ', width: 80, sort: true} ,{field: 'score', title: ' score ', width: 80, sort: true} ,{field: 'classify', title: ' occupation ', width: 80} ,{field: 'wealth', title: ' Wealth ', width: 135, sort: true} ]] }); });

LayUI - Easy to use front end UI frame

form

Layui It also implements a powerful template engine laytpl, Templates can coexist with data , This means that the logic can be handled directly in the template .

layui.use('laytpl', function(){ var laytpl = layui.laytpl; // Parsing characters directly laytpl('{{ d.name }} It's a male ape ').render({ name: ' Virtuous heart ' }, function(string){ console.log(string); // Xianxin is a male ape }); // You can also use the following synchronous writing , take render Method , You can return the rendered characters directly var string = laytpl('{{ d.name }} It's a male ape ').render({ name: ' Virtuous heart ' }); console.log(string); // Xianxin is a male ape // If the template is large , You can also use the data approach , This will be more intuitive laytpl([ '{{ d.name }} It's a male ape ' ,' Other characters {{ d.content }} Other characters ' ].join(''))}); 


summary

Layui It adopts a different idea from the current mainstream front-end framework , Using its own classic modular specification , And follow the original HTML/CSS/JS Development mode , For traditional browser development , But it's different , It's more powerful 、 beautiful 、 Simple toolset .

Layui Easy to use , Use immediately , The style is simple and light , The components are elegant and plentiful , Very suitable for the rapid development of web interface . It's more for back-end developers , You don't have to get involved in front-end tools , Just face the browser itself , Let all the elements and interactions you need .


LayUI - Easy to use front end UI frame

layui

版权声明
本文为[Yuxuan Xiaoqing]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503085709214y.html

  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless