/** +------------------------------------------------------------------- * jQuery thinkbox - 弹出层插件 - http://zjzit.cn/thinkbox +------------------------------------------------------------------- * @version 1.0.0 beta2 * @since 2013.05.10 * @author 麦当苗儿 * @github https://github.com/Aoiujz/thinkbox.git +------------------------------------------------------------------- */ (function($){ var /* 当前脚本文件名 */ __FILE__ = $("script").last().attr("src"), /* 弹出层对象 */ ThinkBox, /* 弹出层默认选项 */ defaults = { "style" : "default", //弹出层样式 "title" : null, // 弹出层标题 "fixed" : true, // 是否使用固定定位(fixed)而不是绝对定位(absolute),IE6不支持。 "center" : true, // 弹出层是否屏幕中心显示 "display" : true, // 创建后是否立即显示 "x" : 0, // 弹出层 x 坐标。 当 center 属性为 true 时此属性无效 "y" : 0, // 弹出层 y 坐标。 当 center 属性为 true 时此属性无效 "modal" : true, // 弹出层是否设置为模态。设置为 true 将显示遮罩背景 "modalClose" : true, // 点击模态背景是否关闭弹出层 "resize" : true, // 是否在窗口大小改变时重新定位弹出层位置 "unload" : false, // 关闭后是否卸载 "escHide" : true, // 按ESC是否关闭弹出层 "delayClose" : 0, // 延时自动关闭弹出层 0表示不自动关闭 "drag" : false, // 点击标题框是否允许拖动 "width" : "", // 弹出层内容区域宽度 空表示自适应 "height" : "", // 弹出层内容区域高度 空表示自适应 "dataEle" : "", // 弹出层绑定到的元素,设置此属性的弹出层只允许同时存在一个 "locate" : ["left", "top"], //弹出层位置属性 "show" : ["fadeIn", "normal"], //显示效果 "hide" : ["fadeOut", "normal"], //关闭效果 "actions" : ["minimize", "maximize", "close"], //窗口操作按钮 "tools" : false, //是否创建工具栏 "buttons" : {}, //工具栏默认按钮 仅tools为true时有效 "beforeShow" : $.noop, //显示前的回调方法 "afterShow" : $.noop, //显示后的回调方法 "afterHide" : $.noop, //隐藏后的回调方法 "beforeUnload": $.noop, //卸载前的回调方法 "afterDrag" : $.noop //拖动停止后的回调方法 }, /* 弹出层层叠高度 */ zIndex = 2013, /* 弹出层语言包 */ lang = {}, /* 弹出层列表 */ lists = {}, /* 弹出层容器 */ wrapper = [ "
", //使用表格,可以做到良好的宽高自适应,而且方便低版本浏览器做圆角样式 "", "", "", //左上角 "", //上边 "", //右上角 "", "", "", //左边 "", "", //右边 "", "", "", //左下角 "", //下边 "", //右下角 "", "
", //弹出层inner "
", //弹出层标题栏 "
", //弹出层body "
", //弹出层工具栏 "
", "
"].join(""), /* document和window对象分别对应的jQuery对象 */ _doc = $(document), _win = $(window); /* 加载指定的CSS文件 */ function includeCss(css, onload){ var path = __FILE__.slice(0, __FILE__.lastIndexOf("/")); if($("link[href='" + path + css + "']").length){ fire(onload); return; }; //加载CSS文件 $("") .load(function(){fire(onload)}) .attr({ "href" : path + css + "?" + Math.random(), "type" : "text/css", "rel" : "stylesheet" }).appendTo("head"); } /* 获取屏幕可视区域的大小和位置 */ function viewport(){ return { "width" : _win.width(), "height" : _win.height(), "left" : _win.scrollLeft(), "top" : _win.scrollTop() }; } /* 调用回调函数 */ function fire(event, data){ if($.isFunction(event)) return event.call(this, data); } /* 删除options中不必要的参数 */ function del(keys, options){ if($.isArray(keys)){ //删除多个 for(i in keys){ _(keys[i]); } } else { //删除一个 _(keys); } //从options中删除一个指定的元素 function _(key){ if(key in options) delete options[key]; } } /* 禁止选中文字 */ function unselect(){ var element = $("body")[0]; element.onselectstart = function() {return false}; //ie element.unselectable = "on"; // ie element.style.MozUserSelect = "none"; // firefox element.style.WebkitUserSelect = "none"; // chrome } /* 允许选中文字 */ function onselect(){ var element = $("body")[0]; element.onselectstart = function() {return true}; //ie element.unselectable = "off"; // ie element.style.MozUserSelect = ""; // firefox element.style.WebkitUserSelect = ""; // chrome } /* 设置为当前选中的弹出层对象 */ function setCurrent(){ var options = lists[this.key][0], box = lists[this.key][1]; if(lists.current != this.key){ lists.current = this.key; options.modal && box.data("ThinkBoxModal").css({"zIndex": zIndex-1}) box.css({"zIndex": zIndex++}); } } /* 卸载弹出层容器 */ function unload(){ var options = lists[this.key][0], box = lists[this.key][1]; fire.call(this, options.beforeUnload); //卸载前的回调方法 options.modal && box.data("ThinkBoxModal").remove(); box.remove(); _win.off("resize." + this.key); delete lists[this.key]; options.dataEle && $(options.dataEle).removeData("ThinkBox"); } /* 安装模态背景 */ function setupModal(){ var self = this, options = lists[this.key][0], box = lists[this.key][1], modal = box.data("ThinkBoxModal"); //存在隐藏的遮罩层则直接显示 if(modal){ modal.show(); return; } modal = $("
") .css({ "zIndex" : zIndex++, "position" : "fixed", "left" : 0, "top" : 0, "right" : 0, "bottom" : 0 }) .click(function(event){ options.modalClose && lists.current == self.key && self.hide(); event.stopPropagation(); }) .mousedown(function(event){event.stopPropagation()}) .appendTo($("body")); box.data("ThinkBoxModal", modal); } /* 安装标题栏 */ function setupTitleBar() { var title = $(".thinkbox-title", lists[this.key][1]), options = lists[this.key][0]; if(options.title){ //拖动弹出层 if (options.drag) { title.addClass("thinkbox-draging"); drag.call(this, title); } this.setTitle(options.title); //安装窗口操作按钮 setupWindowActions.call(this, title); } else { title.remove(); } } /* 安装弹出层操作按钮 */ function setupWindowActions(title){ var actions, button, action, options = lists[this.key][0], self = this; if(options.actions && $.isArray(options.actions)){ actions = $("
").addClass("thinkbox-window-actions").appendTo(title) .on("click", "button", function(){ if(!$(this).hasClass("disabled")){ switch(this.name){ case "minimize": //最小化 self.minimize(this); break; case "maximize": //最大化 self.maximize(this); break; case "close": //关闭 self.hide(); break; } } }) .on("mousedown mouseup", function(event){event.stopPropagation()}); for(i in options.actions){ button = options.actions[i]; action = $("