layui是一款深受开发者喜爱的前端UI框架,以下是我对学习layui的一些心得:
首先,我被layui的简洁设计所吸引。其设计理念是“简约而不简单”,这一点在API设计上体现得淋漓尽致。无论是组件的调用方式还是参数设置,都力求直观易懂,使得初学者也能快速上手,大大降低了学习门槛。
其次,layui提供的丰富组件是我深感便利之处。从基础的按钮、表格、表单,到复杂的导航、弹出层、提示信息等,几乎涵盖了网页开发中的所有常见需求。这些组件不仅功能强大,而且样式美观,极大地提升了页面的视觉效果和用户体验。
再者,layui的官方文档是我学习过程中的重要参考。文档详细记录了每个组件的使用方法、参数说明和示例代码,让我在遇到问题时能够迅速找到解决方案。这种详尽的文档支持无疑为学习和使用layui提供了极大的便利。
另外,layui的兼容性也给我留下了深刻印象。无论是在PC端还是移动端,无论是在哪种浏览器环境下,layui都能保持良好的展示效果,这无疑增强了我在项目开发中的信心。
此外,layui活跃的社区氛围也是我非常喜欢的一点。在社区中,我可以提问、分享经验、获取帮助,与广大开发者共同进步。这种互动交流的环境对于解决问题和提升技能都有着极大的帮助。
最后,我要提到的是layui的高度定制化特性。它提供了丰富的自定义选项,可以根据项目需求进行灵活调整,满足个性化需求。这对于追求创新和独特的开发者来说,无疑是一个巨大的优势。
总的来说,学习和使用layui不仅可以提高开发效率,提升页面美观度和用户体验,还能在互动交流和持续学习中不断提升自己的技术水平。然而,我们也需要注意合理使用组件,避免过度依赖框架,保持代码的可读性和可维护性。只有这样,我们才能真正发挥出layui的强大威力,创造出更多优秀的网页作品。
一、layui优点
是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,开箱即用。
第三方支持:
Layui部分模块依赖jQuery(比如layer),但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块,当你去使用 layer 之类的模块时,它会首先判断你的页面是否已经引入了jQuery,如果没有,则加载内部的jQuery模块,如果有,则不会加载。
layui 的模块是基于 layui.js 内部实现的异步模块加载方式,它并不遵循于AMD,而是自己定义了一套更轻量的模块规范。
<link rel="stylesheet" href="./plugins/layui/css/layui.css" type="text/css">
<!-- 可加自己的jquery -->
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./plugins/layui/layui.js"></script>
二、layui提供了页面的功能
layui提供了15中页面元素,其中包括了:布局、颜色、图标、动画、按钮、表单、导航、
菜单、选项卡、进度条、面板、表格、徽章、时间线、辅助等模块
栅格系统与后台布局
为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
栅格布局规则:
1.采用 layui-row 来定义行,如:<div class="layui-row"></div>
2.采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。
3.列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5. 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!
实例的代码:
<div class="layui-row">
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo">3/12</div>
</div>
</div>
layui提供了一些颜色,以下是实例:
layui提供了一些按钮:
<div class="layui-btn-container">
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
<button type="button" class="layui-btn layui-bg-orange">橙色按钮</button>
<button type="button" class="layui-btn layui-bg-red">红色按钮</button>
<button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>
layui图标:
以下是实例的代码:
<i class="layui-icon layui-icon-face-smile"></i>
<div>
你可以去定义它的颜色或者大小,如:
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
</div>
layui提供了一些动画:
以下是代码实例:
<script>
layui.use(function(){
var $ = layui.$;
var elem = $('#example-anim-element');
var animName = 'layui-anim-down'; // 动画类名
// 通过事件简单演示动画过程
$('#example-anim-usage').on('click', function(){
elem.removeClass(animName);
setTimeout(function(){
elem.addClass(animName); // 给目标元素追加「往下滑入」的动画
});
});
});
</script>
layui还提供了一些API和事件:
以下是API的实例:
还有属性,定义一些特定属性来配合组件的使用,它们一般以 lay-*
为命名格式,以下是实例:
<form class="layui-form" lay-filter="form-1">
<input type="text" class="layui-input" lay-verify="email">
<input type="checkbox" lay-skin="switch" lay-filter="agree" title="同意">
<button class="layui-btn" lay-submit>提交</button>
</form>
属性实例:
属性 | 值 | 描述 |
---|---|---|
title | 自定义 | 设置表单元素标题,一般用于 checkbox,radio 元素 |
lay-filter | 自定义 | 设置表单元素的过滤器,以便用于执行相关方法时的参数匹配 |
lay-verify | required 必填项phone 手机号email 邮箱url 网址number 数字date 日期identity 身份证
自定义规则值 | 设置表单项的验证规则,支持单条或多条规则(多条用| 分隔),如:lay-verify="required" lay-verify="required|email" lay-verify="其他自定义规则值"
自定义规则的用法:#详见 注:2.8.3 版本中调整了内置规则,不再强制必填。 如需保留必填,可叠加 required 规则,如:lay-verify="required|number" |
lay-vertype | tips 吸附层alert 对话框msg 默认 | 设置验证异常时的提示层模式 |
lay-reqtext | 自定义 | 设置必填项(lay-verify="required" )的默认提示文本 |
lay-affix | #详见 | 输入框动态点缀,<input type="text"> 元素 私有属性 |
lay-skin | #详见 | 设置 UI 风格。 <input type="checkbox"> 元素 私有属性 |
lay-search | 默认不区分大小写; 设置 cs 区分大小写 | 给 select 组件开启搜索功能。<select> 元素 私有属性 |
lay-submit | 无需值 | 设置元素(一般为<button> 标签)触发 submit 提交事件 |
lay-ignore | 无需值 | 设置表单元素忽略渲染,即让元素保留系统原始 UI 风格 |
渲染
form.render(type, filter);
- 参数
type
可选,对应表单组件类型,支持:input,select,checkbox,radio
;若不填,则指向所有类型。 - 参数
filter
可选,对应class="layui-form"
所在元素的lay-filter
属性值,用于指定需渲染的表单区域。
等等功能。
总的来说,学习和使用layui是一次充实且有益的经历。其简洁的设计、丰富的组件、详尽的文档、良好的兼容性、活跃的社区以及高度的定制化特性,都为我提供了极大的便利和启发。 layui不仅提升了我的开发效率,优化了页面效果,也促进了我的技能提升和知识拓展。然而,我也认识到,尽管layui功能强大,但合理使用和保持代码的清晰、可读与可维护性同样重要。在未来的学习和工作中,我将持续关注layui的更新和发展,将其优点最大化地应用于实践,创造出更多优质的前端作品。