• 《Layui官方教程文档》

  • 价格:免费
  • 状态:全书已完结
  • 在读人数:17
  • 热度:737
创建者
  • 我怕黑
  • 20 粉丝 15博客
内容简介

什么是Layui? Layui是开源模块化前端 UI 组件库,基于浏览器端原生态模式,面向全层次的前后端开发者,易上手且开源免费的 Web 界面组件库。

layui有什么特点?

1.返璞归真
身处在前端社区的繁荣之下,我们都在有意或无意地追逐。而 layui 偏偏回望当初,奔赴在返璞归真的漫漫征途,自信并勇敢着,追寻于原生态的书写指令,试图以最简单的方式诠释高效。


2.双面体验
拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视觉所见的外在,是开发所念的简易。丰盈是倾情雕琢的内在,是信手拈来的承诺。一切本应如此,简而全,双重体验。


3.星辰大海
如果眼下还是一团零星之火,那运筹帷幄之后,迎面东风,就是一场烈焰燎原吧,那必定会是一番尽情的燃烧。待,秋风萧瑟时,散作满天星辰,你看那四季轮回,正是 layui 不熄的执念。

本教程基于Layui官方文档整理而来,是你开发,学习的不二选择。

章节目录
  • 第一章 基础说明
  • 1.1 开始使用 - 入门指南
  • layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过
  • 1.2 底层方法
  • 本篇主要介绍基础库所发挥的作用,其中过滤了大部分在外部不常用的方法,侧重罗列了基础框架支撑。全局配置 方法:layui.config(options) 你可以在使用模块之前,全局化配置一些参数,尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少,这也是为了减少一些不必要的工作,尽可能让使用变得更简单。目前支持的全局配置项如下: layui.con
  • 1.3页面元素规范与说明
  • layui 提倡返璞归真,遵循于原生态的元素书写规则,所以通常而言,你仍然是在写基本的 HTML 和 CSS 代码,不同的是,在 HTML 结构上及 CSS 定义上需要小小遵循一定的规范。 CSS 内置公共基础类 类名(c
  • 1.4 模块规范
  • layui 定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后,成为 layui 最核心的模块加载引擎。预先加载模块layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候,且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义: layui.use(['form', 'upl
  • 1.5 常见问题
  • 本篇将主要讲解使用过程中普遍遇到的“问题”,并非是 BUG,通常是需要我们自己去注意的一些点。(持续补充) 哪里有 layui 未压缩源代码? 之所以在下载包里没有提供未压缩的源代码,是为了方便直接用于生产环境。layui 源代码可通过以下平台获取: 1.GitHub 2.Gitee 应该如何加载模块? JS layui.use([&#3
  • 第二章 页面元素
  • 2.1 栅格系统与后台布局
  • 如你所愿,在 layui 2.0 的版本中,我们加入了强劲的栅格系统和常见的管理系统布局方案,这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则,内置手机、平板、PC 桌面中大型屏幕的多终端适配处理,最低能支持到 ie8。而你应当更欣喜的是,layui 终于开放了它经典的管理系统
  • 2.2 layui 配色方案
  • 视觉疲劳源自颜色过于丰富或过于单一形成的麻木感,而 layui 提供的色彩,清新而不乏深沉,相互柔和,不过分刺激大脑皮层的神经反应,形成经久耐看的微妙视图。合理搭配,可避免与各式各样的页面产生违和感,使你的 Web 页面看上去更为融洽。 基色调#009688主色调#5FB878次色调#1E9FFF经典蓝#393D49常用于导航la
  • 2.3 字体图标
  • layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。使用方式 通过对一个内
  • 2.3 CSS3动画类
  • 在实用价值的前提之下,我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中,发挥着重要的作用。layui 的动画全部采用 CSS3,因此不支持 ie8 和部分不支持 ie9。 使用方式 动画的使用非常简单,直接对元素赋值动画特定的 class 类名即可。如:
  • 2.4 按钮
  • 向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。 用法 <button type="button" class="layui-b
  • 2.5 表单
  • 在一个容器中设定 class="layui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。 依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能) 小睹为快通过上
  • 2.6 导航相关 - 页面元素
  • 导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交
  • 2.7 菜单
  • 菜单是页面必不可少的元素,我们希望它是通用的,所以在结构上,它的组成极其灵活。而事实上,在基础菜单还没有正式推出之前,垂直导航(layui-nav-tree)曾顶替了它的角色,尤其是在管理系统中发挥了举足轻重的作用。尽管它们本质上都属于「菜单」的范畴,但我们姑且约定将水平的称之为「导航」,垂直的称之为正统
  • 2.8 Tab选项卡
  • 导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。 依赖加载组件:element (请注意:必须加载element模块,相关功能才能正常
  • 2.9 进度条
  • 进度条可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素。 依赖加载组件:element 常规用法我们进度条提供了两种尺寸及多种颜色的显示风格,其中颜色的选值可参考:背景色公共类。基本元素结构如下HTML结构 <div class="layui-progress">&
  • 2.10 面板
  • 一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等 依赖加载组件:element 常规面板代码:<div class="layui-row layui-col-space15"><div class="layui-
  • 2.11 表格
  • 本篇为你介绍表格的HTML使用,你将通过内置的自定义属性对其进行风格的多样化设定。请注意:这仅仅局限于呈现基础表格,如果你急切需要的是数据表格(datatable),那么你应该详细阅读:table模块 常规用法昵称加入时间签名贤心2016-11-29人生就像是一场修行许闲心2016-11-28于千万人之中遇见你所遇见的人,于千万年
  • 2.12 徽章
  • 徽章是一个修饰性的元素,它们本身细小而并不显眼,但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬,而显得十分和谐。 快速使用 不妨先来看看 徽章 这个小小的大家族吧:你可能已经敏锐地发现,除去花枝招展的七种颜色,徽章具有三种不同的风格类型:小圆点、椭圆体、边框体 小圆点,通过 layui-badge-dot 来定义,里面不能加文字 <span class="layui-
  • 2.13 时间线
  • 将时间抽象到二维平面,垂直呈现一段从过去到现在的故事。 快速使用对应的代码 <ul class="layui-timeline"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"
  • 2.14 简单辅助元素
  • 本篇主要集中罗列页面中的一些简单辅助元素,如:引用块、字段集区块、横线等等,这些元素都无需依赖任何模块 引用区块目前内置了上述两种风格HTML结构 <blockquote class="layui-elem-quote">引用区域的文字</blockquote> <blockquote class=&quo
  • 第三章 内置模块
  • 3.1 弹层组件
  • layer 作为 Layui 的代表性组件 ,比 Layui 要出现的早,作为 Layui 最早的源动力,layer 的使用之广泛甚至一度超过了 Layui 本身。 layer 拥有众多的自定义功能,也是许多开发者的网页弹出层的首选交互方案
  • 3.2 日期和时间组件
  • laydate 曾作为 Layui 的单独组件而存在,因此其采用的是原生 JS 编写(可单独引用)。目前也是 Layui 的常用组件之一。 模块加载名称:laydate 快速使用 这是一个最简单的示例: <!D
  • 3.3 分页模块组件
  • layPage 致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。自 layui 2.0 开始,无论是从核心代码还是API设计,layPage 都完成了一次蜕变。清爽的 UI、灵活的排版,极简的调用方式,这一切的优质元素,都将毫无违和感地镶嵌在你的页面之中。 模块加载
  • 3.4 模板引擎组件
  • laytpl 是一款轻量的 JavaScript 模板引擎,在字符解析上有着比较出色的表现。 模块加载名称:laytpl,在线调试:/demo/laytpl.html快速使用 laytpl 模板可与数据共存,这意味着可直接在模板中处理逻辑。 layui.use('laytpl', function(){var la
  • 3.5 table 数据表格插件
  • table 是 layui 中使用频率非常高的一个组件,用于在表格中对数据进行一系列动态化的操作,涵盖了日常业务所涉及的大部分需求 模块加载名称:table 快速使用上面你已经看到了一个简单数据表格的基本样子,你一定迫不及待地想知道它的使用方式: 对应的代码 <!DOCTYPE html> <html> <head><m
  • 3.6 表单插件
  • 在一个容器中设定 class="layui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。 依赖加载模块:form (请注意:如
  • 3.7 上传插件 upload
  • 上传模块自 layui 2.0 的版本开始,进行了全面重写,这使得它不再那么单一,它所包含的不仅是更为强劲的功能,还有灵活的 UI。任何元素都可以作为上传组件来调用,譬如按钮、图片、普通的 DIV 等等,而不再是一个单调的 file 文件域。模块加载名称:upload快速使用 一切从小试牛刀开始。通常情况下,我
  • 3.8 下拉菜单组件
  • dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件,它将原本静态呈现的菜单,通过各种事件的形式触发,从而以独立面板的形式弹出。不仅可用作常见的「下拉菜单」,更可用于「右键菜单」来实现更多的交互可能。 模块加载名称:dropdown 快速使用代码: <button class=&quot
  • 3.9 树形组件
  • 在一段漫长的雪藏后,我们在 layui 2.5.0 的版本中重新创作了 tree,以便它能够更加适用于绝大多数业务场景,而风格依然遵循 layui 独有的极简和清爽。需要提醒的是,如果您的项目中仍然采用了 layui 2.5 版本之前的 tree,它将不被兼容,请尽快修改为以下新的调用方式。 模块加载名称:tree 快速使用 通过 tree.render() 方
  • 3.10 颜色选择器组件
  • 在主题定制的应用场景中,自然离不开颜色的自定义。而你往往需要的是关于它的直观选择,于是 colorpicker 模块姗姗来迟,它支持 hex、rgb、rgba 三类色彩模式,在代码中简单的调用后,便可在你的网页系统中自由拖拽去选择你中意的颜色。 模块加载名称:colorpicker 注意:colorpicker 为
  • 3.11 常用元素操作
  • 页面中有许多元素需要自动去完成一些处理,譬如导航菜单的小滑块、Tab 的切换等操作,他们往往不需要去单独调用一个方法来开启一项功能,而页面上恰恰有太多这样的小交互,所以我们统一归类为 element 组件。 模块加载名称:element 使用 元素功能的开启只
  • 3.12 滑块插件
  • 作为一个拖拽式的交互性组件,滑块往往能给产品带来更好的操作体验。layui 深以为然,slider 模块包含了你能想到的大部分功能,尽管它可以作为一个独立的个体,但很多时候它往往会出现 form 元素中,想象一下吧。 模
  • 3.13 评分组件
  • rate 评分组件在电商和 O2O 平台尤为常见,一般用于对商家进行服务满意度评价。外形依然小巧自然,功能依旧灵活实用。其中评分对应的自定义内容功能,可让它有更多的发挥空间。该组件为 2.3.0 版本新增 模块加载名称:rate 使用 rate 组件可以用来进行展示或评价,你只需要通过更改参数设定来开启你想要的功能,如下是一个最基本的例子: layui.rate小例子 &l
  • 3.14 通用轮播组件
  • carousel 是 layui 2.0 版本中新增的全新模块,主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,更可以胜任 FullPage (全屏上下轮播)的需求,简洁而不失强劲,灵活而优雅。
  • 3.15 流加载组件
  • 该模块包含信息流加载和图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了,但不妨现在开始,体验一下Layui更为简单和高效的Flow吧。 模块加载名称:flow 使用 flow模块包含两个核心方法,如下所示: layui.use('flow', function(){va
  • 3.16 工具集组件
  • 我们将一些工具性元素放入 util 模块中,以供选择性使用。其内部由多个小工具组件组成,他们也许不是必须的,但很多时候却能为你的页面提供良好的辅助作用。 模块加载名称:util 固定块 语法:util.fixbar(options) 其中参数 options 是一个对象,可支持的key如下表:参数类型描述bar1Boolean/String默认false
  • 3.17 代码文本修饰组件
  • code 是 Layui 中一款非常轻量和易用的代码区域或文本行修饰组件。 模块加载名称:code 使用 这是一个简单的示例: html <pre class="layui-code"> // 在里面存放任意的文本内容 code line code line </pre><!
读者评论
  • 你还没登录,点击这里
  • 本书评论
最近这些人在读这本书