- 浏览: 4767 次
- 性别:
- 来自: 上海
最近访客 更多访客>>
文章分类
最新评论
-
vb2005xu:
很无语 "4.本来还以为你是一个XML高手,结果发现 ...
新鲜出炉的JavaScriptMVC(tony版) -
satanultra:
tonyruiyu 写道vb2005xu 写道 ...
新鲜出炉的JavaScriptMVC(tony版) -
sirxenofex:
同学你这个标题玩大了。看看真正的Javascript MVC: ...
新鲜出炉的JavaScriptMVC(tony版) -
liuzhiqiangruc:
js 模板
新鲜出炉的JavaScriptMVC(tony版) -
tonyruiyu:
vb2005xu 写道无语 这也算MVC,你还不如看看我的模版 ...
新鲜出炉的JavaScriptMVC(tony版)
这个是写给公司的CONFIRM 在IE6,7,8,FF下测试通过
另外还有个CSS的文件 没有带回家 所以先把JS代码发出来
(现在已经辞职 不好再回去拿CSS 其实这个东西本身就支持自己定义,大家如果感兴趣可以自己定义一个CSS
发上来,我自认没什么设计感 以前这个东西的样式 都是叫公司美工整出来的 .
)
用法很简单
因为公司最开始用的是JQUERY的插件 jquery.divbox.js
但是问题很大 我在之前也修改了许多
比如 遮罩层遮不全,IE6下遮罩层无法遮罩SELECT
弹出层定位的问题 原来JQUERY弹出层不能正确适应客户端不同分辨率下的定位问题
导致客户端无法使用弹出层的关闭按钮,在下面这个弹出层已经修正了这个问题
可能还有些小BUG 大家发现后可以修正后发上来 共同进步。
附件http://dl.iteye.com/topics/download/863b9b48-8f1b-3c29-b557-84e1a9f1858c
原来觉得JS不是很难,但是看了有些高手些的JS代码,真有种想钻地的感觉,不是说功能的实现,为是代码本身, 人家两三句话的东西,自己往往要用几倍代码量才可以完成! 惭愧啊!
另外还有个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
评论
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>
<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
谢谢,学习一下。
相关推荐
自己写的小玩意。大家有兴趣的可以用用。仿window的记事本,还有不完整的地方。期待高手补充。本物件已封装。本机有了jdk双击文件就可以运行。
关机的小玩意儿,可以整整人用,对计算机无任何危害,给无聊的生活带来一丝乐趣
一个猜数字的小玩意
一个小玩意,打印最简二叉树
桌面翠鸟-一个桌面的小玩意 桌面翠鸟-一个桌面的小玩意 桌面翠鸟-一个桌面的小玩意
求婚写的小玩意儿 供大家使用
简单java技术 让新手们基本了解java编程的基本用法
NULL 博文链接:https://linwei9090.iteye.com/blog/869636
这是一个用以C#编的小游戏,不过还有很多的地方不是很好,但是大家多多包含
利用matlab 进行抓屏,一个小玩意....
一款相当精美的小程序,由日本世嘉公司制作,这只精致而漂亮的小鸟理所当然地把你的桌面当作了它的栖身之所,在这里不断地盘旋、冲刺,寻找小鱼。看准之后,会俯冲下去,叼起一条,然后把它一口一口地吃下去! 你...
小demo娱乐娱乐,如果刚入门js可以试试改改玩玩,大神就不必。
一年级下册道德与法治做个小玩意儿|教科PPT学习教案.pptx
XP系统可用,实时显示天气,可更新!!需连入网络!
超级非常好玩的小玩意儿
神奇的小玩意.bat
svd-图像压缩小玩意
一个swing方式ping ip地址的小玩意以及对应的源码
小玩意AT89C2051驱动彩显玩方块游戏.687.rar小玩意AT89C2051驱动彩显玩方块游戏.687.rar小玩意AT89C2051驱动彩显玩方块游戏.687.rar小玩意AT89C2051驱动彩显玩方块游戏.687.rar
自动关机代码一些小玩意 大家无聊的时候可以支持下看看 里面附有源代码