辞职前给公司写的一个小玩意MyConfirm

tonyruiyu

浏览: 5012 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3)

社区版块

存档分类

jQuery CSS IE 编程

这个是写给公司的CONFIRM 在IE6,7,8,FF下测试通过

另外还有个CSS的文件没有带回家所以先把JS代码发出来

(现在已经辞职不好再回去拿CSS 其实这个东西本身就支持自己定义,大家如果感兴趣可以自己定义一个CSS
发上来,我自认没什么设计感以前这个东西的样式都是叫公司美工整出来的 .
)

用法很简单

因为公司最开始用的是JQUERY的插件 jquery.divbox.js

但是问题很大我在之前也修改了许多

比如遮罩层遮不全，IE6下遮罩层无法遮罩SELECT

弹出层定位的问题原来JQUERY弹出层不能正确适应客户端不同分辨率下的定位问题

导致客户端无法使用弹出层的关闭按钮，在下面这个弹出层已经修正了这个问题

可能还有些小BUG 大家发现后可以修正后发上来共同进步。


/*************************************************************
MyConfirm使用说明：
 
   （使用之前请确保有jquery.js，在弹出层的定位上使用了JQUERY
     若要是用showDialog请确保有jquery.divbox.js）
    
    1.MyConfirm.show("这里是需要显示的内容"); 
      or  :
      MyConfirm.showDialog("这里是需要显示的内容");
    
    2.MyConfirm.show({
        title:"标题",
        message:"内容",
        okvalue:"确定按钮的值",
        cancelvalue:"取消按钮的值",
        type:ConfirmType.Ok,    //ConfirmType.OkCancel,ConfirmType.None
        onokclick:function() {
            alert("这里是单击确定按钮事件。。。。\n但是这时并不会关闭层");
            //想要关闭层还需要加上这样的语句
            MyConfirm.defaultClose();
        },
        oncancelclick:function() {
            alert("这里是单击取消按钮事件。。。。\n但是这时并不会关闭层");
            //想要关闭层还需要加上这样的语句
            MyConfirm.defaultClose();            
        }
        //more......                
    });
    
    3.给按钮注册事件    
    MyConfirm.onokclick = function(e) {
        //e:ff下的event
        //var myevent = window.event || e; 
        //more......
                
        //close;
    };
    
    
    4.Style:
        * @param {Object} args
        * args.allstyle: confirmClass<br>
        * args.titAllStyle: 标题行的class包括标题和关闭按钮<br>
        * args.title: 标题<br>
        * args.titlestyle: 标题样式<br>
        * args.cloallstyle: 关闭层样式<br>
        * args.closeImgstyle: 图片样式<br>
        * args.closeImg: 图片链接<br>
        * args.messageStyle: 消息框样式<br>
        * args.message: 消息<br>
        * args.pbtnStyle: 按钮层样式<br>
        * args.okstyle: 确定按钮样式<br>
        * args.okvalue: 确定按钮值<br>
        * args.onokclick: 确定事件<br>okevent
        * args.cancelstyle: 取消样式<br>
        * args.cancelvalue: 取消按钮值<br>
        * args.oncancelclick: 取消事件<br>
        * args.type: confrim类型 (ConfirmType.Ok,ConfirmType.OkCancel,ConfirmType.None)<br>

    
                                                tony by 2010
****************************************************************/


