效果图：

 

 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>activebar-Demo</title> 
  6. <style> 
  7. /*****************************************************************************/ 
  8. /*                                  reset css                                */ 
  9. /*****************************************************************************/ 
  10. html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { 
  11.     margin: 0; 
  12.     padding: 0; 
  13. } 
  14.  
  15. img,body,html { 
  16.     border: 0; 
  17. } 
  18.  
  19. address,caption,cite,code,dfn,em,th,var { 
  20.     font-style: normal; 
  21.     font-weight: normal; 
  22. } 
  23.  
  24. ol,ul { 
  25.     list-style: none; 
  26. } 
  27.  
  28. caption,th { 
  29.     text-align: left; 
  30. } 
  31.  
  32. h1,h2,h3,h4,h5,h6 { 
  33.     font-size: 100%; 
  34. } 
  35.  
  36. h1 { 
  37.     font-size: 18px; 
  38. } 
  39.  
  40. h2 { 
  41.     font-size: 16px; 
  42. } 
  43.  
  44. h3 { 
  45.     font-size: 14px; 
  46. } 
  47.  
  48. q:before,q:after { 
  49.     content: ''; 
  50. } 
  51.  
  52. sup { 
  53.     vertical-align: text-top; 
  54. } 
  55.  
  56. sub { 
  57.     vertical-align: text-bottom; 
  58. } 
  59.  
  60. input,button,textarea,select { 
  61.     font-family: inherit; 
  62.     font-size: inherit; 
  63.     font-weight: inherit; 
  64. } 
  65.  
  66. input,button,textarea,select { 
  67.     *font-size: 100%; 
  68. } 
  69.  
  70. select,input,button,textarea { 
  71.     font: 100% tahoma, helvetica, arial, sans-serif; 
  72. } 
  73.  
  74. table { 
  75.     font-size: inherit; 
  76.     font: 100%; 
  77. } 
  78.  
  79. pre,code,kbd,samp,tt { 
  80.     font-family: 'courier new', courier, monospace; 
  81. } 
  82.  
  83. small { 
  84.     font-size: 100%; 
  85. } 
  86.  
  87. a { 
  88.     color: #028ef0; 
  89.     text-decoration: none; 
  90. } 
  91.  
  92. a:hover { 
  93.     color: #f60; 
  94.     text-decoration: underline; 
  95. } 
  96.  
  97. abbr,acronym { 
  98.     border-bottom: 1px dotted; 
  99.     cursor: help; 
  100. } 
  101.  
  102. ins { 
  103.     text-decoration: none; 
  104. } 
  105.  
  106. del { 
  107.     text-decoration: line-through; 
  108. } 
  109.  
  110. hr { 
  111.     color: #d1d7dc; 
  112.     background-color: #d1d7dc; 
  113.     border: none; 
  114.     height: 1px; 
  115. } 
  116.  
  117. /* 让浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */ 
  118. html { 
  119.       overflow-y: scroll; 
  120. } 
  121.  
  122. body { 
  123.     font: 12px/ 1.5 Tahoma, Arial, '宋体', sans-serif; 
  124.     background-color: #fff; 
  125. } 
  126. .clearfix:after { 
  127.       visibility: hidden; 
  128.       display: block; 
  129.       font-size: 0; 
  130.       content: " "; 
  131.       clear: both; 
  132.       height: 0; 
  133. } 
  134. .clearfix{ 
  135.       *zoom:1; 
  136. } 
  137. .k-activebar-wrapper{display:block;width: 100%; padding:3px 0px;text-indent:10px; border-bottom: 1px solid #ccc;background:InfoBackground;z-index:999999999;overflow: hidden;font-size: 12px;color:#444;visibility: hidden;} 
  138. .k-activebar-close{float:right;display: block;width:30px;text-align: center;color:#444;text-decoration: none;} 
  139. .k-activebar-close:hover{text-decoration: none;} 
  140.  
  141. </style> 
  142. </head> 
  143. <body> 
  144. <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js"></script> 
  145. <script type="text/javascript"> 
  146. /** 
  147.  * 顶部 TPS  
  148.  * @author wb-huxiaoqi 
  149.  */ 
  150. (function(S){ 
  151.     var $ = S.all, 
  152.         Event = S.Event, 
  153.         DOM = S.DOM; 
  154.      
  155.     S.add('ActiveBar',function(){ 
  156.         var $Wrapper,PREFIX = 'k-activebar-', 
  157.             WRAPPER_CLS = PREFIX+"wrapper"; 
  158.             WRAPPER_TPL = "<div class="+WRAPPER_CLS+"></div>", 
  159.             CLOSE_CLS = PREFIX+"close", 
  160.             CLOSE_TPL = "<a href='javascript:void(0)' class="+CLOSE_CLS+" title='关闭'>X</a>"; 
  161.         DefaultCfg = { 
  162.                 style:"default", 
  163.                 target:"", 
  164.                 content:"", 
  165.                 delay:1000 
  166.             }; 
  167.         function ActiveBar(cfg){ 
  168.             var self = this; 
  169.              
  170.             if(!(self instanceof ActiveBar)){   //确保this指向ActiveBar实例 
  171.                 return new ActiveBar(); 
  172.             } 
  173.              
  174.             self.config = S.mix(DefaultCfg,cfg); 
  175.              
  176.             self.target = typeof self.config.target === "string" ? $(self.config.target) : self.config.target; 
  177.              
  178.             selfself.content = self.config.content+CLOSE_TPL; 
  179.              
  180.             $Wrapper = self._init(); 
  181.                  
  182.             self.render(); 
  183.              
  184.             self.height = $Wrapper.offsetHeight; 
  185.              
  186.             DOM.css($Wrapper,{'margin-top':-self.height,'visibility':'visible'}); 
  187.             // 延时slide 
  188.             setTimeout(function(){self.slideDown();},self.config.delay); 
  189.              
  190.             //绑定关闭按钮事件 
  191.             self.bindEvent(); 
  192.              
  193.              
  194.         }; 
  195.         S.augment(ActiveBar,{ 
  196.              
  197.             _init:function(){ 
  198.                 return DOM.create(WRAPPER_TPL); 
  199.             }, 
  200.              
  201.             render:function(){ 
  202.                 var self = this; 
  203.                 DOM.html($Wrapper,self.content); 
  204.                 DOM.prepend($Wrapper,'body'); 
  205.             }, 
  206.             slideUp:function(){ 
  207.                 var self = this; 
  208.                 $('.'+WRAPPER_CLS).animate({'margin-top':-self.height+'px'},0.5,'easeOut'); 
  209.             }, 
  210.             slideDown:function(){ 
  211.                 //onload 
  212.                 $('.'+WRAPPER_CLS).animate({'margin-top':0},0.8,'easeOut'); 
  213.             }, 
  214.             bindEvent:function(){ 
  215.                 var self = this; 
  216.                 Event.on($('.'+CLOSE_CLS),'mousedown',function(){ 
  217.                     self.slideUp(); 
  218.                 }); 
  219.             } 
  220.         }); 
  221.         S.ActiveBar = ActiveBar; 
  222.         return ActiveBar; 
  223.     });  
  224. })(KISSY); 
  225. </script> 
  226. <script type="text/javascript"> 
  227. (function(S){ 
  228.     var $ = S.all; 
  229.     S.use('ActiveBar',function(S,ActiveBar){ 
  230.         var activeBar = new ActiveBar({ 
  231.                 content:"本组件兼容ie浏览器，推荐使用<a href='#'> chrome </a>或<a href='#'> firefox </a>浏览器。", 
  232.                 delay:1000 
  233.             }); 
  234.     }); 
  235. })(KISSY); 
  236. </script> 
  237. </body> 
  238. </html>