当前位置： 代码迷 >> Iphone >> 弹出自动关闭的提示框可以在不同位置，展示不同的效果，有类似iphone效果
  详细解决方案

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

热度：105   发布时间：2016-04-25 05:47:07.0
弹出自动关闭的提示框可以在不同位置，显示不同的效果，有类似iphone效果

弹出自动关闭的提示框可以在不同位置，显示不同的效果，有类似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

1 楼 zzjmates 1 小时前  
说白了，就是一个弹出对话框插件
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.