jQuery prompt plugin qTip2 usage analysis of supports ajax and multiple styles

  • 2021-06-28 08:27:56
  • OfStack

This article illustrates the usage of the jQuery prompt plug-in qTip2.Share it for your reference, as follows:


<!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.ajax1致):
      //$('.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">测试1</span><br/><br/>
  <span id="demo2">测试2</span><br/><br/>
  <span id="demo3">测试3</span><br/><br/>
  <span id="demo4">测试4</span><br/><br/>
  <span id="demo5">测试5</span><br/><br/><br/><br/>
  <span id="demo6">测试6</span><br/><br/>
  <span id="demo7">测试7</span><br/><br/>
  </div>
</body>
</html>


$.fn.qtip.defaults = {
  // 页面加载完成就创建提示信息的元素
  prerender: false,
  // 为提示信息设置id,如设置为myTooltip
  // 就可以通过ui-tooltip-myTooltip访问这个提示信息
  id: false,
  // 每次显示提示都删除上1次的提示
  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
  }
};

More readers interested in jQuery-related content can view this site's topics: Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Dragging Special Effects and Skills Summary, jQuery Extension Skills Summary, jQuery General Classic Special Effects Summary, jQuery Animation and Usage Summary,jquery Selector Usage Summary and jQuery Common Plugins and Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.


Related articles: