js操作提示小工具

/*
    打印一些操作提示信息
    weiqiang.yang@2010-02-28
    
    需要
    1. logger.css(或者自行将以下内容添加到css文件中)
        .logz{position: absolute; top: 43px; left:50%; height: 18px;  margin-left: -120px; text-align:left; opacity:0.7; z-index:2048;}
        .logi{display:block; background-color:#ffffae; width:240px; padding:2px; margin:5px;}
    2. images目录下的图片文件
        var __images = {'ok':'/images/icon_ok.gif', 'info':'/images/ico_info.gif', 'error':'/images/ico_error.gif', 'debug':'/images/ico_info.gif', 'warn':'/images/ico_info.gif'};
    
*/
( function() {
    var NAMESPACE = 'logger';
    var __options = {timeout:3000, width:200, delay:500};
    var __msgZone;
    var __index = 0;
    var __idPfrefix = "$LOGGER-";
    var __images = {'ok':'/images/icon_ok.gif', 'info':'/images/ico_info.gif', 'error':'/images/ico_error.gif', 'debug':'/images/ico_info.gif', 'warn':'/images/ico_info.gif'};
    
    var debug = function(_msg){
        __appendMsg(_msg, 'debug');
    }
    var ok = function(_msg){
        __appendMsg(_msg, 'ok');
    }
    var info = function(_msg){
         __appendMsg(_msg, 'info');
    }
	var warn = function(_msg){
		__appendMsg(_msg, 'warn');
	}
    var error = function(_msg){
         __appendMsg(_msg, 'error');
    }
    
    var __init = function(){
        if(!__msgZone){
            __msgZone = document.createElement('div');
			__msgZone.className = 'logz';// setAttribute('className', xxx), setAttribute('class', xxx)... 还是className通用
            //__msgZone.style.left = (document.body.clientWidth-__options.width)/2 +'px';
            __msgZone.style.top = document.documentElement.scrollTop + 25 + 'px';
            document.body.appendChild(__msgZone);
        }
    }
    
    var __appendMsg = function(_msg, _type){
        __init();
        var _id = __idPfrefix+__index;
        var _span = document.createElement('span');
        _span.setAttribute('id', _id);
		_span.className = 'logi';
        _span.innerHTML = '<img src="'+__images[_type]+'" alt="'+_type+'"/> '+_msg;
        __msgZone.insertBefore(_span, __msgZone.firstChild);
        __index++;
        var _f = function(){__remove(_id);}
		var _timeout = __options.timeout + (__index * __options.delay);/*加个delay是如果瞬间出现了多个log，那么控制删除的速度*/
        setTimeout(_f, _timeout);
    }
    
    var __remove = function(_id){
        var _node = document.getElementById(_id);
        __msgZone.removeChild(_node);
    }
    
    /*注册全局的对象*/
    window[NAMESPACE] = {};
    window[NAMESPACE].ok = ok;
    window[NAMESPACE].debug = debug;
    window[NAMESPACE].info = info;
    window[NAMESPACE].warn = warn;
    window[NAMESPACE].error = error;
})();

仿log4j的风格，引入logger.js
然后在代码里面调
logger.ok("操作成功");
logger.info("提示信息");
...
就成了
js新手，谢谢~~

评论

10 楼 weiqiang.yang 2010-03-19  

额，怪我没说清楚。。。
需求是这样的，比如一个添加管理员的界面，用户点确定，然后提示用户操作成功/失败，以前的代码都是弹出alert说操作成功，现在觉得这种很不友好，就在页面的顶部加一个小区域提示层，然后这个提示会自动隐去~~~【效果见附件图片】

不知道大家看明白了没
blackbird.js我之前看过，调试js用很方便，挺不错的
firebug也在用

9 楼 ahwingwu 2010-03-17  

同楼上，用FireBug 很好用，如果觉得alert太麻烦了，可以用console.log、console.debug、console.dir 等，都很好用。

8 楼 amcucn 2010-03-16  

如果是使用FF或chrome，直接在代码里使用console.log("日志信息")就可以在FireBug下看到。

7 楼 lzstone 2010-03-16  

观察了一下大家的讨论终于有点明白楼主的意图了   楼主的小工具整的我有点蒙

6 楼 zzknight 2010-03-15  

建议楼主搜索下blackbird

5 楼 weiqiang.yang 2010-03-15  

MrLee23 写道

没搞明白楼主的这个是干什么用的?~是可以监测到js中调用的各种函数吗?~

没，就是js异步操作打个提示信息而已。。。不能总是用alert吧，体验不好

4 楼 amcucn 2010-03-15  

不知道为什么看到一大堆的 " __ "开头的方法，就头晕。。

3 楼 MrLee23 2010-03-15  

没搞明白楼主的这个是干什么用的?~是可以监测到js中调用的各种函数吗?~

2 楼 cloudgamer 2010-03-15  

595755330 写道

Ajax怎么做到跨域调用呢？

ajax不能跨域的
可以用jsonp

1 楼 595755330 2010-03-12  

Ajax怎么做到跨域调用呢？