网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery提示插件qTip2用法分析(支持ajax及多种样式)
内容
    这篇文章主要介绍了jQuery提示插件qTip2用法,结合实例形式分析了qTip2的使用技巧,可支持ajax及多种样式的设置,需要的朋友可以参考下
    本文实例讲述了jQuery提示插件qTip2用法。分享给大家供大家参考，具体如下：
    代码如下:
    <!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)、图片的提示(<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程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 5:31:24