标签:style blog http color io os ar java for
源码:
/// <reference path="../../Scripts/jquery-1.7.1.min.js" /> /* 2014-9-3 by tonglu_wzq */ ; (function ($) { var tool = { format: function (source, params) { if (arguments.length == 1) return function () { var args = $.makeArray(arguments); args.unshift(source); return $.validator.format.apply(this, args); }; if (arguments.length > 2 && params.constructor != Array) { params = $.makeArray(arguments).slice(1); } if (params.constructor != Array) { params = [params]; } $.each(params, function (i, n) { source = source.replace(new RegExp("\\{" + i + "\\}", "g"), tool.isNull(n) ? ‘‘ : n); }); return source; }, isNull: function (obj) { return typeof obj == "undefined" || obj == null; }, addEvent: function (elem, etype, fn, useCapture) { if (elem.addEventListener) { elem.addEventListener(etype, fn, useCapture); } else if (elem.attachEvent) { elem.attachEvent("on" + etype, fn); } else { elem["on" + etype] = fn; } }, removeEvent: function (elem, etype, fn) { if (elem.removeEventListener) { elem.removeEventListener(etype, fn, false); } else if (elem.detachEvent) { elem.detachEvent("on" + etype, fn); } else { elem["on" + etype] = null; } } }; var dlg = function () { this.para = { title: "标题", content: "内容", width: 250, height: 200, icon: null, fnOk: null, fnNo: null }; }; dlg.prototype = { icon: { icon_error: $(‘<i class="dialog_icon dialog_icon_error"></i>‘), icon_ques: $(‘<i class="dialog_icon dialog_icon_ques"></i>‘), icon_success: $(‘<i class=" dialog_icon dialog_icon_success"></i>‘), }, _open: function (obj, mask, isAutoClose) { var _this = this; $("body").append(mask).append(obj); if (isAutoClose == true) {//自动关闭 setTimeout(function () { _this._close(obj, mask); }, 1000); } document.onkeydown = function (e) { e = e || window.event; var keycode = e.which ? e.which : e.keyCode; if (keycode == 27) { _this._close(obj, mask); } } _this._resize(obj, mask); $(window).on("resize", function () { _this._resize(obj, mask); }); }, _resize: function (obj, mask) { var t = ($(window).height() - obj.height()) / 3; var l = ($(window).width() - obj.width()) / 2; if (t < 0) t = 0; obj.css({ "top": t, "left": l }); mask.height($(window).height()); }, _close: function (obj, mask) { mask.fadeOut(200, function () { obj.remove(); mask.remove(); }); $(window).unbind("resize"); }, close: function (id) { this._close($("#" + id), $("#mask_" + id)); }, _drgn: function (head, obj) { var m_x, m_y; head.on("mousedown", function (e) { e = e || window.event; m_x = e.clientX - obj.offset().left; m_y = e.clientY - obj.offset().top; tool.addEvent(document, "mousemove", _move, false); tool.addEvent(document, "mouseup", _end, false); }); var _move = function (e) { var l = e.clientX - m_x - $(document).scrollLeft(); var t = e.clientY - m_y - $(document).scrollTop(); var ww = $(window).width(), wh = $(window).height(), ow = obj.width(), oh = obj.height(); l = l < 0 ? 10 : l + ow > ww ? ww - ow - 10 : l; t = t < 0 ? 10 : t;// + oh > wh ? wh - oh - 10 : t; obj.css({ "left": l, "top": t }); window.getSelection ? window.getSelection().removeAllRanges() : document.getSelection().empty(); } var _end = function () { tool.removeEvent(document, "mousemove", _move); tool.removeEvent(document, "mouseup", _end); } }, _play: function (id, para, ele, minmax) { var _dlg = new dlg();//, ele = new this.element(); ele.obj.append(ele.head).append(ele.cont).append(ele.font); ele.head.find("span").html(para.title); //标题 if (para.icon != null) { ele.cont.css("padding", "13px"); ele.cont.append(para.icon); } //图标 ele.cont.append(ele.text); //内容 if (para.content) { ele.text.html(para.content); } if (para.fnOk != null && para.fnOk.constructor == Function) { ele.font.append(this.btn("确认", "btn_yes", para.fnOk)); } //确认按钮 if (para.fnNo != null && para.fnNo.constructor == Function) { ele.font.append(this.btn("取消", "btn_no", para.fnNo)); } //取消按钮 if (ele.framk) {//iframe ele.cont.append(ele.framk); ele.framk.attr("src", ele.url); ele.framk.css({ "width": ele.width - 5 + "px", "height": ele.height - 20 }); } ele.obj.css({ "width": para.width + "px" }); ele.obj.attr("id", id); ele.mask.attr("id", "mask_" + id); //“关闭”图标 ele.head.find("i:eq(0)").on("click", function () { ele.mask.fadeOut(200, function () { ele.obj.remove(); ele.mask.remove(); }); $(window).unbind("resize"); }); //“最大化”图标 if (minmax && minmax == true) { ele.head.find("i[class=‘dialog_close‘]").after(ele.maxmin); var _height = 0; var _width = 0; ele.head.find("i:eq(1)").toggle( function () {//最大化 _height = ele.obj.css("height"); _width = ele.obj.css("width"); ele.obj.css({ "top": "5px", "left": "5px", "width": $(window).width() - 12 }); if (ele.framk) { ele.obj.css({ "height": $(window).height() - 12 }); ele.framk.css({ "width": parseInt(ele.obj.css("width")) - 10 + "px", "height": parseInt(ele.obj.css("height")) - 41 + "px" }) } ele.maxmin.removeClass("dialog_max").addClass("dialog_min"); }, function () {//还原 ele.maxmin.removeClass("dialog_min").addClass("dialog_max"); ele.obj.css({ "width": _width, "height": _height }); if (ele.framk) { ele.framk.css({ "width": parseInt(_width) - 10 + "px", "height": parseInt(ele.obj.css("height")) - 41 + "px" }) }; _dlg._resize(ele.obj, ele.mask); }); } _dlg._open(ele.obj, ele.mask); _dlg._drgn(ele.head, ele.obj); return false; }, btn: function (txt, cla, fn) { return $(‘<a href="javascript:;"></a>‘) .attr({ "class": cla, "title": txt }) .css({ "margin-left": "10px" }) .html(txt) .on("click", function () { fn(); }); }, Box: { element: function () { this.obj = $(‘<div class="dialog_main"></div>‘); this.head = $(‘<div class="dialog_title"><span>标题</span><i class="dialog_close"></i></div>‘); this.cont = $(‘<div class="dialog_content"></div>‘); this.text = $(‘<span class="dialog_txt">内容</span>‘); this.font = $(‘<div class="dialog_font"></div>‘); this.maxmin = $(‘<i class="dialog_max_min dialog_max"></i>‘); this.mask = $(‘<div class="dialog_Mask"><iframe scrolling="no"></iframe ></div>‘);//<iframe scrolling="no"></iframe >/*IE 覆盖select*/ }, //对话弹出层 Confrim: function (id, _title, _content, _width, _fnOk, _fnNo) { var _dlg = new dlg(); var p = _dlg.para; $.extend(p, { title: _title, content: _content, width: _width, fnOk: _fnOk, fnNo: _fnNo, icon: _dlg.icon.icon_ques }); _dlg._play(id, p, new this.element()); }, //普通弹出层(没有按钮、图标) Info: function (id, _title, _content, _width) { var _dlg = new dlg(); var p = _dlg.para; $.extend(p, { title: _title, content: _content, width: _width }); _dlg._play(id, p, new this.element(), true); }, //普通弹出层有按钮没图标 Comm: function (id, _title, _content, _width, _fnOk, _fnNo) { var _dlg = new dlg(); var p = _dlg.para; $.extend(p, { title: _title, width: _width, content: _content, fnOk: _fnOk || function () { }, fnNo: _fnNo || function () { } }); _dlg._play(id, p, new this.element(), false); } }, //提示框 Msg: { element: function () { this.obj = $(‘<div class="dialog_Msg_Main">‘); this.cont = $(‘<div class="dialog_Msg_Content">‘); this.icon_info = $(‘<i class="dialog_icon_info"></i>‘); this.text = $(‘ <span class="dialog_Msg_txt">提示内容!</span>‘); this.mask = $(‘<div class="dialog_Mask"><iframe scrollint="no"></iframe ></div>‘); }, //成功信息提示框 Success: function (txt) { var _dlg = new dlg(), e = new this.element(), p = _dlg.para; e.obj.append(e.cont); e.cont.append(_dlg.icon.icon_success); e.cont.append(e.text); e.text.html(txt); _dlg._open(e.obj, e.mask, true); }, //错误信息提示框 Error: function (txt) { var _dlg = new dlg(), e = new this.element(), p = _dlg.para; e.obj.append(e.cont); e.cont.append(_dlg.icon.icon_error); e.cont.append(e.text); e.text.html(txt); _dlg._open(e.obj, e.mask, true); } }, Frame: { element: function () { this.id = "cusIFrame"; this.width = 500; this.height = 450; this.title = "标题"; this.url = "/"; this.obj = $(‘<div class="dialog_main"></div>‘); this.head = $(‘<div class="dialog_title"><span>标题</span><i class="dialog_close"></i></div>‘); this.cont = $(‘<div class="dialog_content"></div>‘); this.framk = $(‘<iframe src="/" width="100%" height="100%" frameborder="no" border="no" overflow="auto"></iframe>‘); this.mask = $(‘<div class="dialog_Mask"><iframe scrolling="no"></iframe ></div>‘); this.maxmin = $(‘<i class="dialog_max_min dialog_max"></i>‘); }, Open: function (_id, _title, _url, _width, _height) { var _dlg = new dlg(), ele = new this.element(); $.extend(ele, { id: _id, title: _title, url: _url, width: _width, height: _height }); _dlg._play(ele.id, ele, ele, true); return false; } } }; $.dlg = new dlg; })(jQuery);
页面调用:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.7.1.min.js"></script> <!-- <link href="Content/qz_dialog.css" rel="stylesheet" />--> <link href="Content/css/dialog.css" rel="stylesheet" /> <script src="Content/js/dialog.js"></script> <style type="text/css"> ul li { text-decoration: none; list-style: none; margin-top: 20px; } </style> </head> <body> <div style="margin: 100px;"> <ul> <li><a href="javascript:;" onclick="showConfirm()">弹出对话框</a> </li> <li><a href="javascript:;" onclick="showInfo();">弹出普通层</a></li> <li><a href="javascript:;" onclick="showComm();">弹出普通层(有按钮)</a></li> <li><a href="javascript:;" onclick="showMsg();">弹出成功提示框</a></li> <li><a href="javascript:;" onclick="showErrorMsg();">弹出错误提示框</a></li> <li><a href="javascript:;" onclick="showFrame();">弹出Iframe</a></li> </ul> </div> <script type="text/javascript"> //function show() { // $.dlg.Box.Confrim("log", "操作提示", ‘确定删除该订单吗?‘, function () { alert(‘执行删除操作‘); }, function () { alert(‘取消删除操作‘); $.dlg.close("log"); }, 300); //} //function OpenMsg() { // $.dlg.Msg.Comm("表单提交成功!"); //} </script> <script type="text/javascript"> $(function () { // DrgnMove(".dialog_title", ".dialog_main", 1); // DrgnMove(".dialog_title", ".dialog_main", 2); // $.dlg._drgn($("#title"), $("#main")) // $.dlg.Box.Confrim("log", "操作提示1", ‘确定删除该订单吗?‘, function () { alert(‘执行删除操作‘); }, function () { alert(‘取消删除操作‘); $.dlg.close("log"); }, 300); }); function showErrorMsg(txt) { $.dlg.Msg.Error("删除订单失败!"); } function showMsg() { $.dlg.Msg.Success("删除订单成功!"); } function showConfirm() { $.dlg.Box.Confrim("log", "系统提示", ‘确定删除该订单吗?‘, 300, function () { alert(‘执行删除操作‘); $.dlg.Msg.Success("删除订单成功!"); $.dlg.close("log"); }, function () { alert(‘取消删除操作‘); $.dlg.close("log"); }); } function showInfo() { $.dlg.Box.Info("info" , "自定义标题" , ‘刘云山:领导干部要心中有杆秤,手中有戒尺2014年09月08日 11:55:40 来源: 学习时报‘, 800); } function showComm() { $.dlg.Box.Comm("com" , "学生列表" , ‘<table style="width:100%;"> <tr> <th>名称</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>24</td> </tr>\<tr> <td>张三</td> <td>24</td> </tr>\<tr> <td>张三</td> <td>24</td> </tr>\<tr> <td>张三</td> <td>24</td> </tr> </table>‘ , 300, function () { alert("自定义确定事件"); }, function () { alert("自定义取消事件"); $.dlg.close("com") }); } function showFrame() { $.dlg.Frame.Open("fa", "网页内容", "http://news.baidu.com/", 888, 600); } </script> </body> </html>
标签:style blog http color io os ar java for
原文地址:http://www.cnblogs.com/wzq806341010/p/4008269.html