注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

仿 JQuery pnotify插件 的YUI函数  

2010-12-24 21:00:21|  分类: Yui |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

JQuery pnotify 插件 这个插件真的很不错,可惜我们公司不用JQuery

http://pines.sourceforge.net/pnotify/

 

我用YUI写了一个类似的函数 用作消息提示

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>


<style type="text/css">
.notifyWindow {
    position:fixed;
    left:30px;
    top:50px;
    background:#FCFAF1;
    margin-bottom:1em;
    padding-left:20px;
    width:300px;
    height:50px;
    border:1px solid #FCEFA1;
    filter:alpha(opacity=0);
    opacity:0;
    -moz-border-radius:6px;
}

.notifyWindow .close{
    float:right;
    padding-right:6px;
    padding-top:3px;
    cursor:pointer;
    display:none;
}
</style>


</head>
<body >

<script type="text/javascript">
(function(){
    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;
    var Anim  = YAHOO.util.Anim;

    function notify(options){
      //options 还没有进行处理
        var notifyWindow = null;
        
        var closeAttrs = { opacity: {to: 0} };
        var showAttrs = { opacity: {to: 0.9} };
     //Dom生成消息框所需的html结构
        var initNotifyWindow = function(){
            var div = document.createElement("div");
            Dom.addClass(div,"notifyWindow");
            
            var closeDiv = document.createElement("div");
            closeDiv.innerHTML='x';
            Dom.addClass(closeDiv,"close");

            div.appendChild(closeDiv);
            var msgH3 = document.createElement("h3");
            div.appendChild(msgH3);
            document.body.appendChild(div);

            return div;
        }
      //将消息框显示出来
        this.notify = function(message){

            if(notifyWindow == null)  notifyWindow = initNotifyWindow();
            
            var closeDiv = Dom.get(notifyWindow).firstChild;
            var animClose = new Anim(notifyWindow, closeAttrs);

            Event.on(closeDiv, 'click', function() {
                animClose.animate();
            });

            Event.on(notifyWindow, 'mouseover', function() {
                Dom.setStyle(closeDiv,"display","block");
            });

            Event.on(notifyWindow, 'mouseout', function() {
                Dom.setStyle(closeDiv,"display","none");
            });

            var animShow = new Anim(notifyWindow, showAttrs);

            var msgH3 = Dom.get(notifyWindow).lastChild;
            msgH3.innerHTML = message;
            animShow.animate();
           
            YAHOO.lang.later(8000,animClose,function(){
                 this.animate()
            });
        }
    }
   //使用方式
    var notice = new notify();
    notice.notify("Check me out! I'm a notice.");
})();

</script>
</body>
</html>

看一下效果

1.消息框会固定在浏览器左上角 不随浏览器滚动

2.消息框出现 8 秒后消失

3.鼠标放在消息框后 关闭按钮出现,点击关闭按钮,消息框消失

  仿 JQuery pnotify插件  的YUI函数 - zhenghaoju700 - zhenghaoju700 的博客

补充知识

1.YAHOO.lang.later 用于延时执行函数

  评论这张
 
阅读(620)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017