基于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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
js 匿名调用实现代码
Jun 19 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue观察模式浅析
Sep 25 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
react实现antd线上主题动态切换功能
Aug 12 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
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php之Memcache学习笔记
2013/06/17 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php筛选不存在的图片资源
2015/04/28 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP使用函数用法详解
2018/09/30 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
JavaScript WeakMap使用详解
2021/02/05 Javascript
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python实现canny边缘检测
2020/09/14 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
员工考核管理制度
2014/02/02 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
节能环保标语
2014/06/12 职场文书
欢迎领导标语
2014/06/27 职场文书
政风行风建设责任书
2014/07/23 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python