常用的JS工具类

1、层拖动对象类，原理：
需拖动的层包括两类对象，主移动区域，鼠标拖动事件区域（可与主移动区域一致），鼠标在事件区域按下时为其注册鼠标移动及鼠标释放事件，非IE浏览器需为document注册事件，同时为其设置捕获事件（关键事件setCapture），鼠标移动时重置主区域Style中的位置属性（left，top），释放鼠标后移除事件绑定。

$.extend({
    ObjMove: function (op) {
        var settings = $.extend({
            containerId: 'divPopWindow',    //容器编号
            dragIds: ['divPopWindowDragTop', 'divPopWindowDragBottom'],    //拖动层编号集
            onMouseDownEvent: null,  //鼠标按下时执行的附加事件
            onMouseMoveEvent: null,  //鼠标移动时执行的附加事件
            onMouseUpEvent: null     //鼠标释放时执行的附加事件
        }, op || {});
        var containerObj = null;
        var left = 0;
        var top = 0;

        init();

        function init() {
            containerObj = document.getElementById(settings.containerId);
            containerObj.style.position = 'absolute';
            $(settings.dragIds).each(function () {
                $('#' + this).bind('mousedown', function (ev) {
                    onMouseDown(this, ev);
                });
            });
        }

        //鼠标左键事件
        function onMouseDown(o, ev) {
            var event = window.event || ev;
            if (o.setCapture){
                o.setCapture();
                
                //IE下事件绑定
                $(o).bind('mousemove', function(ev){
                    onMouseMove(ev);
                });
                $(o).bind('mouseup', function(o){
                    onMouseUp(this);
                });
            }else if(window.captureEvents){
                window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

                //Chrome、Firefox下事件绑定
                document.addEventListener('mousemove', onMouseMove, true);
                document.addEventListener('mouseup', onMouseUp, true);
            }

            //计算弹出层的相对初始位置
            left = event.clientX - containerObj.offsetLeft;
            top = event.clientY - containerObj.offsetTop;

            if(settings.onMouseDownEvent != null){
                settings.onMouseDownEvent();
            }
        }

        //鼠标移动事件
        function onMouseMove(ev){
            var event = window.event || ev;
            if(!event.pageX){
                event.pageX = event.clientX;
            }

            if(!event.pageY){
                event.pageY = event.clientY;
            }

            containerObj.style.left = (event.pageX - left) + 'px';
            containerObj.style.top = (event.pageY - top) + 'px';

            if(settings.onMouseMoveEvent != null){
                settings.onMouseMoveEvent();
            }
        }

        //鼠标左键释放事件
        function onMouseUp(o){
            if (o.releaseCapture){
                o.releaseCapture();

                //IE下事件释放
                $(o).unbind('mousemove');
                $(o).unbind('mouseup');
            }else if(window.captureEvents){
                window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

                //Chrome、Firefox下事件释放
                document.removeEventListener("mousemove", onMouseMove, true);
                document.removeEventListener("mouseup", onMouseUp, true);
            }

            if(settings.onMouseUpEvent != null){
                settings.onMouseUpEvent();
            }
        }
    }
})

示例：

<div id="divPopWindow" style=" 200px; height: 200px;">
    <div id="divDragTop" style=" 100%; height: 24px; background-color: gray; cursor: move;"></div>
    <div style=" 100%; height: 152px; background-color: black;"></div>
    <div id="divDragBottom" style=" 100%; height: 24px; background-color: gray; cursor: move;"></div>
</div>
<script type="text/javascript">
$.ObjMove({
    containerId: 'divPopWindow',
    dragIds: ['divDragTop', 'divDragBottom']
});
</script>

2、弹出窗口：

$.extend({
    OpenWindow: function (op) {
        var settings = $.extend({
            title: '提示',    //弹出窗口标题
            content: '',    //弹出窗口内容：内容或URL地址
            contentType: 'frame',  //弹出窗口内容区类型：frame或文本
             300, //宽度
            height: 300 //高度
        }, op || {});
        var windowObj = null;   //主窗口
        var dragTopObj = null;  //拖动对象
        var shadowObj = null;  //阴影对象
        var normalColor = '#336699';
        var activeColor = 'orange';
        
        init();

        function init() {
            windowObj = $('#divPopWindow');
            if(windowObj.length == 0){
                var content = '';
                if(settings.contentType == 'frame') {
                    content = '<iframe id="divPopWindowFrame" name="divPopWindowFrame" style=" 100%; height: ' + (settings.height - 20 - 4) + 'px;" frameborder="0px" scrolling="scrolling" src="' + settings.content + '"></iframe>';
                } else {
                    content = settings.content;
                }

                var fixW = 8; //宽度修正值
                if(!$.browser.msie){
                    fixW = 12;
                }

                var windowHtml = '<div id="divPopWindow" style="z-index: 1000;  ' + settings.width + 'px; height: ' + settings.height + 'px; '
                    + 'background-color: ' + normalColor + '; color: ' + normalColor + '; font-size: 8pt; font-family: Tahoma; position: absolute; cursor: move; border: 2px solid ' + normalColor + ';">'
                    + '    <div id="divPopWindowDragTop" style="background-color: ' + normalColor + ';  ' + (settings.width - (2 * 2)) + 'px; height: 20px; color: white;" ondblclick="">'
                    + '        <span style="float: left; display:block;  ' + (settings.width - (2 * 12) - 4 - fixW) + 'px; margin-left: 5px; margin-top: 3px">' + settings.title + '</span>'
                    + '        <span id="spPopWindowMin" style=" 12px; border- 0px; color: white; font-family: webdings; cursor: default;">0</span>'
                    + '        <span id="spPopWindowClose" style=" 12px; border- 0px; color: white; font-family: webdings; cursor: default;">r</span>'
                    + '    </div>'
                    + '    <div id="divPopWindowContent" style=" 100%; height: ' + (settings.height - 20) + 'px; background-color: white; line-height: 14px; word-break: break-all;">'
                    + '        <div id="divPopWindowContentBox" style=" 100%; height: ' + (settings.height - 20) + 'px; overflow: auto;">'
                    + '        </div>'
                    + '    </div>'
                    + "</div>"
                    + '<div id="divPopWindowShadow" style="display: none;  ' + settings.width + 'px; height:' + settings.height + 'px; top: 0px; left: 0px; '
                    + 'z-index: 999; position: absolute; background-color: black; filter:alpha(opacity=40);">'
                    + '</div>';
                $(windowHtml).appendTo('body');
                $('#spPopWindowMin').bind('click', switchContentArea);
                $('#spPopWindowClose').bind('click', close);
            }

            windowObj = $('#divPopWindow');
            dragTopObj = $('#divPopWindowDragTop');
            shadowObj = $('#divPopWindowShadow');
            $('#divPopWindowContentBox').html(content);

            /*初始化窗口容器位置*/
            var left = (document.body.clientWidth - settings.width) / 2;
            var top = document.documentElement.clientHeight;
            var topscroll = document.body.clientHeight;
            if (topscroll > top) {
                top = topscroll;
            }

            top = (top - settings.height) / 2;
            if (top < 20) {
                top = 20;
            }

            windowObj[0].style.left = left + 'px';
            windowObj[0].style.top = top + 'px';

            windowObj.show();
            $.ObjMove({
                containerId: 'divPopWindow',
                dragIds: ['divPopWindowDragTop'],
                onMouseDownEvent: onMouseDown,
                onMouseMoveEvent: onMouseMove,
                onMouseUpEvent: onMouseUp
            });
        }

        //鼠标按下时执行的事件
        function onMouseDown(){
            windowObj.css({ backgroundColor: activeColor, borderColor: activeColor});
            dragTopObj.css({ backgroundColor: activeColor});
            shadowObj.show();
            shadowObj[0].style.left = (windowObj.position().left + 12) + 'px';
            shadowObj[0].style.top = (windowObj.position().top + 12) + 'px';
        }

        //鼠标移动时执行的事件
        function onMouseMove(){
            shadowObj[0].style.left = (windowObj.position().left + 12) + 'px';
            shadowObj[0].style.top = (windowObj.position().top + 12) + 'px';
        }

        //鼠标释放时执行的事件
        function onMouseUp(){
            windowObj.css({ backgroundColor: normalColor, borderColor: normalColor});
            dragTopObj.css({ backgroundColor: normalColor});
            shadowObj.hide();
        }

        //切换内容显示区
        function switchContentArea(){
            if($('#divPopWindowContent').css('display') != 'none'){
                $('#divPopWindowContent').hide();
                $('#spPopWindowMin').html('2')
                windowObj.height(24);
                shadowObj.height(24);
            }else{
                $('#divPopWindowContent').show();
                $('#spPopWindowMin').html('0')
                windowObj.height(settings.height);
                shadowObj.height(settings.height);
            }
        }

        //关闭窗口
        function close(){
            windowObj.unbind().hide();
            dragTopObj.unbind();
            $('#divPopWindowFrame').attr('src', '');
        }
    }
})

