/*
* 使用说明:
* window.wxc.pop(pophtml, [type], [options])
* pophtml:html字符串
* type:window.wxc.xcconfirm.typeenum集合中的元素
* options:扩展对象
* 用法:
* 1. window.wxc.xcconfirm("我是弹窗lalala");
* 2. window.wxc.xcconfirm("成功","success");
* 3. window.wxc.xcconfirm("请输入","input",{onok:function(){}})
* 4. window.wxc.xcconfirm("自定义",{title:"自定义"})
*/
(function($){
window.wxc = window.wxc || {};
window.wxc.xcconfirm = function(pophtml, type, options) {
var btntype = window.wxc.xcconfirm.btnenum;
var eventtype = window.wxc.xcconfirm.eventenum;
var poptype = {
info: {
title: "信息",
icon: "0 0",//蓝色i
btn: btntype.ok
},
success: {
title: "成功",
icon: "0 -48px",//绿色对勾
btn: btntype.ok
},
error: {
title: "错误",
icon: "-48px -48px",//红色叉
btn: btntype.ok
},
confirm: {
title: "提示",
icon: "-48px 0",//黄色问号
btn: btntype.okcancel
},
warning: {
title: "警告",
icon: "0 -96px",//黄色叹号
btn: btntype.okcancel
},
input: {
title: "输入",
icon: "",
btn: btntype.ok
},
custom: {
title: "",
icon: "",
btn: btntype.ok
}
};
var itype = type ? type instanceof object ? type : poptype[type] || {} : {};//格式化输入的参数:弹窗类型
var config = $.extend(true, {
//属性
title: "", //自定义的标题
icon: "", //图标
btn: btntype.ok, //按钮,默认单按钮
//事件
onok: $.noop,//点击确定的按钮回调
oncancel: $.noop,//点击取消的按钮回调
onclose: $.noop//弹窗关闭的回调,返回触发事件
}, itype, options);
var $txt = $("
").html(pophtml);//弹窗文本dom
var $tt = $("").addclass("tt").text(config.title);//标题
var icon = config.icon;
var $icon = icon ? $("").addclass("bigicon").css("backgroundposition",icon) : "";
var btn = config.btn;//按钮组生成参数
var popid = creatpopid();//弹窗索引
var $box = $("
").addclass("xcconfirm");//弹窗插件容器
var $layer = $("
").addclass("xc_layer");//遮罩层
var $popbox = $("
").addclass("popbox");//弹窗盒子
var $ttbox = $("
").addclass("ttbox");//弹窗顶部区域
var $txtbox = $("
").addclass("txtbox");//弹窗内容主体区
var $btnarea = $("
").addclass("btnarea");//按钮区域
var $ok = $("
").addclass("sgbtn").addclass("ok").text("确定");//确定按钮
var $cancel = $("").addclass("sgbtn").addclass("cancel").text("取消");//取消按钮
var $input = $("").addclass("inputbox");//输入框
var $clsbtn = $("").addclass("clsbtn");//关闭按钮
//建立按钮映射关系
var btns = {
ok: $ok,
cancel: $cancel
};
init();
function init(){
//处理特殊类型input
if(poptype["input"] === itype){
$txt.append($input);
}
creatdom();
bind();
}
function creatdom(){
$popbox.append(
$ttbox.append(
$clsbtn
).append(
$tt
)
).append(
$txtbox.append($icon).append($txt)
).append(
$btnarea.append(creatbtngroup(btn))
);
$box.attr("id", popid).append($layer).append($popbox);
$("body").append($box);
}
function bind(){
//点击确认按钮
$ok.click(dook);
//回车键触发确认按钮事件
$(window).bind("keydown", function(e){
if(e.keycode == 13) {
if($("#" + popid).length == 1){
dook();
}
}
});
//点击取消按钮
$cancel.click(docancel);
//点击关闭按钮
$clsbtn.click(doclose);
}
//确认按钮事件
function dook(){
var $o = $(this);
var v = $.trim($input.val());
if ($input.is(":visible"))
config.onok(v);
else
config.onok();
$("#" + popid).remove();
config.onclose(eventtype.ok);
}
//取消按钮事件
function docancel(){
var $o = $(this);
config.oncancel();
$("#" + popid).remove();
config.onclose(eventtype.cancel);
}
//关闭按钮事件
function doclose(){
$("#" + popid).remove();
config.onclose(eventtype.close);
$(window).unbind("keydown");
}
//生成按钮组
function creatbtngroup(tp){
var $bgp = $("").addclass("btngroup");
$.each(btns, function(i, n){
if( btntype[i] == (tp & btntype[i]) ){
$bgp.append(n);
}
});
return $bgp;
}
//重生popid,防止id重复
function creatpopid(){
var i = "pop_" + (new date()).gettime()+parseint(math.random()*100000);//弹窗索引
if($("#" + i).length > 0){
return creatpopid();
}else{
return i;
}
}
};
//按钮类型
window.wxc.xcconfirm.btnenum = {
ok: parseint("0001",2), //确定按钮
cancel: parseint("0010",2), //取消按钮
okcancel: parseint("0011",2) //确定&&取消
};
//触发事件类型
window.wxc.xcconfirm.eventenum = {
ok: 1,
cancel: 2,
close: 3
};
//弹窗类型
window.wxc.xcconfirm.typeenum = {
info: "info",
success: "success",
error:"error",
confirm: "confirm",
warning: "warning",
input: "input",
custom: "custom"
};
})(jquery);