(function() {

    var ConfirmType = window.ConfirmType = {
        OkCancel: "OkCancel",
        Ok: "Ok",
        None: "None"
    };

    ViewType = {
        Dialog: "dialog",
        None: "none"
    };

    /**
    * confirm对象是否设置到文档中
    */
    var _isinit = false;

    var _confirm_type = ConfirmType.OkCancel;

    var _allStyle = {
        OkCancel: "wb_opendiv2",
        Ok: "wb_opendiv2",
        None: "wb_opendiv1"
    }

    /** 
    * 最外层层的className 
    */
    var _all_class = "wb_opendiv2",

    /** 标题大层的class */
    _ul_class = "wb_closediv",

    /** 标题li的class */
    _li_title_class = "wb_opentitler",

    /** 标题内容 */
    _title_value = "",

    /** 关闭li的class */
    _close_li_class = "wb_opentitle",

    /** 关闭图标的class */
    _close_img = "",

    /** 关闭图标的图标地址 */
    _img_src = "/usercenter/App_Themes/Group/img/wb_close.png",

    /** 消息栏目class */
    _message_class = "wb_opendivp",

    /** 消息内容 */
    _message_value = "",

    /** 按钮层样式 */
    _pbtn_class = "wb_openbtn",

    /** Ok按钮样式 */
    _ok_btn_class = "",

    /** OkValue */
    _ok_btn_value = "确定",

    /** 取消按钮样式 */
    _cancel_btn_class = "",

    /** 取消按钮Value */
    _cancel_btn_value = "取消",

    _View = ViewType.None;


    function _exit() {
        if (_View == ViewType.Dialog) {
            $("#_id_tony_all_").CloseDiv();
        } else if (_View == ViewType.None) {
            $i("_id_tony_all_").style.display = "none";
        }
        _clear();
    }

    function _show() {
        if (_View == ViewType.Dialog) {

            $("#_id_tony_all_").OpenDiv();
        } else if (_View == ViewType.None) {
            var templocation = getWindowSize();
            var PageScroll = getPageScroll();
            //var b_w = obj_doc.width();
            //var b_h = obj_doc.height();
            var b_w = templocation.x;
            var b_h = templocation.y;
            //屏幕高度+滚动条高度
            var obj_c = $("#_id_tony_all_");
            obj_c.css("left", ((b_w - obj_c.width()) / 2) + PageScroll.x + "px").css("top", ((b_h - obj_c.height()) / 2 + PageScroll.y) + "px").css("position", "absolute").css("z-index", 50000);
            $i("_id_tony_all_").style.display = "";
        }
        regEvent();
    }

    //private 
    var getWindowSize = function() {
        var result = {};
        var docElmt = document.documentElement || {};
        var body = document.body || {};
        if (typeof (window.innerWidth) == 'number') {
            // non-IE browsers
            result.x = window.innerWidth;
            result.y = window.innerHeight;
        } else if (docElmt.clientWidth || docElmt.clientHeight) {
            // IE6+ in standards mode
            result.x = docElmt.clientWidth;
            result.y = docElmt.clientHeight;
        } else if (body.clientWidth || body.clientHeight) {
            // IE6+ in quirks mode
            result.x = body.clientWidth;
            result.y = body.clientHeight;
        } else {
        }
        if (!result.y) result.y = 0;
        if (!result.x) result.x = 0;

        return result;
    };
    //private 
    var getPageScroll = function() {
        var result = {};
        var docElmt = document.documentElement || {};
        var body = document.body || {};

        if (typeof (window.pageXOffset) == "number") {
            // most browsers
            result.x = window.pageXOffset;
            result.y = window.pageYOffset;
        } else if (body.scrollLeft || body.scrollTop) {
            // W3C spec, IE6+ in quirks mode
            result.x = body.scrollLeft;
            result.y = body.scrollTop;
        } else if (docElmt.scrollLeft || docElmt.scrollTop) {
            // IE6+ in standards mode
            result.x = docElmt.scrollLeft;
            result.y = docElmt.scrollTop;
        }
        if (!result.y) result.y = 0;
        if (!result.x) result.x = 0;

        return result;
    };


    function _clear() {
        _title_value = "";
        _message_value = "";
        _ok_btn_value = "确定";
        _cancel_btn_value = "取消";
        MyConfirm.onokclick = _exit;
        MyConfirm.oncancelclick = _exit;
    }
    //'<div id="_id_tony_all_" style="display:none" >'
    var _code = '<ul id="_id_tony_ul_">' +
    '<li id="_id_tony_title_">' +
    '</li>' +
    '<li id="_id_tony_close_">' +
    '<img id="_id_tony_close_img_" src="/usercenter/App_Themes/img/wb_close.png" />' +
    '</li>' +
    '</ul>' +

    '<div id="_id_tony_message_" >' +

    '</div>' +

    '<div id="_id_tony_pbtn_div_">' +

    '<input type="button" value="确定" onclick="MyConfirm.onokclick(event)" id="_id_tony_ok_btn_" >' +
    '<input type="button" value="取消" onclick="MyConfirm.oncancelclick(event)" id="_id_tony_cancel_btn_" >' +

    '</div>';

    function regEvent() {
        window.onresize = function() {
            if ($i("_id_tony_all_").style.display == "none") {
                return;
            }
            _show();
        };

        window.onscroll = function() {
            if ($i("_id_tony_all_").style.display == "none") {
                return;
            }
            _show();
        };
    }

    function _Construction() {
        if (!_isinit) {
            var obj_div;
            try {
                obj_div = document.createElement("div");
                obj_div.innerHTML = _code;
                obj_div.style.display = "none";
                obj_div.id = "_id_tony_all_";
                document.body.appendChild(obj_div);
                _isinit = true;
            }
            catch (e) { }
            obj_div = null;

        }
    }

    function setAttr(args) {
        _confirm_type = args.type || _confirm_type;
        _all_class = args.allstyle || _allStyle[_confirm_type];
        _ul_class = args.titAllStyle || _ul_class;
        _li_title_class = args.titlestyle || _li_title_class;
        _title_value = args.title || _title_value;
        _close_li_class = args.cloallstyle || _close_li_class;
        _close_img = args.closeImgstyle || _close_img;
        _img_src = args.closeImg || _img_src;
        _message_class = args.messageStyle || _message_class;
        _message_value = args.message || _message_value;
        _pbtn_class = args.pbtnStyle || _pbtn_class;
        _ok_btn_class = args.okstyle || _ok_btn_class;
        _ok_btn_value = args.okvalue || _ok_btn_value;
        MyConfirm.onokclick = args.onokclick || _exit;
        _cancel_btn_class = args.cancelstyle || _cancel_btn_class;
        _cancel_btn_value = args.cancelvalue || _cancel_btn_value;
        MyConfirm.oncancelclick = args.oncancelclick || _exit;
    }

    function setObj() {
        _Construction();
        $i("_id_tony_all_").setClass(_all_class);
        $i("_id_tony_ul_").setClass(_ul_class);
        var obj_title = $i("_id_tony_title_");
        obj_title.setClass(_li_title_class);
        obj_title.innerHTML = _title_value;
        $i("_id_tony_close_").setClass(_close_li_class);
        var obj_closeImg = $i("_id_tony_close_img_");
        obj_closeImg.setClass(_close_img);
        obj_closeImg.src = _img_src;
        obj_closeImg.onclick = _exit;
        var obj_message = $i("_id_tony_message_");
        obj_message.setClass(_message_class);
        obj_message.innerHTML = _message_value;
        $i("_id_tony_pbtn_div_").setClass(_pbtn_class);
        var obj_ok = $i("_id_tony_ok_btn_");
        obj_ok.setClass(_ok_btn_class);
        obj_ok.value = _ok_btn_value;
        var obj_cancel = $i("_id_tony_cancel_btn_");
        obj_cancel.setClass(_cancel_btn_class);
        obj_cancel.value = _cancel_btn_value;
        if (_confirm_type == ConfirmType.Ok) {
            $i("_id_tony_ok_btn_").style.display = "";
            $i("_id_tony_cancel_btn_").style.display = "none";
        }
        else if (_confirm_type == ConfirmType.OkCancel) {
            $i("_id_tony_ok_btn_").style.display = "";
            $i("_id_tony_cancel_btn_").style.display = "";
        } else if (_confirm_type == ConfirmType.None) {
            $i("_id_tony_ok_btn_").style.display = "none";
            $i("_id_tony_cancel_btn_").style.display = "none";
        }
    }

    function _setClass(cName) {
        this.className = "";
        this.className = cName;
    }

    function $i() {
        if (arguments[0]) {
            var obj = document.getElementById(arguments[0]);
            if (!obj.setClass) {
                obj.setClass = _setClass;
            }
            return obj;
        }
        return null;
    }


    var _confirm = {

        /**
        * @param {Object} args
        * args.allstyle: confirmClass<br>
        * args.titAllStyle: 标题行的class包括标题和关闭按钮<br>
        * args.title: 标题<br>
        * args.titlestyle: 标题样式<br>
        * args.cloallstyle: 关闭层样式<br>
        * args.closeImgstyle: 图片样式<br>
        * args.closeImg: 图片链接<br>
        * args.messageStyle: 消息框样式<br>
        * args.message: 消息<br>
        * args.pbtnStyle: 按钮层样式<br>
        * args.okstyle: 确定按钮样式<br>
        * args.okvalue: 确定按钮值<br>
        * args.onokclick: 确定事件<br>
        * args.cancelstyle: 取消样式<br>
        * args.cancelvalue: 取消按钮值<br>
        * args.oncancelclick: 取消事件<br>
        * args.type: confrim类型 (ConfirmType.Ok,ConfirmType.OkCancel,ConfirmType.None)<br>
        */
        init: function(args) {
            _Construction();
            if (!args || args == null) {
                return;
            }
            setAttr(args);

        },
        /**
        * @param {Object} args
        * args.allstyle: confirmClass<br>
        * args.titAllStyle: 标题行的class包括标题和关闭按钮<br>
        * args.title: 标题<br>
        * args.titlestyle: 标题样式<br>
        * args.cloallstyle: 关闭层样式<br>
        * args.closeImgstyle: 图片样式<br>
        * args.closeImg: 图片链接<br>
        * args.messageStyle: 消息框样式<br>
        * args.message: 消息<br>
        * args.pbtnStyle: 按钮层样式<br>
        * args.okstyle: 确定按钮样式<br>
        * args.okvalue: 确定按钮值<br>
        * args.onokclick: 确定事件<br>okevent
        * args.cancelstyle: 取消样式<br>
        * args.cancelvalue: 取消按钮值<br>
        * args.oncancelclick: 取消事件<br>
        * args.type: confrim类型 (ConfirmType.Ok,ConfirmType.OkCancel,ConfirmType.None)<br>
        */
        show: function(args) {

            if (typeof (args) == "string") {
                _message_value = args;

                MyConfirm.onokclick = _exit;
                MyConfirm.oncancelclick = _exit;

            } else {
                this.init(args);
            }
            _View = ViewType.None;

            setObj();

            _show();
        },
        showDialog: function(args) {
            if (typeof (args) == "string") {
                _message_value = args;
                MyConfirm.onokclick = _exit;
                MyConfirm.oncancelclick = _exit;
            } else {
                this.init(args);
            }
            _View = ViewType.Dialog;
            setObj();
            _show();
        },
        defaultClose: function() {
            _exit();
        }

    };

    window.MyConfirm = _confirm;
})();

