clueTip—jquery弹出提示层插件

发布于，归属于jquery插件。 沙发还空着，抢！ 共有1,322人围观    

cluetip

（包含完整demo）
点此下载

第一步：引入JQ库与cluetip插件js文件,当然还有样式

  1. <script src="jquery.js" type="text/javascript"></script>
  2.  <script src="jquery.hoverIntent.js" type="text/javascript"></script> 
  3. <!-- optional --> 
  4. <script src="jquery.cluetip.js" type="text/javascript"></script>
  5.  <link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

第二步：建立如下格式的html结构

  1. <!-- use ajax/ahah to pull content from fragment.html: --> 
  2.  <p>
  3.       <a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a>
  4. </p>     
  5. <!-- use title attribute for clueTip contents, but don't include anything in the clueTip's heading --> 
  6.  <p>
  7.        <a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a>
  8. </p>

第三步：初始化插件

  1. $(document).ready(function() { 
  2.        $('a.tips').cluetip();
  3.        $('#houdini').cluetip({  
  4.                  splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...  
  5.                   // ...and split the contents into separate divs where there is a "|"  
  6.                  showTitle: false // hide the clueTip's heading   }); });
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类