Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 qTip2 精致的jQuery提示信息插件

qTip2 精致的jQuery提示信息插件

发布时间:2016-09-16   编辑:www.jquerycn.cn
jquery中文网为您提供qTip2 精致的jQuery提示信息插件等资源,欢迎您收藏本站,我们将为您提供最新的qTip2 精致的jQuery提示信息插件资源

(转)

三个文件:

<link href=”http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css” rel=”stylesheet” />

<script src=”http://ajax.useso.com/ajax/libs/jquery/1/jquery.min.js”></script>

<script src=”http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js”></script>

从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角;以及以下各种插件,可根据自己需要选择:

Ajax,这个不用说,请求远程内容的

Tips,气泡对话效果,如箭头

Modal,模态对话框效果,如jquery ui Dialog / ThickBox 的效果

Image map,提供对map内area标记的提示支持

SVG,对SVG元素提供提示的支持

BGIFrame,用于IE6这种古董,如遮住select控件等

除了以上插件的功能外,它的主要功能有(仅列出较常用的):

设置提示的内容、标题、关闭按钮等

使用元素的属性,来作为提示信息内容,如链接的标题(<a title=”提示信息”)、图片的提示(<img src=”提示信息”)等等

提示信息显示的位置

提示信息的目标,即显示到什么元素上

提示信息显示/隐藏触发的事件,如鼠标移到元素上、点击(mouseenter,click)

提示信息显示/隐藏的效果

外观的定义,通过相应样式设置

跟随可拖动目标、鼠标指针等

使用频率最高的估计也就以下这些参数

$.fn.qtip.defaults = {
   content: {
      text: true, 
      attr: 'title', 
      ajax: false,
      title: {
         text: false, 
         button: false
      }
   },
   position: {
      my: 'top left', 
      at: 'bottom right',
   },
   show: {
      event: 'mouseenter',
      solo: false,
      ready: false,
      modal: false
   },
   hide: {
      event: 'mouseleave'
   },
   style: 'ui-tooltip-default'
};

对于显示的位置,有以下参数可以设置:

my = [

‘top left’, ‘top right’, ‘top center’,

‘bottom left’, ‘bottom right’, ‘bottom center’,

‘right center’, ‘right top’, ‘right bottom’,

‘left center’, ‘left top’, ‘left bottom’, ‘center’

]

at = [

‘bottom left’, ‘bottom right’, ‘bottom center’,

‘top left’, ‘top right’, ‘top center’,

‘left center’, ‘left top’, ‘left bottom’,

‘right center’, ‘right top’, ‘right bottom’, ‘center’

]

而对于显示的色彩风格则有以下各种颜色:

[‘red’, ‘blue’, ‘dark’, ‘light’, ‘green’,’jtools’, ‘plain’, ‘youtube’, ‘cluetip’, ‘tipsy’, ‘tipped’]

比如red就是ui-tooltip-red,默认为default。另外还有ui-tooltip-shadow、ui-tooltip-rounded分别表示阴影、圆角效果,可以叠加,如下:

$(“#demo2″).qtip({

  content: “这是提示内容(by囧月)”,

  style: {

    classes: ‘ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded’

  }

});

另外对于ajax则有以下主要参数可以设置(与jQuery.ajax一致):

$(‘.selector’).qtip({

   content: {

      text: ‘Loading…’, // Loading text…

      ajax: {

         url: ‘/path/to/file’, // URL to the JSON script

         type: ‘GET’, // POST or GET

         data: { id: 3 }, // Data to pass along with your request

         dataType: ‘json’, // Tell it we’re retrieving JSON

         success: function(data, status) {

          //…

         }

      }

   }

});

需要注意的是,AJAX默认使用GET请求而且启用了cache。

参数设置

先看一下qTip2默认的参数设置:

