`
tonyruiyu
  • 浏览: 4991 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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

阅读更多
这个是写给公司的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
分享到:
评论
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  
谢谢,学习一下。

相关推荐

    一个小玩意11111111111111111111111111111

    一个小玩意11111111111111111111111111111

    自己写的小玩意 = =! java手写记事本

    自己写的小玩意。大家有兴趣的可以用用。仿window的记事本,还有不完整的地方。期待高手补充。本物件已封装。本机有了jdk双击文件就可以运行。

    一个整人小玩意儿(关机倒计时)

    关机的小玩意儿,可以整整人用,对计算机无任何危害,给无聊的生活带来一丝乐趣

    一些小玩意

    标题“一些小玩意”可能指的是一个集合或一系列小型软件工具,这些工具可能具有特定的功能,以帮助用户在日常计算机操作中提高效率或者解决特定问题。根据提供的标签,“源码”和“工具”,我们可以推断这可能是一个...

    猜数字,Java课上做的小玩意

    一个猜数字的小玩意

    一个小玩意,打印最简二叉树

    一个小玩意,打印最简二叉树

    C++-编程小玩意-好玩的

    例如,一个简单的“Hello World”程序,是许多初学者接触编程语言的第一个小项目。在C++中,这个程序可以写成如下形式: ```cpp #include int main() { std::cout !" ; return 0; } ``` 这个例子虽然简单,但...

    人工智能-求婚-基于html的求婚写的小玩意儿

    【描述】"求婚写的小玩意儿 大家可以使用"表明这是一个公开分享的资源,旨在帮助人们创建个性化且具有科技感的求婚体验。这种应用可能包含了动态效果、个性化信息展示,以及可能的人工智能元素,比如语音识别、情感...

    非常简单的小玩意,但可以扩展功能哦。

    标题中的“非常简单的小玩意,但可以扩展功能哦”暗示我们这是一个简单的项目,可能是互动性的,具有可扩展性,适合初学者练习。描述进一步说明这是一个JavaScript(js)的小型演示项目,适合刚入门的JavaScript...

    桌面工具(小玩意)—天气秀

    总的来说,"桌面工具(小玩意)—天气秀"是一个方便易用的桌面天气预报应用,它以小巧、直观的方式为XP用户提供实时天气信息。无论是为了工作还是生活,它都能成为你桌面不可或缺的小助手。只需确保网络连接,你就可以...

    java小玩意

    简单java技术 让新手们基本了解java编程的基本用法

    超级非常好玩的小玩意儿

    它可以是一个小游戏、动态可视化工具或者是具有创新交互设计的网页元素。具体的实现方式和功能将取决于"file"文件的具体内容和与其他可能存在的文件如何协同工作。对于开发者而言,这可能是一个展示技能、学习新技术...

    c# 一个关于C#语言写的一个小游戏

    这是一个用以C#编的小游戏,不过还有很多的地方不是很好,但是大家多多包含

    ping ip地址的小玩意

    标题中的“ping ip地址的小玩意”指的是一个使用Java Swing库创建的GUI应用程序,它能够执行基本的网络诊断功能,特别是ping命令。Ping是Internet控制消息协议(ICMP)的一部分,用于测试两台设备之间的网络连接。这...

    clstab一个使用gtk编写的小玩意~

    描述中提到,这是一个作者自己编写的“小玩意”,暗示可能是一个个人项目或实验性质的应用。这个程序专注于课表管理,根据标签“课表”可以推断,clstab可能是一个用于学生或教师安排和查看课程时间表的应用。然而,...

    C++-编程小玩意-好玩的-new

    初学者可以在完成每一个小项目之后,通过运行程序来检验自己的理解和编码能力,同时也可以通过参与线上社区和论坛来分享自己的作品,获取其他开发者的反馈和建议。这种互动不仅可以激励学习者坚持学习,还能帮助他们...

    排序小玩意儿

    总的来说,"排序小玩意儿"是一个专注于排序算法的项目,提供了源码学习和实践的机会,有助于开发者或学习者提升在数据处理方面的专业能力。通过分析和比较不同算法的实现,可以更好地选择适合特定场景的排序方法,...

    桌面翠鸟-一个桌面的小玩意

    这款小玩意儿的主要功能是提供一个动态的桌面宠物,让用户在工作之余能够享受到轻松的视觉体验。 "桌面翠鸟"的设计理念是将自然界的元素与数字世界相结合,让翠鸟在用户的屏幕上飞翔、栖息,甚至可能与用户进行简单...

    桌面小玩意-绿色爱情鸟

    一款相当精美的小程序,由日本世嘉公司制作,这只精致而漂亮的小鸟理所当然地把你的桌面当作了它的栖身之所,在这里不断地盘旋、冲刺,寻找小鱼。看准之后,会俯冲下去,叼起一条,然后把它一口一口地吃下去!  你...

    桌面小玩意

    综上所述,"桌面小玩意"这个压缩包可能包含了一系列可以帮助用户美化和优化桌面体验的小工具,这些工具不仅实用,而且富有个性化,是提升日常使用电脑乐趣的好帮手。用户在使用过程中,应注意定期检查更新,确保软件...

Global site tag (gtag.js) - Google Analytics