杂乱小知识

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

1. 手风琴折叠范例

    用法

折叠插件使用一些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 ()

{

})