首页>>Jquery文字>>Flyout tooltips不同位置，不同效果的演示(2016-04-16)

Flyout tooltips不同位置，不同效果的演示

Flyout tooltips不同位置，不同效果的演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function() {  
  3.     $('#trigger_top').flyout({  
  4.         title: 'My Flyout Top',  
  5.         content: '<i>My flyout contents!</i> It works! kljsdkfljkls dfks djfkl sjdkfj skd fksdfjks d',  
  6.         html: true  
  7.     });  
  8.     $('#trigger_right').flyout({  
  9.         title: 'My Flyout Right',  
  10.         content: '<i>My flyout contents!</i> It works! kljsdkfljkls dfks djfkl sjdkfj skd fksdfjks d',  
  11.         html: true,  
  12.         placement: 'right'  
  13.     });  
  14.     $('#trigger_bottom').flyout({  
  15.         title: 'My Flyout Bottom',  
  16.         content: '<i>My flyout contents!</i> It works! kljsdkfljkls dfks djfkl sjdkfj skd fksdfjks d',  
  17.         html: true,  
  18.         placement: 'bottom'  
  19.     });  
  20.     $('#trigger_left').flyout({  
  21.         title: 'My Flyout Left',  
  22.         content: '<i>My flyout contents!</i> It works! kljsdkfljkls dfks djfkl sjdkfj skd fksdfjks d',  
  23.         html: true,  
  24.         placement: 'left'  
  25.     });  
  26.     $('#trigger_noanim').flyout({  
  27.         //title: 'My Flyout without animation',  
  28.         title: '',  
  29.         content: '<i>My flyout contents!</i> It works! kljsdkfljkls dfks djfkl sjdkfj skd fksdfjks d',  
  30.         html: true,  
  31.         animation: false  
  32.     });  
  33.     $('#trigger_dismiss').flyout({  
  34.         title: 'My Dismissible Flyout',  
  35.         content: '<i>My flyout contents!</i> It works! kljsdkfljkls dfks djfkl sjdkfj skd fksdfjks d',  
  36.         html: true,  
  37.         dismissible: true  
  38.     });  
  39.   
  40.     $('#target_anchor').flyout({  
  41.         title: 'My Manual Flyout',  
  42.         content: '<i>My flyout contents!</i> It works! kljsdkfljkls dfks djfkl sjdkfj skd fksdfjks d',  
  43.         html: true,  
  44.         trigger: 'manual'  
  45.     });  
  46.     var timeHandle = null;  
  47.     $('#trigger_manual').click(function() {  
  48.         if (timeHandle) {  
  49.             clearTimeout(timeHandle);  
  50.             timeHandle = null;  
  51.         }  
  52.         $('#target_anchor').flyout('toggle');  
  53.   
  54.         timeHandle = setTimeout(function() {  
  55.             $('#target_anchor').flyout('hide');  
  56.         }, 2000);  
  57.     });  
  58.   
  59.     $('#target_anchor2').flyout({  
  60.         title: 'My Manual Flyout',  
  61.         content: '<i>My flyout contents!</i> It works! kljsdkfljkls dfks djfkl sjdkfj skd fksdfjks d',  
  62.         html: true,  
  63.         trigger: 'manual'  
  64.     }).mouseover(function() {  
  65.         $(this).flyout('show');  
  66.     }).mouseout(function() {  
  67.         $(this).flyout('hide');  
  68.     });  
  69.   
  70.     $('#target_anchor3').flyout({  
  71.         title: function() {  
  72.             return 'My Flyout at ' + (new Date()).toString()  
  73.         },  
  74.         content: function() {  
  75.             return '<i>My flyout contents!</i> It works at ' + (new Date()).toString();  
  76.         },  
  77.         html: true,  
  78.     })  
  79.   
  80. });  
  81. </script>  
XML/HTML Code
  1. <div class="triggers">  
  2.         <input type="button" value="trigger top" id="trigger_top" class="trigger"/>  
  3.         <input type="button" value="trigger right" id="trigger_right" class="trigger"/>  
  4.         <input type="button" value="trigger bottom" id="trigger_bottom" class="trigger"/>  
  5.         <input type="button" value="trigger left" id="trigger_left" class="trigger"/>  
  6.         <input type="button" value="no animation and no title" id="trigger_noanim" class="trigger"/>  
  7.         <input type="button" value="dismissible" id="trigger_dismiss" class="trigger"/>  
  8.     </div>  
  9.     <div class="triggers">  
  10.         <a id="target_anchor" href="#" class="target_anchor">Sample Link 1: triggered by button</a>  
  11.         <input type="button" value="manual trigger" id="trigger_manual" class="trigger"/>  
  12.         <a id="target_anchor2" href="#" class="target_anchor">Sample Link 2: works like a tooltip</a>  
  13.         <a id="target_anchor3" href="#" class="target_anchor">Sample Link 3: dynamic title and contents</a>  
  14.     </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_548.html