附件http://dl.iteye.com/topics/download/863b9b48-8f1b-3c29-b557-84e1a9f1858c

Confirm.rar (23.3 KB)
下载次数: 2306

分享到：

关闭关闭关闭关闭关闭

2010-04-11 22:02
浏览 1071
评论(13)
论坛回复 / 浏览 (12 / 13721)
分类:Web前端
查看更多

13 楼 wupingteng 2010-04-14

<div class="quote_title">lucky16 写道</div>
<div class="quote_div">
<div class="quote_title">shuiguozheng 写道</div>
<div class="quote_div">一直都很佩服写js的哥</div>
<br>原来觉得JS不是很难，但是看了有些高手些的JS代码，真有种想钻地的感觉，不是说功能的实现，为是代码本身，人家两三句话的东西，自己往往要用几倍代码量才可以完成！惭愧啊！</div>
<p> </p>
<p> 看看jQuery的源码更是汗颜。面向对象的语言（如java）和函数式的编程差异好大。原来还不怎么感觉，只是用js来做些简单的dom操作。</p>

12 楼 renjie120 2010-04-14

没有实例界面啊....遗憾

11 楼 fkpwolf 2010-04-13

还以为是myConfirmLetter

10 楼 qiren83 2010-04-13

效果图先来一张呀

9 楼海阔天高 2010-04-13

有示例页面么？

8 楼 boy002 2010-04-13

下载下来研究一下，谢谢楼主

7 楼 whaosoft 2010-04-12

写的挺好的呢

6 楼 ghyghoo8 2010-04-12

求另一个css文件。。。持续关注

5 楼 lucky16 2010-04-12

shuiguozheng 写道

一直都很佩服写js的哥

原来觉得JS不是很难，但是看了有些高手些的JS代码，真有种想钻地的感觉，不是说功能的实现，为是代码本身，人家两三句话的东西，自己往往要用几倍代码量才可以完成！惭愧啊！

4 楼 kaki 2010-04-12

把渲染的css发过来就好了。

3 楼 archerfrank 2010-04-12

很好啊，用起来很方便

2 楼 shuiguozheng 2010-04-12

一直都很佩服写js的哥

1 楼 kaki 2010-04-12

谢谢，学习一下。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论