// 定义confirm类
|
function Confirm() {
|
this.confirm = $('.myconfirm');
|
this.confirmMask = $('.confirm-mask');
|
this.confirm.draggable(); // 可以拖动依赖jqueryui
|
this.create();
|
}
|
|
// 创建Confirm
|
Confirm.prototype.create = function() {
|
var confirmCont = $('<div class="myconfirm"></div>'); // confirm容器
|
var confirmHd = $('<div class="confirm-header"></div>'); //confirm的头部
|
var confirmContent = $('<div class="confirm-content"></div>'); // confirm的内容
|
var confirmFo = $('<div class="confirm-footer"></div>'); // confirm的底部
|
var confirmMask = $('<div class="confirm-mask"></div>'); // confirm的遮罩层
|
|
/* 定义头部 */
|
confirmHd.append($('<div class="title">系统提示</div>'));
|
confirmHd.append($('<div class="close-confirm" onclick="myConfirm.hide();"></div>'));
|
|
/* 定义底部 */
|
confirmFo.append($('<div class="ipt"><input type="button" name="" value="确定" id="confirmEnsure"></div>'));
|
confirmFo.append($('<div class="ipt"><input type="button" name="" value="取消" class="close" onclick="myConfirm.hide();"></div>'));
|
confirmCont.append(confirmHd);
|
confirmCont.append(confirmContent);
|
confirmCont.append(confirmFo);
|
$('body').append(confirmCont);
|
$('body').append(confirmMask);
|
|
this.confirm = $('.myconfirm');
|
this.confirmMask = $('.confirm-mask');
|
this.center(); // 自动执行居中操作
|
};
|
|
// 使Confirm处在屏幕的中间
|
Confirm.prototype.center = function() {
|
var wid = this.confirm.width();
|
var ht = this.confirm.height();
|
var winHt = $(window).height();
|
this.confirm.css({
|
top: (winHt-300)/2+'px'
|
});
|
this.confirm.draggable(); // 依赖于jquery-ui.js
|
};
|
// 显示Confirm
|
Confirm.prototype.show = function(options) {
|
var defaults = {
|
title: '系统提示',
|
content: '是否确认操作',
|
type: 'confirm',
|
class: 'none',
|
value: '确定',
|
timeout: 1500,
|
enfun: '',
|
enparams: [],
|
enhide: true,
|
setContent: false,
|
fadeout: false
|
};
|
var obj = $.extend(true, {}, defaults, options || {});
|
//console.info(obj.type);
|
// 判断是否是confirm
|
if(obj.type == 'alert') {
|
this.confirm.find('.confirm-footer').hide();
|
}else {
|
this.confirm.find('.confirm-footer').show();
|
}
|
this.confirm.find('.confirm-header .title').text(obj.title);
|
// 设置内容
|
if(obj.setContent) {
|
this.confirm.find('.confirm-content').addClass('confirm-content-noPadding');
|
}else {
|
this.confirm.find('.confirm-content').removeClass('confirm-content-noPadding');
|
}
|
|
this.confirm.find('.confirm-content').html(obj.content);
|
if(typeof options.enfun == 'function') {
|
$('#confirmEnsure').removeClass().addClass('no-class');
|
}else {
|
$('#confirmEnsure').removeClass().addClass(obj.class).val(obj.value);
|
}
|
// 显示confirm为淡入
|
this.confirm.fadeIn();
|
this.confirmMask.fadeIn();
|
this.confirmMask.addClass('tmp-style');
|
|
if(obj.fadeout && obj.type=='alert') {
|
setTimeout(function() {
|
this.hide();
|
}.bind(this), obj.timeout);
|
}
|
|
// 添加确认事件
|
this.ensure(obj);
|
/*this.confirm.effect('slide',{},500);
|
this.confirmMask.effect('slide',{},500);*/
|
};
|
// 隐藏Confirm
|
Confirm.prototype.hide = function() {
|
// 隐藏confirm为淡出
|
this.confirm.fadeOut();
|
this.confirmMask.fadeOut();
|
this.confirmMask.removeClass('tmp-style');
|
};
|
|
// 给确认按钮添加点击事件
|
Confirm.prototype.ensure = function(options) {
|
//console.info(typeof options.enfun)
|
// 存在确认事件
|
if(typeof options.enfun == 'function') {
|
var _this = this;
|
// 给确认按钮添加事件
|
$('#confirmEnsure').off('click.confirm.data-api').on('click.confirm.data-api', function() {
|
if(options.enhide) {
|
_this.hide();
|
}
|
options.enfun.apply({}, options.enparams);
|
});
|
}
|
};
|
|
var myConfirm = new Confirm(); // 实例化Confirm
|
// 屏幕可视高度改变Confirm的位置跟随改变
|
$(window).resize(function() {
|
myConfirm.center();
|
});
|
$(function() {
|
//console.info(myConfirm);
|
});
|
