首页>>Jquery文字>>jQuery提示框tips效果(2015-05-22)

jQuery提示框tips效果

 包括指定显示位置，是否显示，自定义tip背景色，在图片上面显示等等

jQuery提示框tips效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2. $(function() {  
  3.     // 1  
  4.     $('#tip1').tipso({  
  5.         useTitle: false  
  6.     });  
  7.   
  8.     // 2  
  9.     $('#tip2').tipso({  
  10.         useTitle: false,  
  11.         position: 'left'  
  12.     });  
  13.   
  14.     // 3  
  15.     $('#tip3').tipso({  
  16.         useTitle: false,  
  17.         background: 'tomato'  
  18.     });  
  19.   
  20.     // 4  
  21.     $('#tip4').tipso();  
  22.   
  23.     // 5  
  24.     $('#tip5').tipso({  
  25.         useTitle: false  
  26.     });  
  27.     $('#btn5').on({  
  28.         click: function(e) {  
  29.             if($(this).text() == '显示') {  
  30.                 $(this).text('隐藏');  
  31.                 $('#tip5').tipso('show');  
  32.             } else {  
  33.                 $(this).text('显示');  
  34.                 $('#tip5').tipso('hide');  
  35.             }  
  36.             e.preventDefault();  
  37.         }  
  38.     });  
  39.   
  40.     // 6  
  41.     $('#tip6').tipso({  
  42.         useTitle: false  
  43.     });  
  44.     $('#btn6').on('click', function() {  
  45.         var $val = $(this).prev().val();  
  46.         if($val) {  
  47.             $('#tip6').tipso('update', 'content', $val);  
  48.         }  
  49.     });  
  50.   
  51.     // 7  
  52.     $('#tip7').tipso({  
  53.         useTitle: false  
  54.     });  
  55.   
  56.     // 8  
  57.     $('#tip8').tipso({  
  58.         useTitle: false,  
  59.         onBeforeShow: function() {  
  60.             $('#status').html('beforeShow');  
  61.         },  
  62.         onShow: function() {  
  63.             $('#status').html('show');  
  64.         },  
  65.         onHide: function() {  
  66.             $('#status').html('hide');  
  67.         }  
  68.     });  
  69. });  
  70. </script>  

 


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