首页 > 代码库 > 自定义插件学习-弹框2
自定义插件学习-弹框2
;(function($) { $.alerts = { verticalOffset: -75, horizontalOffset: 100, repositionOnResize: true, overlayOpacity: 0.50, overlayColor: "#FFF", draggable: true, okButton: "确 定", cancelButton: "取 消", dialogClass: null, alert: function(content, title, callback) { if (title == null) { title = "OK" } $.alerts._show(title, content, null, "alert", function(e) { if (callback) { callback(e) } }) }, confirm: function(content, title, callback) { if (title == null) { title = "Are you sure" } $.alerts._show(title, content, null, "confirm", function(e) { if (callback) { callback(e) } }) }, prompt: function(content, defaulevalue, title, callback) { if (title == null) { title = "Please enter something" } $.alerts._show(title, content, defaulevalue, "prompt", function(f) { if (callback) { callback(f) } }) }, overShow: function(tips, seconds) { if (seconds == null) { seconds = 3000 } var hide_seconds = seconds + 600; $("body").append(‘<div id="over_container" style="display:none"><div id="over_message"></div></div>‘); $("#over_message").text(tips).html($("#over_message").text().replace(/\n/g, "<br/>")); if ($.alerts.dialogClass) { $("#over_container").addClass($.alerts.dialogClass) } var position_type = ($.browser.msie && parseInt($.browser.version) <= 6) ? "absolute" : "fixed"; $("#over_container").css({ position: position_type, zIndex: 99999, width: 350, padding: 0, margin: 0 }).show("fast"); $("#over_container").css({ minWidth: $("#over_container").outerWidth(), maxWidth: $("#over_container").outerWidth() }); $.alerts._overReposition(); setTimeout(function() { $("#over_container").hide("fast") }, hide_seconds); setTimeout(function() { $("#over_container").remove() }, hide_seconds) }, _overReposition: function() { var top = 4; var left = (($(window).width() / 2) - ($("#over_container").outerWidth() / 2)) + $.alerts.horizontalOffset; if (top < 0) { top = 0 } if (left < 0) { left = 0 } if ($.browser.msie && parseInt($.browser.version) <= 6) { top = top + $(window).scrollTop() } if ($.browser.msie && parseInt($.browser.version) <= 6) { left = left - 175 } $("#over_container").css({ top: top + "px", left: left + "px" }); $("#popup_overlay").height($(document).height()) }, _show: function(title, content, defaulevalue, type, callback) { $.alerts._hide(); $.alerts._overlay("show"); $("body").append(‘<div id="popup_container" style="display:none"><h1 id="popup_title"></h1><span id="popup_close"></span><div id="popup_content"><div id="popup_message"></div></div></div>‘); if ($.alerts.dialogClass) { $("#popup_container").addClass($.alerts.dialogClass) } var i = ($.browser.msie && parseInt($.browser.version) <= 6) ? "absolute" : "fixed"; $("#popup_container").css({ position: i, zIndex: 99999, padding: 0, margin: 0 }).show(); $("#popup_title").text(title); $("#popup_content").addClass(type); if (type != "openBox") { $("#popup_message").text(content).html($("#popup_message").text().replace(/\n/g, "<br />")) } $("#popup_container").css({}); $.alerts._reposition(); $.alerts._maintainPosition(true); switch (type) { case "alert": $("#popup_message").after(‘<div id="popup_panel"><input type="button" value="http://www.mamicode.com/‘ + $.alerts.okButton + ‘" id="popup_ok" /></div>‘); $("#popup_ok").click(function() { $.alerts._hide(); callback(true) }); $("#popup_ok").focus().keypress(function(h) { if (h.keyCode == 13 || h.keyCode == 27) { $("#popup_ok").trigger("click") } }); break; case "confirm": $("#popup_message").after(‘<div id="popup_panel"><input type="button" value="http://www.mamicode.com/‘ + $.alerts.okButton + ‘" id="popup_ok" /> <input type="button" value="http://www.mamicode.com/‘ + $.alerts.cancelButton + ‘" id="popup_cancel" /></div>‘); $("#popup_ok").click(function() { $.alerts._hide(); if (callback) { callback(true) } }); $("#popup_cancel").click(function() { $.alerts._hide(); if (callback) { callback(false) } }); $("#popup_ok").focus(); $("#popup_ok, #popup_cancel").keypress(function(h) { if (h.keyCode == 13) { $("#popup_ok").trigger("click") } if (h.keyCode == 27) { $("#popup_cancel").trigger("click") } }); break; case "prompt": $("#popup_message").append(‘<br /><input type="text" size="30" id="popup_prompt" />‘).after(‘<div id="popup_panel"><input type="button" value="http://www.mamicode.com/‘ + $.alerts.okButton + ‘" id="popup_ok" /> <input type="button" value="http://www.mamicode.com/‘ + $.alerts.cancelButton + ‘" id="popup_cancel" /></div>‘); $("#popup_prompt").width($("#popup_message").width() - 10); $("#popup_ok").click(function() { var inputValue = http://www.mamicode.com/$("#popup_prompt").val(); $.alerts._hide(); if (callback) { callback(inputValue) } }); $("#popup_cancel").click(function() { $.alerts._hide(); if (callback) { callback(null) } }); $("#popup_prompt, #popup_ok, #popup_cancel").keypress(function(h) { if (h.keyCode == 13) { $("#popup_ok").trigger("click") } if (h.keyCode == 27) { $("#popup_cancel").trigger("click") } }); if (defaulevalue) { $("#popup_prompt").val(defaulevalue) } $("#popup_prompt").focus().select(); break; } $("#popup_close").click(function() { $.alerts._hide(); if (callback) { callback() } }); if ($.alerts.draggable) { try { $("#popup_container").draggable({ handle: $("#popup_title") }); $("#popup_title").css({ cursor: "move" }) } catch (d) { } } }, _hide: function() { $("#popup_container").remove(); $.alerts._overlay("hide"); $.alerts._maintainPosition(false) }, _overlay: function(display) { switch (display) { case "show": $.alerts._overlay("hide"); $("BODY").append(‘<div id="popup_overlay"></div>‘); $("#popup_overlay").css({ position: "absolute", zIndex: 99998, top: "0px", left: "0px", width: "100%", height: $(document).height(), background: $.alerts.overlayColor, opacity: $.alerts.overlayOpacity }); break; case "hide": $("#popup_overlay").remove(); break } }, _reposition: function() { var top = (($(window).height() / 2) - ($("#popup_container").height() / 2)) + $.alerts.verticalOffset; var left = (($(window).width() / 2) - ($("#popup_container").width() / 2)) + $.alerts.horizontalOffset; if (top < 0) { top = 0 } if (left < 0) { left = 0 } if ($.browser.msie && parseInt($.browser.version) <= 6) { top = top + $(window).scrollTop() } $("#popup_container").css({ top: top + "px", left: left + "px" }); $("#popup_overlay").height($(document).height()) }, _maintainPosition: function(if_reposition) { if ($.alerts.repositionOnResize) { switch (if_reposition) { case true: $(window).bind("resize", $.alerts._reposition); break; case false: $(window).unbind("resize", $.alerts._reposition); break } } } }; hiAlert = function(content, title, callback) { $.alerts.alert(content, title, callback) }; hiConfirm = function(content, title, callback) { $.alerts.confirm(content, title, callback) }; hiPrompt = function(content, defaulevalue, title, callback) { $.alerts.prompt(content, defaulevalue, title, callback) }; hiOvershow = function(tips, seconds) { $.alerts.overShow(tips, seconds) } })(jQuery);
html页面中调用:
<body> <div id="main"> <div class="demo" id="a1"> 1、警告框 </div> <div class="demo" id="a2"> 2、确认框 </div> <div class="demo" id="a3"> 3、输入框 </div> <div class="demo" id="a5"> 4、提示条 </div> </body> </html> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.7.2.min.js"></script> <script type=‘text/javascript‘ src=http://www.mamicode.com/‘js/jquery-ui.min.js‘></script>"text/javascript" src="http://www.mamicode.com/js/jquery.alert.js"></script> <script type="text/javascript"> $(function(){ $("#a1").click(function(){ hiAlert("欢迎来到www.17sucai.com","提示"); }); $("#a2").click(function(){ hiConfirm(‘你确认此操作吗?‘, ‘确认框‘, function(r) { hiOvershow(‘你的反馈是: ‘ + r); }); }); $("#a3").click(function(){ hiPrompt(‘请填写:‘, ‘默认值‘, ‘输入框‘, function(r) { if( r ) hiOvershow(‘你填入的内容是"‘ + r+‘"‘); }); }); $("#a5").click(function(){ hiOvershow(‘操作提示条信息‘,1500); }); }); </script>
代码写的很好。学习下。源码会上传文件。
文件名是:自己修改的alert.rar
自定义插件学习-弹框2
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。