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

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" data-title=动态设置></i>');
      });

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

    • 基于JS hover事件触发:
      <i class="icon_del jsTips" title="注销"></i>

      CSS和JS hover触发可以合起来一行代码搞定:

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

      假设此代码已在common.js中初始化,则想要图标的黑色tips效果,只要添加黄色高亮的类名(ui-tipsjsTips)就可以了。

    • 内容较多,带偏移的黑色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演示

Fork Me 返回顶部