Kissy activebar 组件（置顶提示层）
效果图：
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>activebar-Demo</title>
- <style>
- /*****************************************************************************/
- /* reset css */
- /*****************************************************************************/
- html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {
- margin: 0;
- padding: 0;
- }
- img,body,html {
- border: 0;
- }
- address,caption,cite,code,dfn,em,th,var {
- font-style: normal;
- font-weight: normal;
- }
- ol,ul {
- list-style: none;
- }
- caption,th {
- text-align: left;
- }
- h1,h2,h3,h4,h5,h6 {
- font-size: 100%;
- }
- h1 {
- font-size: 18px;
- }
- h2 {
- font-size: 16px;
- }
- h3 {
- font-size: 14px;
- }
- q:before,q:after {
- content: '';
- }
- sup {
- vertical-align: text-top;
- }
- sub {
- vertical-align: text-bottom;
- }
- input,button,textarea,select {
- font-family: inherit;
- font-size: inherit;
- font-weight: inherit;
- }
- input,button,textarea,select {
- *font-size: 100%;
- }
- select,input,button,textarea {
- font: 100% tahoma, helvetica, arial, sans-serif;
- }
- table {
- font-size: inherit;
- font: 100%;
- }
- pre,code,kbd,samp,tt {
- font-family: 'courier new', courier, monospace;
- }
- small {
- font-size: 100%;
- }
- a {
- color: #028ef0;
- text-decoration: none;
- }
- a:hover {
- color: #f60;
- text-decoration: underline;
- }
- abbr,acronym {
- border-bottom: 1px dotted;
- cursor: help;
- }
- ins {
- text-decoration: none;
- }
- del {
- text-decoration: line-through;
- }
- hr {
- color: #d1d7dc;
- background-color: #d1d7dc;
- border: none;
- height: 1px;
- }
- /* 让浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
- html {
- overflow-y: scroll;
- }
- body {
- font: 12px/ 1.5 Tahoma, Arial, '宋体', sans-serif;
- background-color: #fff;
- }
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- .clearfix{
- *zoom:1;
- }
- .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;}
- .k-activebar-close{float:right;display: block;width:30px;text-align: center;color:#444;text-decoration: none;}
- .k-activebar-close:hover{text-decoration: none;}
- </style>
- </head>
- <body>
- <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js"></script>
- <script type="text/javascript">
- /**
- * 顶部 TPS
- * @author wb-huxiaoqi
- */
- (function(S){
- var $ = S.all,
- Event = S.Event,
- DOM = S.DOM;
- S.add('ActiveBar',function(){
- var $Wrapper,PREFIX = 'k-activebar-',
- WRAPPER_CLS = PREFIX+"wrapper";
- WRAPPER_TPL = "<div class="+WRAPPER_CLS+"></div>",
- CLOSE_CLS = PREFIX+"close",
- CLOSE_TPL = "<a href='javascript:void(0)' class="+CLOSE_CLS+" title='关闭'>X</a>";
- DefaultCfg = {
- style:"default",
- target:"",
- content:"",
- delay:1000
- };
- function ActiveBar(cfg){
- var self = this;
- if(!(self instanceof ActiveBar)){ //确保this指向ActiveBar实例
- return new ActiveBar();
- }
- self.config = S.mix(DefaultCfg,cfg);
- self.target = typeof self.config.target === "string" ? $(self.config.target) : self.config.target;
- selfself.content = self.config.content+CLOSE_TPL;
- $Wrapper = self._init();
- self.render();
- self.height = $Wrapper.offsetHeight;
- DOM.css($Wrapper,{'margin-top':-self.height,'visibility':'visible'});
- // 延时slide
- setTimeout(function(){self.slideDown();},self.config.delay);
- //绑定关闭按钮事件
- self.bindEvent();
- };
- S.augment(ActiveBar,{
- _init:function(){
- return DOM.create(WRAPPER_TPL);
- },
- render:function(){
- var self = this;
- DOM.html($Wrapper,self.content);
- DOM.prepend($Wrapper,'body');
- },
- slideUp:function(){
- var self = this;
- $('.'+WRAPPER_CLS).animate({'margin-top':-self.height+'px'},0.5,'easeOut');
- },
- slideDown:function(){
- //onload
- $('.'+WRAPPER_CLS).animate({'margin-top':0},0.8,'easeOut');
- },
- bindEvent:function(){
- var self = this;
- Event.on($('.'+CLOSE_CLS),'mousedown',function(){
- self.slideUp();
- });
- }
- });
- S.ActiveBar = ActiveBar;
- return ActiveBar;
- });
- })(KISSY);
- </script>
- <script type="text/javascript">
- (function(S){
- var $ = S.all;
- S.use('ActiveBar',function(S,ActiveBar){
- var activeBar = new ActiveBar({
- content:"本组件兼容ie浏览器，推荐使用<a href='#'> chrome </a>或<a href='#'> firefox </a>浏览器。",
- delay:1000
- });
- });
- })(KISSY);
- </script>
- </body>
- </html>