$.fn.qtip.defaults = {
   // 页面加载完成就创建提示信息的元素
   prerender: false, 
   // 为提示信息设置id,如设置为myTooltip
   // 就可以通过ui-tooltip-myTooltip访问这个提示信息
   id: false, 
   // 每次显示提示都删除上一次的提示
   overwrite: true, 
   // 通过元素属性创建提示
   // 如a[title],把原有的title重命名为oldtitle
   suppress: true,
   // 内容相关的设置 
   content: {
      // 提示信息的内容
      // 如果只设置内容可以直接 content: "提示信息"
      // 而不需要 content: { text: { "提示信息" } }
      text: true, 
      // 提示信息使用的元素属性
      attr: 'title', 
      // ajax插件
      ajax: false,
      title: {
         // 提示信息的标题
         // 如果只设置标题可以直接 title: "标题"
         text: false, 
         // 提示信息的关闭按钮
         // 如button:"x",button:"关闭"
         // 都可以启用关闭按钮
         button: false
      }
   },
   // 位置相关的设置
   position: {
      // 提示信息的位置
      // 如提示的目标元素的右下角(at属性)
      // 对应 提示信息的左上角(my属性)
      my: 'top left', 
      at: 'bottom right',
      // 提示的目标元素,默认为选择器
      target: FALSE,
      // 提示信息默认添加到的容器
      container: FALSE,
      // 使提示信息在指定目标内可见,不会超出边界
      viewport: FALSE,      
      adjust: {
         // 提示信息位置偏移
         x: 0, y: 0,
         mouse: TRUE,
         resize: TRUE,
         method: 'flip flip'
      },
      // 特效
      effect: function(api, pos, viewport) {
         $(this).animate(pos, {
            duration: 200,
            queue: FALSE
         });
      }
   },
   // 显示提示的相关设置
   show: {
      // 触发事件的目标元素
      // 默认为选择器
      target: false,
      // 事件名称,默认为鼠标移到时
      // 可以改为click点击
      event: 'mouseenter',
      // 特效
      effect: true,
      // 延迟显示时间
      delay: 90,
      // 隐藏其他提示
      solo: false,
      // 在页面加载完就显示提示
      ready: false,
      modal: {
         // 启用模态对话框效果
         on: false,
         // 特效
         effect: true,
         blur: true,
         escape: true
      }
   },
   // 隐藏提示的相关设置
   // 参考show
   hide: {
      target: false,
      event: 'mouseleave',
      effect: true,
      delay: 0,
      // 设置为true时,不会隐藏
      fixed: false,
      inactive: false,
      leave: 'window',
      distance: false
   },
   // 样式相关
   style: {
      // 样式名称
      classes: '',
      widget: false,
      width: false,
      height: false,
      // tip插件,箭头相关设置
      tip: {
         corner: true,
         mimic: false,
         width: 8,
         height: 8,
         border: true,
         offset: 0
      }
   },
   // 相关事件绑定
   events: {
      render: null,
      move: null,
      show: null,
      hide: null,
      toggle: null,
      visible: null,
      focus: null,
      blur: null
   }
};

使用方法

以下就简单演示一些使用方法

$(“#demo2″).qtip({

  content: “这是提示内容(by囧月)”

});

创建一个带标题的提示:

$(“#demo3″).qtip({

  content: {

    text: “这是提示内容(by囧月 lwme.cnblogs.com)”

    , title: “提示标题”

  }

});

带关闭按钮的提示:

$(“#demo3″).qtip({

  content: {

    text: “这是提示内容(by囧月 lwme.cnblogs.com)”,

    title: {

      text: “提示标题”,

      button: “关闭”

    }

  }

});

使用元素的属性作为提示信息:

$(“a[title]”).qtip(); //从链接的title

$(“img[alt]”).qtip(); //从img的alt

$(“div[title]”).qtip(); //从div的title

也可以显式指定元素属性作为提示信息:

$(‘img[alt]’).qtip({

   content: {

      attr: ‘alt’

   }

});

使用AJAX请求远程:

$(“#demo4″).qtip({

  content: {

    text: “加载中…”,

    ajax: {

      url: “lwmeAtCnblogs.aspx?name=囧月”

    }

  }

});

设置位置及样式:

$(“#demo5″).qtip({

  position: {

    my: ‘bottom left’,

    at: ‘top center’

  },

  style: {

    classes: ‘ui-tooltip-red’

  }

});

点击时出现模态对话框:

$(‘button’).qtip({

  content: “这是提示内容(by囧月 lwme.cnblogs.com)”,

  show: {

    event: ‘click’, // Show it on click…

    solo: true, // …and hide all other tooltips…

    modal: true // …and make it modal

  },

  hide: false

});

页面加载完成时显示,且不会自动隐藏:

$(‘button’).qtip({

  content: “这是提示内容(by囧月 lwme.cnblogs.com)”,

  show: {

    ready: true

  },

  hide: false

});

您可能感兴趣的文章:
jQuery工具提示插件 qTip2
qTip2 精致的基于jQuery提示信息插件
jquery validate poshytip 自定义样式
推荐17个优美新鲜的jQuery的工具提示插件
表单验证插件 jQuery formValidator
jQuery信息提示插件 Dynamic tooltip
jQuery消息提醒插件 jQuery Notty
jQuery工具提示插件 Coda Bubble
jQuery Inline Form Validation Engine
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api

[关闭]