<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Qtip2 插件提示</title>
    <link href="jquery.qtip.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.qtip.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        /*
        从官方网站下载最新版本时,可以选择相应的样式及插件;可选的样式包括几种色彩风格(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)
        提示信息显示/隐藏的效果
        外观的定义,通过相应样式设置
        跟随可拖动目标、鼠标指针等
        */
        $(function () {
            //普通
            $("#demo1").qtip({
                content: "这是提示内容(By Hu Sir)"
            });

            //带标题
            $("#demo2").qtip({
                content: {
                    text: "<b>这是提示内容</b>(By Hu Sir)",
                    title: "提示标题"
                }
            });

            //带关闭按钮的提示 且延时3秒关闭
            $("#demo3").qtip({
                content: {
                    text: "这是提示内容(By Hu Sir)",
                    title: "提示标题",
                    button: "关闭"
                },
                hide: {
                    event: false,    //设置不自动关闭 可配合inactive组合使用
                    inactive: 3000   //设置延时关闭
                }
            });

            //使用AJAX请求远程
            $("#demo4").qtip({
                content: {
                    text: "加载中...",
                    ajax: {
                        url: "lwmeAtCnblogs.aspx?name=Hu"
                    }
                }
            });

            //点击时出现模态对话框
            $("#demo5").qtip({
                content: "这是提示内容(By Hu Sir)",
                show: {
                    event: 'click', // Show it on click...
                    solo: true, // ...and hide all other tooltips... $('#div1')
                    modal: true // ...and make it modal
                },
                hide: false
            });

            //页面加载完成时显示,且不会自动隐藏:
            $("#demo6").qtip({
                content: "这是提示内容(By Hu Sir)",
                show: {
                    ready: true
                },
                style: {
                    //换样式 阴影 圆角叠加
                    classes: 'qtip-light qtip-shadow qtip-rounded'
                },
                hide: false,
                position: {
                    my: 'bottom left',
                    at: 'top center'
                }
            });

            //鼠标跟随
            $('#demo7').qtip({
                content: {
                    text: 'I am positioned in relation to the mouse'
                },
                position: {
                    target: 'mouse',
                }
            });

            //使用元素的属性作为提示信息:
            //  $("a[title]").qtip(); //从链接的title
            //  $("img[alt]").qtip(); //从img的alt
            //  $("div[title]").qtip(); //从div的title

            //也可以显式指定元素属性作为提示信息:
            //$('img[alt]').qtip({
            //   content: {
            //      attr: 'alt'
            //   }
            //});

            //另外对于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) {
            //          //...
            //         }
            //      }
            //   }
            //});
        });
    </script>
</head>
<body>
   <div id="div1">
   <span id="demo1">测试一</span><br/><br/>
   <span id="demo2">测试二</span><br/><br/>
   <span id="demo3">测试三</span><br/><br/>
   <span id="demo4">测试四</span><br/><br/>
   <span id="demo5">测试五</span><br/><br/><br/><br/>
   <span id="demo6">测试六</span><br/><br/>
   <span id="demo7">测试七</span><br/><br/>
   </div>

</body>
</html>
$.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
   }
};

Jquery qTip2实现多种提示效果,支持ajax,以及多种样式的更多相关文章

  1. JQuery实现超链接鼠标提示效果

    一.第一种方法用Jquery<p><a href="http://www.nowamagic.net/" class="tooltip" ti ...

  2. 使用jQuery模拟Google的自动提示效果

    注意: 1.本功能使用SqlServler2000中的示例数据库Northwind,请打SP3或SP4补丁:2.请下载jQuery组件,河西FTP中有下载:3.本功能实现类似Google自动提示的效果 ...

  3. jQuery实现多种切换效果的图片切换的五款插件

    1:Nivo SliderNivoslider:丰富的图片切换效果 官方网址:https://themeisle.com/plugins/nivo-slider 查看演示:https://www.he ...

  4. jquery实现百度类似搜索提示功能(AJAX应用)

    有时候觉得百度那个输入内容就有提示的工具很神奇,它究竟是怎么做到的呢?以前在一个进销存系统中也做过这么个功能,但是远远不及百度的功能强大,百度可以输入首字母,关键字拼音,或关键字都可以匹配,有时在想, ...

  5. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  6. ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    一.  fp.form.submit 有waitMsg 属性来设置等待效果,如下.但是对于Ext.Ajax.request来说 waitMsg 并不起作用.                     f ...

  7. 基于jQuery Tooltips悬停提示效果

    基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览   源码 ...

  8. 基于jquery多种切换效果的焦点图(兼容ie6)

    随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨. ...

  9. 超链接提示效果jQuery+CSS+html

    我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了. <a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里 ...

随机推荐

  1. markdown学习/mou

    markdown编辑器mou markdown编辑器的使用很简单,mac平台选择课 MOU 这款比较轻的客户端. 使用也很方便,打开软件,->helo->mou help 就有各种示例,照 ...

  2. Linux 中 Nginx 重启关闭

    如果服务器正在运行的 Nginx 要进行升级.添加或删除模块时. 我们需要停掉服务器并做相应修改,这样服务器就要在一段时间内停止服务. Nginx可以在不停机的情况下进行各种升级动作而不影响服务器运行 ...

  3. 《Spring MVC学习指南》怎么样?答:书名具有很大的欺骗性

    2016年6月21日 最近,因为工作需要,我从网上买了一本<Spring MVC学习指南>,ISBN编号: 978-7-115-38639-7,定价:49.00元.此书是[美]Paul D ...

  4. centos虚拟机克隆

    vmware vsphere平台上克隆centos6 一.删掉/etc/udev/rules.d/70-persistent-net.rules文件 reboot 二.vim ifcfg-eth0 删 ...

  5. JS中两个重要的方法 call &amp; apply 学习

    正题: Function.prototype.apply(instance,args)  //args 数组 Function.prototype.Call(instance,a1,a2)  //a1 ...

  6. phpwind数据同步本地后登陆异常

    在讲数据同步到本地之后,发现输入用户名和密码之后点击登陆,依然会返回到之前的页面,并且显示的还是未登录的状态. 解决办法:在后台中将:站点设置--cookie作用域留空即可.

  7. IntelliJ IDEA集成svn

    IntelliJ IDEA如何集成svn呢? 1. 首先配置下载并配置svn软件,推荐使用SlikSvn. 下载地址https://sliksvn.com/download/,下载最近版本

  8. java_类承继其他类的内部类例子

    package ming; class Outer { class In { public In(String msg) { System.out.println(msg); } } } public ...

  9. 创建Activity

     创建Activity 创建 Activity 分为3个步骤: 1.创建一个扩展子Activity的class 2.创建一个Layout 3.在 AndroidMainfest 中 配置这个Activ ...

  10. CentOS7下搭建hadoop2.7.3完全分布式

    这里搭建的是3个节点的完全分布式,即1个nameNode,2个dataNode,分别如下: CentOS-master   nameNode   192.168.11.128 CentOS-node1 ...