LuLu UI组件中文文档 » tips提示

一、黑色tips

1. 常用演示和代码

   • 基于CSS hover触发:

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

     这里hover延时使用了CSS实现。

     动态效果测试：动态插入HTML

     // 动态tips
     $('#afterIcon').click(function () {
         $(this).after('<i class="icon_del ui-tips" title=动态设置></i>');
     });

     只要页面有过类似new Tips().init()的初始化执行，黑色tips可以动态呈现，无需额外JS绑定或者初始化。

   • 基于JS hover事件触发:

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

     JS hover触发可以使用下面语法初始化：

     new Tips().init('.jsTips');

     假设此代码已在common.js中初始化，则想要图标的黑色tips效果，只要添加类名jsTips就可以了，即使动态插入元素也支持。

   • 内容较多，带偏移的黑色tips:

     后面带有偏移的tips效果需要额外调用Tips组件，代码如下：

     // 带偏移的tips
     new Tips($('#spTips'), {
         content: '点击此按钮会注销你的账户，您的目前的操作都不能执行，直到你重新登录',
         align: 'right'
     }); 

   • 方向朝右的黑色tips:

      <a href="javascript:" class="icon_del jsRTips" title="黑色tips文档说明"></a>

     new Tips($('.jsRTips'), {
         align: 'rotate'
     });

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

     CSS触发：

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

     JS触发：

     可以在tips元素上添加类名reverse进行标识，如下：

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

     也可以使用可选参数align：

     <i class="icon_del jsVTips" title="朝下提示"></i>

     $('.jsVTips').tips({
         align: 'reverse'
     });

2. 语法和API说明

   Tips组件支持jQuery的包装器调用，以及模块化调用，语法如下：

   $('.tips').tips(options);

   或者：

   new Tips($('.tips'), options);

   其中options可选参数见下表：

   参数名称	支持类型	默认值	释义
   attribute	String	'title'	小黑tips文字来源。默认是原生的title属性，一旦成功绑定tips方法，此原生title属性移除，使用data-title自定义属性代替。
   eventType	String	'hover'	触发黑色tips的事件类型，默认是'hover'. 还支持'click'和'null'. 其中'click'表示点击时间，'null'表示没有事件，直接显示，属于高级应用，一般需要调用实例对象的show(),hide()方法。
   content	String	''	表示tips提示的文字内容，支持HTML字符串。本组件优先使用该属性，如果没有，则使用attribute参数对应的值。
   align	String|Number	'center'	表示浮动tips的水平定位方式，三角永远对准元素，文字内容可以发生水平偏移。默认是居中，也就是三角在文字内容的中间。还支持关键字'left'和'right'，表示三角位置偏左，以及偏右。也可以直接使用数值，表示水平偏移的具体大小，相对左侧偏移。也就是值越大，越靠左。还支持特殊关键字'rotate'表示黑色提示内容在元素右侧。左侧不支持。支持特殊关键字'reverse'，表示提示内容在下方。
   delay	Number	100	tips鼠标hover时候出现的延迟时间，单位是毫秒ms。CSS实现部分现代浏览器有延时显示效果。
   onShow	Function	$.noop	tips显示时候的回调方法。函数的上下文this就是触发元素，支持一个参数，为tips浮层元素。同样，此参数值适用于JS方法。
   onHide	Function	$.noop	tips隐藏时候的回调方法。函数的上下文this就是触发元素，支持一个参数，为tips浮层元素。同样，此参数值适用于JS方法。

二、红色出错tips

1. 常用演示和代码

   搜索

   $('#btnSearch').click(function() {
       var elSearch = $('input[type=search]');
       if (elSearch.val() == '') {
           elSearch.errorTip('尚未输入搜索内容');
       }
   });

2. 语法和API

   ErrorTip组件支持jQuery的包装器调用，以及模块化调用，语法如下：

   $(el).errorTip(content, options);

   或者：

   new errorTip($(el), content, options);

   其中content就是提示的文字内容，options为可选参数，具体见下表：

   参数名称	支持类型	默认值	释义
   unique	Boolean	true	是否页面是只会出现一个错误提示，默认是true, 永远只会有一个。
   align	String|Number	'center'	表示浮动tips的水平定位方式，三角永远对准元素，文字内容可以发生水平偏移。默认是居中，也就是三角在文字内容的中间。还支持关键字'left'和'right'，表示三角位置偏左，以及偏右。也可以直接使用数值，表示水平偏移的具体大小，相对左侧偏移。也就是值越大，越靠左。也支持关键字'rotate'和'reverse'，分别表示提示在右侧和下面显示。
   onShow	Function	$.noop	tips显示时候的回调方法。函数的上下文this就是触发元素，支持一个参数，为tips浮层元素。
   onHide	Function	$.noop	tips隐藏时候的回调方法。函数的上下文this就是触发元素，支持一个参数，为tips浮层元素。

   如果想要出错提示和验证一体，可以试试使用Validate验证组件中的方法。

三、作为插件单独使用

1. 黑色tips提示

引用下面CSS：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Tips.css">

JS为：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Follow.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Tips.js"></script>

或者使用合并地址：

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

单独使用Demo演示

2. 红色出错errorTip提示

引用下面CSS：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Tips.css">

JS为：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Follow.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/ErrorTip.js"></script>

或者使用合并地址：

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

单独使用Demo演示