/* * 使用说明: * 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);