调用：

$.OpenWindow({
    content: 'window.html'
});

　　

3、表单验证工具类，原理：
利用控件自定义属性绑定验证类型、提示说明，验证时通过验证类型调用验证方法，返回真假值：

function ValidObj(op) {
    var obj = new Object;
    obj.Valid = valid;

    var settings = $.extend({
        containerId: 'tbInfo'    //容器编号
    }, op);

    function valid() {
        var isSuccess = 1;
        var inputObj = null;
        var types = '';
        var msgs = '';
        $('#' + settings.containerId).find('[valid]').each(function () {
            inputObj = $(this);
            types = $(eval($(this).attr('valid')));
            msgs = $(eval($(this).attr('msg')));
            $(eval($(this).attr('valid'))).each(function(n){
                isSuccess = run(inputObj, this.toLowerCase());
                if(isSuccess == -1){
                    alert('系统错误，验证类型不存在，请联系开发人员！');
                    return false;
                }

                if(isSuccess == 0){
                    alert(msgs[n]);
                    inputObj.focus();
                    return false;
                }
            });

            if(isSuccess != 1){
                return false;
            }
        });

        return isSuccess == 1;
    }

    //运行表单验证,返回值：-1 验证类型不存在，0 验证失败，1 验证成功
    function run(o, type) {
        var pattern = null;
        var val = o.val();
        switch (type) {
            case 'null':
                //为空验证
                if ($.trim(val).length == 0) {
                    return 0;
                }

                return 1;
            case 'numeric':
                //数值验证
                pattern = /^[-+]?[0-9]+(\.[0-9]+)?$/;
                break;
            case 'notchinese':
                //不能包含中文验证
                pattern = /^[u4E00-u9FA5]+$/;
                break;
            case 'email':
                //邮箱验证
                pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                break;
        }

        if (pattern == null) {
            //未找到验证类型
            return -1;
        }

        if (!pattern.test(val)) {
            return 0;
        }

        return 1;
    }

    return obj;
}

调用：

<table id="tbTest" cellspacing="1" cellpadding="0" style="background-color: black;  100%;">
    <tr>
        <td>非空及数值验证</td>
        <td><input name="tbNotNullAndNumeric" value="" size="20" valid="['null', 'numeric']" msg="['不能为空，请输出', '必须为数值类型，请重新输入']"></td>
    </tr>
    <tr>
        <td>邮件验证</td>
        <td><input name="tbEmail" value="" size="20" valid="['email']" msg="['邮件格式不正确，请重新输入']"></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" onclick="Valid();" value="验证输入框" /></td>
    </tr>
</table>
<script type="text/javascript"> 
function Valid(){
    var obj = new ValidObj({
        containerId: 'tbTest'    //容器编号
    });

    if(obj.Valid()){
        alert('验证成功。');
    }
}
</script>

JS Demo