青岛网站建设
网站首页 联系我们

资讯中心

联系方式
  • 地址:青岛市李沧区金水路772号
  • 电话:0532-87606070
  • 手机:13969865210
  • 邮箱:web@toorain.net

网站开发知识
网站建设之Jquery qTip2实现多种提示效果
时间:2013-12-6 17:18:32  来源:网络转载  点击:1717

    青岛网站建设少不了经常接触代码,下面这篇文章是网上看到的,对于我们网站制作特别有用,也经常会需要,青岛网络公司小编先转载过来然后分享给各位朋友,也许对你有帮助哦。下面是Jquery qTip2实现多种提示效果,支持ajax,以及多种样式的全部内容。

〈!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〉 

 


[javascript] view plaincopyprint?
$.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 
   } 
}; 

 本文地址:http://www.toorain.net/news_view_316.aspx