十分钟的loadMask

在平时开发中，经常要用到LoadMask，是加一个不透明的div，然后到了时间就隐藏掉。写个十分钟的版本，简便快捷，在FF下是可用的，其他也没经过什么测试。创建loadMask代码如下：

function createMask(p) {
    var __m, __msg;
    if (p.selector && $(p.selector).length != 0) {
        __m = $('<div ></div>').css({
            position:'absolute',
            top : $(p.selector).offset().top + 'px',
            left : $(p.selector).offset().left + 'px',
            width : $(p.selector).width(),
            height : $(p.selector).height(),
            'z-index' :1000, 
            'background' : 'repeat scroll 0 0 white',
            opacity : p.opacity ? p.opacity : 0.5
        }); 
        //高度40px，宽度100px.距离上边缘150px,水平居中
        __msg = $('<div ></div>').css({
            position : 'relative',
            top : '150px',
            left : __m.width() / 2 - 100 /2 + 'px',
            width : 100,
            height : 40,
            'line-height' : '40px',
            'font' : 'tohama',
            'color' : 'blue',
            'font-size' : '12px',
            border : '2px solid gray'
        }).html('正在装载......');
        $('body').append(__m);
        __m.append(__msg);
    }
    return __m;
}

代码很简单，传入一个选择器，最后loadMask就mask住选择器选到的DOM元素，使用绝对定位。唯一要注意的是，如果loadMask是某个DOM元素（非body）的子节点，则要注意他的父节点的position属性，如果为relative，则loadMask的top和left则需要设置为0，因为position:absolute的元素的位置是相对与其最近的position属性为relative的祖先节点来说的。我们这里是放到body的最后面，没什么问题。

使用时这样：

            var mask = createMask({
                selector : '#content_frame',
                opacity : 1
            });
            $('#content_frame').load(function(){
                if (!mask)
                    return;
                mask.fadeTo('slow',0,function(){
                    mask.remove();
                });
            });

上面的代码功能是mask住一个iframe，让它加载完成的时候把让loadMask消失～～使用时还是很简单的吧。这样我们的十分钟loadMask开发完成了，就是一个方法，随便往哪个页面一放就行啦。放在全局作用域，不知道会不会有命名冲突的事情哦，自己把握吧。