LuLu UI pure版中文文档 »

Fork Me

Tips/ErrorTip提示

作为插件单独使用

1. 黑色tips提示

引用下面CSS:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Tips.css">

JS为:

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Follow.js"></script>
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Tips.js"></script>

或者使用合并地址:

<script src="https://qidian.gtimg.com/c/=/lulu/theme/pure/js/common/ui/Follow.js,/lulu/theme/pure/js/common/ui/Tips.js"></script>

单独使用Demo演示

2. 红色出错ErrorTip提示

引用下面CSS:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Tips.css">

JS为:

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Follow.js"></script>
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/ErrorTip.js"></script>

或者使用合并地址:

<script src="https://qidian.gtimg.com/c/=/lulu/theme/pure/js/common/ui/Follow.js,/lulu/theme/pure/js/common/ui/ErrorTip.js"></script>

单独使用Demo演示

Tips黑色提示效果

CSS基本定位效果与演示

基本效果,自带延时:

<i class="ui-tips" title="删除"></i>

只要有类名.ui-tips以及title属性即可,Tips.js加载后会把原生的title属性转换成自定义的data-title属性,然后CSS代码通过[data-title]属性选择器进行匹配实现最终的定位效果。因此,如果你的HTML直接使用data-title属性而不是title属性,则Tips.js无需加载就可以有效果,但并不推荐。

CSS定位支持动态效果测试:动态插入HTML

// 动态tips
button.addEventListener('click', function () {
    this.insertAdjacentHTML('afterend', ' <i class="ui-tips" title="动态设置"></i>');
});

可以看到只要元素有类名.ui-tips,黑色tips就可以动态呈现,无需额外JS绑定或者初始化。

JS基本定位效果与演示

基于JS hover事件触发:

<i class="jsTips" title="注销"></i>

想要图标的黑色tips效果,只要添加上面红色高亮的类名jsTips就可以了,jsTips触发的黑色提示浮层定位是基于JS计算,不受布局限制。同样也支持动态插入元素的提示效果。

支持<br>换行:

<i class="jsTips" title="第一行<br>第二行"></i>

特殊方向的定位效果

方向朝下的tips,一般用在触发提示的元素在浏览器上边缘的时候。

CSS触发:

通过添加类名.reverse实现,如下代码示意:

<i class="ui-tips reverse" title="朝下提示"></i>

JS触发:

可以在元素上添加类名.reverse实现,如下:

<i class="jsTips reverse" title="朝下提示"></i>

内容较多,小三角偏移在右侧的黑色tips:

使用data-align控制,可以使用'right'关键字,这里也可以使用2-3

<i class="jsTips" data-align="right" title="点击此...新登录"></i>

内容较多,小三角偏移在左侧的黑色tips: ,设置data-align属性值控制,可以使用'left'关键字,也可以使用1-4

<i class="jsTips" data-align="left" title="点击此...新登录"></i>

方向朝右的黑色tips:

 <a href class="jsTips" data-align="6-8" title="提示在右"></a>

方向朝左的黑色tips:

 <a href class="jsTips" data-align="8-6" title="提示在左"></a>

黑色提示语法和参数

语法

var myTips = new Tips(trigger, options);

参数

trigger
必需。Element|String。触发元素或者触发元素的选择器。
options
可选。Object。具体如下表:
参数名称 支持类型 默认值 释义
eventType String 'hover' 触发提示信息显示的事件类型,默认是'hover'还支持 'click''null'其中 'click'表示点击事件,'null'表示没有事件,直接显示,一般需要调用实例对象的show()hide()方法进行显隐控制。
content String '' 提示的内容,如果为空则会取元素的title属性值作为提示信息。
align String 'auto' 表示提示信息的定位方式。

默认值是'auto',表示优先使用触发元素的data-align或者data-position属性值作为参数,如果没有设置这两个属性,则会当作参数'center'处理,表现为在触发元素上方水平居中显示。

align参数支持关键字值和具体的坐标值。

