公司要求写一个关于提示信息的效果，在网上查询到了这个插件，感觉很不错，下面是自己学习的内容
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script src="https://www.jb51.net/lib/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.jb51.net/lib/jquery.qtip-1.0.0-rc3.min.js"></script> <script type="text/javascript"> $(document).ready( function(){ //下面使用的是插件默认的样式显示,content是指要显示的内容（包括文字和图片） $("#huangbiao").qtip({ content: 'Stems are great for indicating the context of the tooltip.', style: { tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners } }); //style json是对提示样式的设置即外面的div样式设置，但是没有设置具体的位置 $("#huangbiao1").qtip({ content: '设置显示文字样式', style: { width: 200, padding: 5, background: '#A2D959', color: 'black', textAlign: 'center', border: { width: 7, radius: 5, color: '#A2D959' }, tip: 'bottomLeft', name: 'dark' // Inherit the rest of the attributes from the preset dark style } }); //name:'green' 是继承了默认的提示样式，还有其他的name可以参考帮助文档 $("#huangbiao2").qtip({ content: '使用插件自定义的样式', style: { name: 'green' // Notice the corner value is identical to the previously mentioned positioning corners } }); //target:表示提示信息显示在控件的什么位置 //tooltip: $("#huangbiao3").qtip({ content: 'Stems are great for indicating the context of the tooltip.', position: { corner: { target: 'topLeft', tooltip: 'bottomLeft' } } }); $("#huangbiao4").qtip({ content: '<img src="https://www.jb51.net/img/2.jpg">', }); //show 是指显示的情况，when是指什么事件触发让它显示出来，hide与show对应 //solo: $("#huangbiao5").qtip({ content: '<img src="https://www.jb51.net/img/2.jpg">', show:{ when:'click', solo:false }, hide:{ when:'click', solo:false } }); //显示类似于“窗口”模式的样式，含有title和内容的提示信息 $("#huangbiao6").qtip({ content: { title: { text: 'content-title-text', button: 'button' }, text: 'content-text' }, fixed:true }); //api:是回调函数，beforeShow是在显示提示之前的提示信息，beforeHide则恰好相反；onRender是指内容呈现后调用 $("#huangbiao7").qtip({ content: 'use callback function', api:{ beforeShow:function(){ alert("beforeShow api function"); }, beforeHide:function(){ alert("beforeHide api function"); } } }); $("#huangbiao9").qtip({ content: '', style:{ width:"1024px", height:"1024px", background:"black" } }); } ); </script> <title>无标题文档</title> </head> <div><span>显示普通文字</span></div> <p> <div><span>设置显示文字样式</span></div> <p> <div><span>使用插件自定义的样式</span></div> <p> <div><span>设置提示的显示位置</span></div> <p> <div><span>显示图片</span></div> <p> <div><span>点击事件显示以及隐藏提示</span></div> <p> <div><span>含有标题的提示信息</span></div> <p> <div><span>使用回调函数</span></div> <p> <div><span>遮盖全屏</span></div> <body> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》