1.layui 页面元素规范
-CSS内置公共基础类:
类名(class) 说明
布局 / 容器
layui-main 用于设置一个宽度为 1140px 的水平居中块(无响应式)
layui-inline 用于将标签设为内联块状元素
layui-box 用于排除一些UI框架(如Bootstrap)强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear 用于消除浮动(一般不怎么常用,因为layui几乎没用到浮动)
layui-btn-container 用于定义按钮的父容器。(layui 2.2.5 新增)
layui-btn-fluid 用于定义流体按钮。即宽度最大化适应。(layui 2.2.5 新增)
辅助
layui-icon 用于图标
layui-elip 用于单行文本溢出省略
layui-unselect 用于屏蔽选中
layui-disabled 用于设置元素不可点击状态
layui-circle 用于设置元素为圆形
layui-show 用于显示块状元素
layui-hide 用于隐藏元素
文本
layui-text 定义一段文本区域(如文章),该区域内的特殊标签(如a、li、em等)将会进行相应处理
layui-word-aux 灰色标注性文字,左右会有间隔
背景色
layui-bg-red 用于设置元素赤色背景
layui-bg-orange 用于设置元素橙色背景
layui-bg-green 用于设置元素墨绿色背景(主色调)
layui-bg-cyan 用于设置元素藏青色背景
layui-bg-blue 用于设置元素蓝色背景
layui-bg-black 用于设置元素经典黑色背景
layui-bg-gray 用于设置元素经典灰色背景
2.CSS3动画类
顶部往下滑入:layui-anim-down
微微往下滑入:layui-anim-downbit
底部往上滑入:layui-anim-up
微微往上滑入:layui-anim-upbit
平滑放大:layui-anim-scale
弹簧式放大:layui-anim-scaleSpring
平滑放小:layui-anim-scalesmall
弹簧式放小:layui-anim-scalesmall-spring
渐现:layui-anim-fadein
渐隐:layui-anim-fadeout
360度旋转:layui-anim-rotate
循环动画:追加:layui-anim-loop
用法
折叠插件使用一些Class类来处理复杂的事务:
.collapse 隐藏内容
.collapse.show 显示内容
.collapsing 在转换开始时被添加,当它完成时则移除。
利用data数据属性
将 data-toggle= "collapse" 和 data-target 添加到元素中,可自动指定折叠面板的控制项,其中 data-target 属性接受CSS选择器,以应用折叠。确保向可折叠面板添加collapse添加到可折叠面板组件之上。如果你希望它默认是打开的,可定义额外的 show属性。
为了给一个折叠块控件添加类似手风琴组的效果,还需要添加data属性data-parent= "#selector"。
利用JavaScript
人为启用它: $('.collapse').collapse()
选项
可通过data属性或JavaScript传递选项。如用data属性,请把选项名追加到data-后面(如写为data-parent="")。
名类 Type类型 默认值 描述
parent selector | jQuery object | DOM element false 如果提供了一个选择器,然后当某个折叠块打开时,这个指定的父元素下面所有别的折叠块元素都将自动关闭(类似于传统的手风琴样式 - 这依赖card样式),属性必须在目标可折叠区域上定义。
toggle boolean true 在调用中折叠块元素。
方法
异步传输方法和转义
所有的API方法都是 异步传输和轮换, 一旦 事件发生(开始),在结束之前,它们会持续返回给调用者。另外在过渡组件上的方法将被忽略。
.collapse(options)
启用你的可折叠对象,通过 object方法。
$('#myCollapsible').collapse({
toggle:
false
})
.collapse('toggle')
即发生 shown.bs.collapse 或 hidden.bs.collapse 事件前)返回给调用者。
.collapse('show')
显示可折叠元素, 在可折叠元素实际显示之前(即shown.bs.collapse 事件发生之前)返回给调用者。
.collapse('hide')
隐藏可折叠元素, 在可折叠元素实际上被隐藏之前(即hidden.bs.collapse 事件发生之前)返回给调用者。
.collapse('dispose')
销毁一个元素的折叠。
事件
Bootstrap提供为折叠面板提供了一系列事件属性。
事件类别 描述
show.bs.collapse 当调用show 方法时,会立即触发事件。
shown.bs.collapse 用户可见折叠面板中的块时,会触发此事件(需要等CSS加载过渡完成)。
hide.bs.collapse 当调用hide 方法时,立即触发该事件。
hidden.bs.collapse 当折叠面板中的块对于用户完全隐藏时(需要等CSS加载过渡完成),会触发该事件)。
$('#myCollapsible').on('hidden.bs.collapse', function ()
{ })
4.单个提示冒泡的数据属性
单个提示冒泡的选项可以通过使用data数据属性来替补指定,
方法
异步传输和转换
所有的API方法都是异步的,并开始一个转换。一旦转换开始但在结束之前,它们就返回给调用者。另外,一个转换组件的方法调用将被忽略。
$().tooltip(options)
将一个元素附加一个提示冒泡处理程序。
.tooltip('show')
显示一个元素的提示冒泡, 在提示冒泡真正显示之前返回给调用者(即shown.bs.tooltip 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡,零长度的提示框不会显示。
$('#element').tooltip('show')
.tooltip('hide')
隐藏元素的冒泡提示,在提示冒泡框实际被隐藏之前返回给调用者(即 hidden.bs.tooltip 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡。
$('#element').tooltip('hide')
.tooltip('toggle')
切换元素的工具提示冒泡,在提示冒泡真正显示或隐藏之前返回给调用者(即 shown.bs.tooltip 或 hidden.bs.tooltip 事件发生前)。这将被识别为一个“人为”的手动触发提示冒泡。
$('#element').tooltip('toggle')
.tooltip('dispose')
隐藏或破坏元素的提示冒泡,使用委派(创建时 使用了 selector 选项)的提示冒泡不能在后代触发元素上单独销毁。
$('#element').tooltip('dispose')
.tooltip('enable')
给一个元素的提示冒泡显示的功能, 默认情况下启用Tooltip提示冒泡。
$('#element').tooltip('enable')
.tooltip('disable')
删除元素的提示冒泡的显示功能,只有在重新启用后,才能显示提示冒泡。
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
切换元素的提示冒泡显示或隐藏的能力。
$('#element').tooltip('toggleEnabled')
.tooltip('update')
更新tooltip提示冒泡的位置。
$('#element').tooltip('update')
活动
Event事件类型 描述
show.bs.tooltip 当调用show 实例方法时,会立即触发该事件。
shown.bs.tooltip 当提示冒泡对用户来说可见时(需要等待CSS过渡完成),会触发该事件。
hide.bs.tooltip 当调用hide实例方法时,会立即触发该事件。
hidden.bs.tooltip 当提示冒泡对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。
inserted.bs.tooltip 将提示冒泡框加到DOM后,会在show.bs.tooltip 事件后触发此事件。
$('#myTooltip').on('hidden.bs.tooltip', function ()
{
})