基于jquery ui的alert,confirm方案(支持换肤)


Posted in Javascript onApril 03, 2015

实现功能:

1.修改标题样式。把jquery ui的标题样式放上去。支持换肤。

2.修改按钮样式,换成jqueryui的button按钮样式。

3.将模式化窗口的背景换成了jqueryui的模式化背景。

代码:

//首先要引入jquery,以及ui的包和皮肤的样式如:
<script src="../js/ui/jquery-1.11.0.min.js"></script>
 <script src="../js/ui/jquery-migrate-1.1.0.min.js"></script>
 <script src="../js/ui/minified/jquery.ui.core.min.js"></script>
  <script src="../js/ui/minified/jquery.ui.widget.min.js"></script>
  <script src="../js/ui/minified/jquery.ui.mouse.min.js"></script>
  <script src="../js/ui/minified/jquery.ui.button.min.js"></script>
  <script src="../js/ui/minified/jquery.ui.draggable.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/ui/themes/humanity/jquery-ui.css"></link>
 
 
 
(function($) {
 
$.alerts = {
 
// These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
 
verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels
horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/
repositionOnResize: true, // re-centers the dialog on window resize
overlayOpacity: .01, // transparency level of overlay
overlayColor: '#FFF', // base color of overlay
draggable: true, // make the dialogs draggable (requires UI Draggables plugin)
okButton: ' 确认 ', // text for the OK button
cancelButton: ' 取消 ', // text for the Cancel button
dialogClass: null, // if specified, this class will be applied to all dialogs
 
// Public methods
 
alert: function(message, title, callback) {
if( title == null ) title = 'Alert';
$.alerts._show(title, message, null, 'alert', function(result) {
if( callback ) callback(result);
});
},
 
confirm: function(message, title, callback) {
if( title == null ) title = 'Confirm';
$.alerts._show(title, message, null, 'confirm', function(result) {
if( callback ) callback(result);
});
},
 
prompt: function(message, value, title, callback) {
if( title == null ) title = 'Prompt';
$.alerts._show(title, message, value, 'prompt', function(result) {
if( callback ) callback(result);
});
},
 
// Private methods
 
_show: function(title, msg, value, type, callback) {
 
$.alerts._hide();
$.alerts._overlay('show');
 
$("BODY").append(
'<div id="popup_container" style="width:300px;height:150px;">' +
'<h2 id="popup_title" style="margin:0;padding:0;" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"></h2>' +
'<div id="popup_content">' +
'<div id="popup_message"></div>' +
'</div>' +
'</div>');
 
if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);
 
// IE6 Fix
//var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed';
var pos = ('undefined' == typeof (document.body.style.maxHeight)) ? 'absolute' : 'fixed';
 
$("#popup_container").css({
position: pos,
zIndex: 99999,
padding: 0,
margin: 0
});
 
$("#popup_title").text(title);
$("#popup_content").addClass(type);
$("#popup_message").text(msg);
$("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') );
 
$("#popup_container").css({
minWidth: $("#popup_container").outerWidth(),
maxWidth: $("#popup_container").outerWidth()
});
 
$.alerts._reposition();
$.alerts._maintainPosition(true);
 
switch( type ) {
case 'alert':
$("#popup_message").after('<div id="popup_panel"><input type="button" onmouseover="$(this).addClass(\'ui-state-hover\')" onmouseout="$(this).removeClass(\'ui-state-hover\')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
$("#popup_ok").click( function() {
$.alerts._hide();
callback(true);
});
$("#popup_ok").focus().keypress( function(e) {
if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');
});
break;
case 'confirm':
$("#popup_message").after('<div id="popup_panel"><input type="button" onmouseover="$(this).addClass(\'ui-state-hover\')" onmouseout="$(this).removeClass(\'ui-state-hover\')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" onmouseover="$(this).addClass(\'ui-state-hover\')" onmouseout="$(this).removeClass(\'ui-state-hover\')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"  value="' + $.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(e) {
if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
if( e.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" onmouseover="$(this).addClass(\'ui-state-hover\')" onmouseout="$(this).removeClass(\'ui-state-hover\')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" onmouseover="$(this).addClass(\'ui-state-hover\')" onmouseout="$(this).removeClass(\'ui-state-hover\')" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"  value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
$("#popup_prompt").width( $("#popup_message").width() );
$("#popup_ok").click( function() {
var val = $("#popup_prompt").val();
$.alerts._hide();
if( callback ) callback( val );
});
$("#popup_cancel").click( function() {
$.alerts._hide();
if( callback ) callback( null );
});
$("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {
if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
});
if( value ) $("#popup_prompt").val(value);
$("#popup_prompt").focus().select();
break;
}
 
// Make draggable
if( $.alerts.draggable ) {
try {
$("#popup_container").draggable({ handle: $("#popup_title") });
$("#popup_title").css({ cursor: 'move' });
} catch(e) { /* requires jQuery UI draggables */ }
}
},
 
_hide: function() {
$("#popup_container").remove();
$.alerts._overlay('hide');
$.alerts._maintainPosition(false);
},
 
_overlay: function(status) {
switch( status ) {
case 'show':
$.alerts._overlay('hide');
$("BODY").append('<div class="ui-widget-overlay" id="popup_overlay"></div>');
break;
case 'hide':
$("#popup_overlay").remove();
break;
}
},
 
_reposition: function() {
var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
if( top < 0 ) top = 0;
if( left < 0 ) left = 0;
 
// IE6 fix
if ('undefined' == typeof (document.body.style.maxHeight)) top = top + $(window).scrollTop();
 
$("#popup_container").css({
top: top + 'px',
left: left + 'px'
});
},
 
_maintainPosition: function(status) {
if( $.alerts.repositionOnResize ) {
switch(status) {
case true:
$(window).bind('resize', function() {
$.alerts._reposition();
});
break;
case false:
$(window).unbind('resize');
break;
}
}
}
 
}
 
// Shortuct functions
jAlert = function(message, title, callback) {
$.alerts.alert(message, title, callback);
}
 
jConfirm = function(message, title, callback) {
$.alerts.confirm(message, title, callback);
};
 
jPrompt = function(message, value, title, callback) {
$.alerts.prompt(message, value, title, callback);
};
 
})(jQuery);
 
 
 
<style>
*{margin:0;padding:0;}
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 1px #D09042;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
 
 
#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
 
#popup_content.alert {
background-image: url(../images/info.png);
}
 
#popup_content.confirm {
background-image: url(../images/important.png);
}
 
#popup_content.prompt {
background-image: url(../images/help.png);
}
 
#popup_message {
padding-left: 48px;
height:30px;
padding-top:10px;
font-size:15px;
}
 
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
 
#popup_prompt {
margin: .5em 0em;
}
</style>
 
//使用方法
<script>
jConfirm('您确定吗?', '系统 提示', function(r) {
  jAlert('你选择了: ' + r, '友情提示');
});
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
详解JS数组方法
Nov 20 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 #Javascript
JavaScript替换当前页面的方法
Apr 03 #Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 #Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 #Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 #Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 #Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
pw的一个放后门的方法分析
2007/10/08 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
php集成开发环境详解
2019/09/24 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
全面理解Python中self的用法
2016/06/04 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python实现的购物车功能示例
2018/02/11 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
python 杀死自身进程的实现方法
2019/07/01 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python利用faker库批量生成测试数据
2020/10/15 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
邀请函的格式
2015/01/30 职场文书
2015年工会工作总结
2015/03/30 职场文书
雷锋的故事观后感
2015/06/10 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js