首页>>Jquery文字>>弹出自动关闭的提示框可以在不同位置，显示不同的效果，有类似iphone效果(2013-12-30)

弹出自动关闭的提示框可以在不同位置，显示不同的效果，有类似iphone效果

弹出自动关闭的提示框可以在不同位置，显示不同的效果，有类似iphone效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div>  
  2.   <input type="button" onclick="$.jGrowl('Default Positioning');" value="Default"/>  
  3.   <input type="button" onclick="$('#one').jGrowl('Bottom Right Positioning');" value="Bottom Right"/>  
  4.   <input type="button" onclick="$('#two').jGrowl('Bottom Left Positioning');" value="Bottom Left"/>  
  5. </div>  
  6. <div><a href="sideways.html" target="_blank">在同一行显示</a></div>  
  7. <div><a href="jgrowl-pool.html" target="_blank">在指定位置显示</a></div>  
  8. <div><a href="jgrowl.html" target="_blank">在一个页面显示各种不同的效果</a></div>  
  9. <div id="one" class="jGrowl bottom-right"></div>  
  10. <div id="two" class="jGrowl bottom-left"></div>  

--------------------------------------------------------

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3.         // In case you don't have firebug...  
  4.         if(typeof console === "undefined") {  
  5.             console = { log: function() { } };  
  6.         }  
  7.   
  8.         (function($){  
  9.   
  10.             $(document).ready(function(){  
  11.                 // This value can be true, false or a function to be used as a callback when the closer is clciked  
  12.                 $.jGrowl.defaults.closer = function() {  
  13.                     console.log("Closing everything!", this);  
  14.                 };  
  15.                   
  16.                 // A callback for logging notifications.  
  17.                 $.jGrowl.defaults.log = function(e,m,o) {  
  18.                     $('#logs').append("<div><strong>#" + $(e).attr('id') + "</strong> <em>" + (new Date()).getTime() + "</em>: " + m + " (" + o.theme + ")</div>") 
  19.                 }                
  20.                  
  21.                 $.jGrowl("Hello world!"); 
  22.                 $.jGrowl("This notification will live a little longer.", { life: 1000 }); 
  23.                 $.jGrowl("Sticky notification with a header", { header: 'A Header', sticky: true }); 
  24.                 $.jGrowl("Custom theme, and a whole bunch of callbacks...", {  
  25.                     theme:  'manilla', 
  26.                     speed:  'slow', 
  27.                     beforeOpen: function(e,m,o) { 
  28.                         console.log("I am going to be opened!", this); 
  29.                     }, 
  30.                     open: function(e,m,o) { 
  31.                         console.log("I have been opened!", this); 
  32.                     }, 
  33.                     beforeClose: function(e,m,o) { 
  34.                         console.log("I am going to be closed!", this); 
  35.                     }, 
  36.                     close: function(e,m,o) { 
  37.                         console.log("I have been closed!", this); 
  38.                     } 
  39.                 }); 
  40.  
  41.                 $.jGrowl("Custom animation test...", {  
  42.                     theme: 'manilla', 
  43.                     speed: 'slow', 
  44.                     animateOpen: {  
  45.                         height: "show" 
  46.                     }, 
  47.                     animateClose: {  
  48.                         height: "hide" 
  49.                     } 
  50.                 }); 
  51.                  
  52.                 $.jGrowl("Looks like the iPhone.", {  
  53.                     sticky: true, 
  54.                     header: 'iPhone', 
  55.                     theme: 'iphone' 
  56.                 }); 
  57.                  
  58.  
  59.                 $.jGrowl("This message will not open because we have a callback that returns false.", { 
  60.                     beforeOpen: function() { 
  61.                         console.log("Going to open a notification, but not really..."); 
  62.                     }, 
  63.                     open: function() { 
  64.                         return false; 
  65.                     } 
  66.                 }); 
  67.                  
  68.                 $.jGrowl("This message will not close because we have a callback that returns false.", { 
  69.                     beforeClose: function() { 
  70.                         return false; 
  71.                     } 
  72.                 }); 
  73.                  
  74.                 $.jGrowl.defaults.closerTemplate = '<div>hide all notifications</div>'; 
  75.                  
  76.                 $('#test1').jGrowl("Testing a custom container (this one is sticky, and will also be prepended).", { 
  77.                     closer: false, 
  78.                     sticky: true,  
  79.                     glue: 'before', 
  80.                     speed: 2000, 
  81.                     animateOpen: {  
  82.                         height: "show", 
  83.                         width: "show" 
  84.                     }, 
  85.                     animateClose: {  
  86.                         height: "hide", 
  87.                         width: "show" 
  88.                     } 
  89.                 }); 
  90.  
  91.                 $('#test1').jGrowl("Another custom container test.", {  
  92.                     glue: 'before', 
  93.                     speed: 2000, 
  94.                     animateOpen: {  
  95.                         height: "show", 
  96.                         width: "show" 
  97.                     }, 
  98.                     animateClose: {  
  99.                         height: "hide", 
  100.                         width: "show" 
  101.                     } 
  102.                 }); 
  103.                  
  104.                 $('#test2').jGrowl("Trying a background image.", {  
  105.                     theme: 'smoke',  
  106.                     closer: false  
  107.                 });  
  108.             });  
  109.         })(jQuery);  
  110.   
  111.         </script>  

 

XML/HTML Code
  1. <p><a href="javascript:void(0);" onclick="$.jGrowl('One more message...');">Click here to create a message on demand in the #jGrowl container in the top-right corner of the screen.</a></p>  
  2.           
  3.         <p><a href="javascript:void(0);" onclick="$('#test1').jGrowl('shutdown');">Shutdown jGrowl for the #test1 container in the top-left corner of the screen.</a></p>  
  4.           
  5.         <p><a href="javascript:void(0);" onclick="$('#test1').jGrowl('close');">Close all in #test1.</a></p>  
  6.           
  7.   
  8.         <div id="logs"><h3>Log:</h3></div>  
  9.           
  10.         <hr />  
  11.                   
  12.           
  13.         <div id="test1" class="top-left"></div>  
  14.         <div id="test2" class="bottom-left"></div>  

 


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