关键字值除了默认的'auto',还有'left''right''center',关键字参数都是在上方显示的,'left''right'影响的是提示信息的左右偏移位置,而不是定位方式。如果触发元素包含类名.reverse,则这几个关键字表示提示信息在下方显示。

具体的坐标值指使用'trigger-target'这种定位规则的参数值,不同位置与对应的值见下图所示:

例如'6-8'表示触发元素的位置'6'和浮层元素的位置'8'对齐,于是就有了右侧垂直居中定位效果。

onShow Function function () {} 提示信息显示时候的回调方法。函数的上下文this是当前实例对象。支持两个参数,第一个参数触发元素,第二个参数,为浮层提示元素。
onHide Function function () {} 提示信息隐藏时候的回调方法。函数的上下文this是当前实例对象。支持两个参数,第一个参数触发元素,第二个参数,为浮层提示元素。

其他说明

提示内容信息取自HTML原生的title属性。

实例对象

myTips就是返回的实例对象,暴露了以下属性和方法:

{
    // 提示内容显示与否,布尔值
    display: false,
    element: {
      // 触发提示显示的元素
      trigger: null,
      // 提示元素
      tips: null
    },
    callback: {
      // 显示的回调方法
      show: function () {},
      // 隐藏的回调方法
      hide: function () {}
    },
    params: {
      // 事件类型
      eventType: '',
      // 对齐方式
      align: ''
    },
    // 提示显示
    show: function () {},
    // 提示隐藏
    hide: function () {}
}

大多数场景下,直接引入对应CSS和JS文件,然后设置类名.ui-tips或者.jsTips就有效果了,无需关心具体的调用。

ErrorTip红色出错效果

单个出错提示演示与代码

button.addEventListener('click', function () {
    var eleAllInput = this.parentElement.querySelectorAll('input');

    eleAllInput.forEach(function (input, index) {
        if (input.value == '') {
            new ErrorTip(input, '尚未输入搜索内容' + (index + 1));
        }
    });
});

同时出错提示演示与代码

eleBtnSearch2.addEventListener('click', function () {
    var eleAllInput = this.parentElement.querySelectorAll('input');

    eleAllInput.forEach(function (input, index) {
        if (input.value == '') {
            new ErrorTip(input, '尚未输入搜索内容' + (index + 1), {
                unique: false
            });
        }
    });
});

红色提示语法和参数

语法如下:

var myErrorTip = new ErrorTip(element, content, options);

其中:

element
必须。Object DOM元素。用来帮助提示定位的元素。
content
必须。String字符串|Function函数。提示的文案信息,支持HTML字符串。
options
可选。Object纯对象。表示可选参数,具体见下表:
参数名称 支持类型 默认值 释义
unique Boolean true 是否页面是只会出现一个错误提示,默认是true, 永远只会有一个。此参数实际开发很少用到。

onShow Function function () {} 红色出错提示显示时候的回调方法。函数的上下文this是当前实例,支持两个参数,分别表示当前提示元素的定位元素和浮层提示元素。
onHide Function function () {} 红色出错提示隐藏时候的回调方法。函数的上下文this是当前实例,支持两个参数,分别表示当前提示元素的定位元素和浮层提示元素。

其他说明

在实际开发中,ErrorTip出错提示组件和表单验证强关联,可以试试使用Validate验证组件

另外,红色出错提示出现的时候,会自动给该定位元素添加类名.error.valided,红色出错提示隐藏的时候会移除类名.error.valided类名会保留,方便识别是否已经验证提示过。

实例对象

myErrorTip就是返回的实例对象,暴露了以下属性和方法:

{
    // 提示内容显示与否,布尔值
    display: false,
    element: {
      // 触发提示显示的元素
      trigger: null,
      // 提示元素
      tips: null,
      // 提示内容元素
      content: null,
      // 提示三角元素
      arrow: null
    },
    callback: {
      // 显示的回调方法
      show: function () {},
      // 隐藏的回调方法
      hide: function () {}
    },
    params: {
      // 布尔值,是否唯一提示显示
      unique: true
    },
    // 提示显示
    show: function () {},
    // 提示隐藏
    hide: function () {}
}
本页贡献者:

zhangxinxu