349 lines
12 KiB
JavaScript
349 lines
12 KiB
JavaScript
/**
|
||
|
||
姓名：冯宇
|
||
site: http://fy.035k.com
|
||
更新时间 ：2018-04-02
|
||
更新内容 ：添加actionsheet
|
||
QQ : 515184405
|
||
github : https://github.com/515184405/alert 还有一些其他的项目哦，欢迎star
|
||
|
||
**/
|
||
|
||
;(function(){
|
||
var zIndex = 1000;
|
||
var jqueryAlert = function(opts){
|
||
// 设置默认参数
|
||
var opt = {
|
||
'style' : 'wap', //移动端和PC端
|
||
'title' : '', //标题
|
||
'icon' : '',
|
||
'content' : '', //内容
|
||
'contentTextAlign' : 'center', //内容对齐方式
|
||
'width' : 'auto', //宽度
|
||
'height' : 'auto', //高度
|
||
'minWidth' : '0', //最小宽度
|
||
"className" : '', //添加类名
|
||
'position' : 'fixed', //定位方式
|
||
'animateType' : 'scale',
|
||
'modal' : false, //是否存在蒙层
|
||
'isModalClose' : false, //点击蒙层是否关闭
|
||
'bodyScroll' : false, //是否关闭body的滚动条
|
||
'closeTime' : 3000, //当没有按钮时关闭时间
|
||
'actionsheetCloseText' : '', //当当前样式为actionsheet时，关闭的文字按钮
|
||
"buttons" : {}, //按钮对象</pre>
|
||
"end" : function(){}
|
||
};
|
||
|
||
// 参数合并
|
||
var option = $.extend({},opt,opts);
|
||
|
||
var dialog = {
|
||
|
||
};
|
||
|
||
dialog.time = 450;//动画关闭时间
|
||
dialog.init = function(){
|
||
dialog.framework();
|
||
};
|
||
|
||
// 事件处理
|
||
function IsPC() {
|
||
var userAgentInfo = navigator.userAgent;
|
||
var Agents = ["Android", "iPhone",
|
||
"SymbianOS", "Windows Phone",
|
||
"iPad", "iPod"];
|
||
var flag = true;
|
||
for (var v = 0; v < Agents.length; v++) {
|
||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||
flag = false;
|
||
break;
|
||
}
|
||
}
|
||
return flag;
|
||
}
|
||
var isHaveTouch = IsPC();
|
||
if(isHaveTouch){
|
||
dialog.event = 'click';
|
||
}else{
|
||
dialog.event = 'touchstart';
|
||
}
|
||
|
||
var $modal = $("<div class='alert-modal none'>");
|
||
var $container = $("<div class='alert-container animated'>");
|
||
var $title = $("<div class='alert-title'>"+option.title+"</div>");
|
||
var $content = $("<div class='alert-content'>");
|
||
var $buttonBox = $("<div class='alert-btn-box'>");
|
||
var $closeBtn = $("<div class='alert-btn-close'>×</div>");
|
||
var $actionsheetCloseBtn = $("<p class='alert-btn-p alert-btn-sheet'>"+ option.actionsheetCloseText +"</p>");
|
||
|
||
if(!!option.content[0] && (1 == option.content[0].nodeType)){
|
||
var $newContent = option.content.clone();
|
||
$content.append($newContent)
|
||
}else{
|
||
$content.html(option.content);
|
||
}
|
||
|
||
dialog.framework = function(){
|
||
|
||
dialog.buttons = [];
|
||
for(var key in option.buttons){
|
||
dialog.buttons.push(key);
|
||
}
|
||
dialog.buttonsLength = dialog.buttons.length;
|
||
|
||
option.style == 'actionsheet' ? $container.append($title) : $container.append($title) .append($content);
|
||
|
||
if(option.style == 'pc'){
|
||
$container.append($closeBtn).addClass('pcAlert');
|
||
}
|
||
|
||
if(option.style == 'actionsheet'){
|
||
$container.addClass('alert-actionsheet');
|
||
}
|
||
|
||
|
||
if(option.modal || option.modal == 'true'){
|
||
$('body').append($modal);
|
||
$modal.fadeIn(dialog.time);
|
||
option.bodyScroll && $('body').css('overflow','hidden');
|
||
}
|
||
$('body').append($container);
|
||
|
||
// 设置内容的对齐方式
|
||
$content.css({
|
||
'text-align' : option.contentTextAlign
|
||
});
|
||
|
||
if(parseInt(option.minWidth) > parseInt($container.css('width'))){
|
||
option.width = option.minWidth;
|
||
}
|
||
|
||
$modal.css('position',option.position);
|
||
$modal.css('z-index',zIndex);
|
||
|
||
++zIndex;
|
||
|
||
if(option.position == 'fixed'){
|
||
$container.css({
|
||
'position' : option.position,
|
||
'left' : '50%',
|
||
'top' : '45%',
|
||
'z-index' : zIndex
|
||
});
|
||
}
|
||
if(option.position == 'absolute'){
|
||
$container.css({
|
||
'position' : option.position,
|
||
'left' : $(window).width()/2,
|
||
'top' : $(window).height()/2 + $(window).scrollTop(),
|
||
'z-index' : zIndex
|
||
});
|
||
}
|
||
|
||
$container.css('width',option.width);
|
||
$container.css('height',option.height);
|
||
|
||
if(option.width == 'auto'){
|
||
$container.css('width',$container[0].clientWidth + 10);
|
||
}
|
||
|
||
if(parseInt($(window).height()) <= parseInt($container.css('height'))){
|
||
$container.css('height',$(window).height());
|
||
}
|
||
|
||
// 设置class
|
||
(!!option.className) && $container.addClass(option.className);
|
||
|
||
// 设置button内容
|
||
var indexs = 0;
|
||
for(var key in option.buttons){
|
||
indexs++;
|
||
var $button = $("<p class='alert-btn-p alert-btn-p"+indexs+"'>"+ key +"</p>");
|
||
if(option.style == 'wap'){
|
||
$button.css({
|
||
'width' : Math.floor(($container[0].clientWidth) / dialog.buttonsLength),
|
||
})
|
||
}
|
||
//绑定点击后的事件
|
||
$button.bind(dialog.event,option.buttons[key]);
|
||
$buttonBox.append($button);
|
||
|
||
}
|
||
|
||
if(dialog.buttonsLength > 0){
|
||
$container.append($buttonBox);
|
||
$content.css('padding-bottom','46px');
|
||
//处理IE下滚动条的问题
|
||
if (window.navigator.userAgent.indexOf("MSIE")>=1) {
|
||
if($content[0].scrollHeight > $content[0].clientHeight){
|
||
$content.css('height',parseInt($content.css('height')) - 46 );
|
||
}
|
||
}
|
||
}
|
||
|
||
if(option.title != ''){
|
||
$content.css('padding-top','42px');
|
||
}
|
||
|
||
if(dialog.buttonsLength <= 0 && option.title == ''){
|
||
$container.addClass('alert-container-black');
|
||
if(!!option.icon){
|
||
var img = new Image();
|
||
img.onload = function(){
|
||
$content.before(img);
|
||
};
|
||
img.src = option.icon;
|
||
$(img).css({
|
||
'width':'45px',
|
||
'height' : 'auto',
|
||
'display':'block',
|
||
'margin' : '10px auto 0 auto'
|
||
});
|
||
$content.css({
|
||
'padding-top' : '5px'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 设置定位
|
||
$container.css({
|
||
'margin-left' : -parseInt($container.css('width'))/2,
|
||
'margin-top' : -parseInt($container.css('height'))/2,
|
||
});
|
||
|
||
if( option.style == 'actionsheet' ){
|
||
$container.css({
|
||
'position' : 'fixed',
|
||
'left' : 0,
|
||
'top' : 'auto',
|
||
'bottom' : '-100%',
|
||
'z-index' : zIndex,
|
||
'margin' : 0,
|
||
'width' : '100%',
|
||
'height' : 'auto'
|
||
});
|
||
$container.animate({
|
||
'bottom' : '0'
|
||
},dialog.time);
|
||
|
||
}
|
||
|
||
if(option.style != 'actionsheet' && option.animateType == 'scale'){
|
||
$container.addClass('bounceIn');
|
||
}
|
||
|
||
if(option.style != 'actionsheet' && option.animateType == 'linear'){
|
||
$container.addClass('linearTop');
|
||
}
|
||
|
||
if(option.actionsheetCloseText){
|
||
$buttonBox.append($actionsheetCloseBtn);
|
||
$(document).delegate('.alert-btn-sheet,.alert-modal','click',function(){
|
||
dialog.close();
|
||
})
|
||
|
||
}
|
||
|
||
isSelfClose();
|
||
|
||
};
|
||
|
||
// 判断是否满足自动关闭的条件
|
||
function isSelfClose(){
|
||
if(dialog.buttonsLength <= 0 && option.style == 'wap'){
|
||
setTimeout(function(){
|
||
$container.fadeOut(dialog.time);
|
||
$modal.fadeOut(dialog.time);
|
||
option.bodyScroll && $('body').css('overflow','auto');
|
||
!!option.end && (typeof(option.end) == 'function' ? option.end() : console.warn('弹框关闭后的回调函数是个FUNCTION'));
|
||
},option.closeTime)
|
||
}
|
||
}
|
||
|
||
dialog.toggleAnimate = function(){
|
||
if(option.style != 'actionsheet'){
|
||
if(option.animateType == 'scale'){
|
||
return $container.removeClass('bounceIn').addClass('bounceOut');
|
||
}else if(option.animateType == 'linear'){
|
||
return $container.removeClass('linearTop').addClass('linearBottom');
|
||
}else{
|
||
return $container;
|
||
};
|
||
}else{
|
||
return $container.animate({
|
||
'bottom' : '-100%'
|
||
},dialog.time);
|
||
}
|
||
};
|
||
|
||
dialog.close = function(){
|
||
dialog.toggleAnimate().fadeOut(dialog.time);
|
||
$modal.fadeOut(dialog.time);
|
||
option.bodyScroll && $('body').css('overflow','auto');
|
||
!!option.end && (typeof(option.end) == 'function' ? option.end() : console.warn('弹框关闭后的回调函数是个FUNCTION'));
|
||
|
||
};
|
||
|
||
option.style == 'pc' && $closeBtn.bind(dialog.event,dialog.close);
|
||
option.isModalClose && $modal.bind(dialog.event,dialog.close);
|
||
|
||
dialog.destroy = function(){
|
||
dialog.toggleAnimate().fadeOut(dialog.time);
|
||
setTimeout(function(){
|
||
$container.remove();
|
||
$modal.remove();
|
||
option.bodyScroll && $('body').css('overflow','auto');
|
||
},dialog.time)
|
||
};
|
||
dialog.show = function(){
|
||
|
||
$modal.css('z-index',zIndex);
|
||
|
||
++zIndex;
|
||
|
||
$container.css({
|
||
'z-index' : zIndex
|
||
});
|
||
if( option.style != 'actionsheet' ){
|
||
if(option.animateType == 'scale'){
|
||
$container.fadeIn(dialog.time).removeClass('bounceOut').addClass('bounceIn');
|
||
}else if(option.animateType == 'linear'){
|
||
$container.fadeIn(dialog.time).removeClass('linearBottom').addClass('linearTop');
|
||
}else{
|
||
$container.fadeIn(dialog.time);
|
||
}
|
||
|
||
if(option.position == 'absolute'){
|
||
$container.css({
|
||
'top' : $(window).height()/2 + $(window).scrollTop(),
|
||
})
|
||
}
|
||
}else{
|
||
$container.fadeIn(0).animate({
|
||
'bottom' : '0'
|
||
},dialog.time);
|
||
|
||
}
|
||
|
||
$modal.fadeIn(dialog.time);
|
||
option.bodyScroll && option.modal && $('body').css('overflow','hidden');
|
||
isSelfClose();
|
||
};
|
||
|
||
dialog.init();
|
||
console.log(dialog);
|
||
return dialog
|
||
|
||
};
|
||
if (typeof module !== 'undefined' && typeof exports === 'object') {
|
||
module.exports = jqueryAlert;
|
||
} else if (typeof define === 'function' && (define.amd || define.cmd)) {
|
||
define(function() {
|
||
return jqueryAlert;
|
||
});
|
||
} else {
|
||
this.jqueryAlert = jqueryAlert;
|
||
}
|
||
}).call(function() {
|
||
return this || (typeof window !== 'undefined' ? window : global);
|
||
}()); |