123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857 |
- (function($){
- var
-
- __FILE__ = $("script").last().attr("src"),
-
- ThinkBox,
-
- defaults = {
- "style" : "default",
- "title" : null,
- "fixed" : true,
- "center" : true,
- "display" : true,
- "x" : 0,
- "y" : 0,
- "modal" : true,
- "modalClose" : true,
- "resize" : true,
- "unload" : false,
- "escHide" : true,
- "delayClose" : 0,
- "drag" : false,
- "width" : "",
- "height" : "",
- "dataEle" : "",
- "locate" : ["left", "top"],
- "show" : ["fadeIn", "normal"],
- "hide" : ["fadeOut", "normal"],
- "actions" : ["minimize", "maximize", "close"],
- "tools" : false,
- "buttons" : {},
- "beforeShow" : $.noop,
- "afterShow" : $.noop,
- "afterHide" : $.noop,
- "beforeUnload": $.noop,
- "afterDrag" : $.noop
- },
-
- zIndex = 2013,
-
- lang = {},
-
- lists = {},
-
- wrapper = [
- "<div class=\"thinkbox\" style=\"position:fixed\">",
-
- "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">",
- "<tr>",
- "<td class=\"thinkbox-top-left\"></td>",
- "<td class=\"thinkbox-top\"></td>",
- "<td class=\"thinkbox-top-right\"></td>",
- "</tr>",
- "<tr>",
- "<td class=\"thinkbox-left\"></td>",
- "<td class=\"thinkbox-inner\">",
- "<div class=\"thinkbox-title\"></div>",
- "<div class=\"thinkbox-body\"></div>",
- "<div class=\"thinkbox-tools\"></div>",
- "</td>",
- "<td class=\"thinkbox-right\"></td>",
- "</tr>",
- "<tr>",
- "<td class=\"thinkbox-bottom-left\"></td>",
- "<td class=\"thinkbox-bottom\"></td>",
- "<td class=\"thinkbox-bottom-right\"></td>",
- "</tr>",
- "</table>",
- "</div>"].join(""),
-
- _doc = $(document), _win = $(window);
- function includeCss(css, onload){
- var path = __FILE__.slice(0, __FILE__.lastIndexOf("/"));
- if($("link[href='" + path + css + "']").length){
- fire(onload);
- return;
- };
-
- $("<link/>")
- .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);
- }
- function del(keys, options){
- if($.isArray(keys)){
- for(i in keys){
- _(keys[i]);
- }
- } else {
- _(keys);
- }
-
- function _(key){
- if(key in options) delete options[key];
- }
- }
- function unselect(){
- var element = $("body")[0];
- element.onselectstart = function() {return false};
- element.unselectable = "on";
- element.style.MozUserSelect = "none";
- element.style.WebkitUserSelect = "none";
- }
- function onselect(){
- var element = $("body")[0];
- element.onselectstart = function() {return true};
- element.unselectable = "off";
- element.style.MozUserSelect = "";
- element.style.WebkitUserSelect = "";
- }
- 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 = $("<div class=\"thinkbox-modal-blackout-" + options.style + "\"></div>")
- .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 = $("<div/>").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 = $("<button/>").appendTo(actions).addClass("thinkbox-actions-" + button)
- .attr("name", button)
- .attr("title", button)
- .text(lang[button] || button);
- }
- }
- }
- function drag(title){
- var draging = null, self = this, options = lists[this.key][0], box = lists[this.key][1];
- _doc.mousemove(function(event){
- draging &&
- box.css({left: event.pageX - draging[0], top: event.pageY - draging[1]});
- });
- title.mousedown(function(event) {
- var offset = box.offset();
- if(options.fixed){
- offset.left -= _win.scrollLeft();
- offset.top -= _win.scrollTop();
- }
- unselect();
- draging = [event.pageX - offset.left, event.pageY - offset.top];
- }).mouseup(function() {
- draging = null;
- onselect();
- fire.call(self, options.afterDrag);
- });
- }
- function setupToolsBar() {
- var tools = $(".thinkbox-tools", lists[this.key][1]),
- options = lists[this.key][0], button, self = this;
- if(options.tools){
- if(options.buttons && $.isPlainObject(options.buttons)){
- for(name in options.buttons){
- this.addToolsButton(name, options.buttons[name]);
- }
-
- tools.on("click", "button", function(){
- if(!$(this).hasClass("disabled")){
- if(false === options.buttons[this.name][2].call(self)){
- return;
- }
-
- switch(this.name){
- case "close":
- case "cancel":
- self.hide(false);
- break;
- case "submit":
- self.find("form").submit();
- break;
- }
- }
- });
- }
- } else {
- tools.remove();
- }
- }
- ThinkBox = function(element, options){
- var self = this, options, box, boxLeft;
- options = $.extend({}, defaults, options || {});
-
- box = $(wrapper).addClass("thinkbox-" + options.style).data("thinkbox", self);
-
- this.key = "thinkbox_" + new Date().getTime() + (Math.random() + "").substr(2,12);
- lists[this.key] = [options, box];
-
- options.dataEle && $(options.dataEle).data("thinkbox", self);
-
- box.on("click mousedown", function(event){
- setCurrent.call(self);
- event.stopPropagation();
- });
-
- options.fixed || box.css("position", "absolute");
-
- setupTitleBar.call(self);
- setupToolsBar.call(self);
-
- includeCss("/skin/" + options.style + "/style.css", function(){
- box.hide().appendTo("body");
-
- boxLeft = $(".thinkbox-left", box).width();
- boxLeft && $(".thinkbox-left", box).append($("<div/>").css("width", boxLeft));
- self.setSize(options.width, options.height);
- self.setContent(element || "<div></div>");
- options.display && self.show();
- });
- };
- ThinkBox.prototype = {
-
- "show" : function(){
- var self = this, options = lists[this.key][0], box = lists[this.key][1];
- if(box.is(":visible")) return this;
- options.modal && setupModal.call(this);
- fire.call(this, options.beforeShow);
-
- switch(options.show[0]){
- case "slideDown":
- box.stop(true, true).slideDown(options.show[1], _);
- break;
- case "fadeIn":
- box.stop(true, true).fadeIn(options.show[1], _);
- break;
- default:
- box.show(options.show[1], _);
- }
-
- options.resize && _win.on("resize." + self.key, function(){
- self.setSize(options.width, options.height);
- self.resetLocate();
- });
- setCurrent.call(this);
- return this;
- function _(){
- options.delayClose &&
- $.isNumeric(options.delayClose) &&
- setTimeout(function(){
- self.hide();
- }, options.delayClose);
-
- fire.call(self, options.afterShow);
- }
- },
-
- "hide" : function(data){
- var self = this, options = lists[this.key][0], box = lists[this.key][1], modal;
- if(!box.is(":visible")) return this;
-
- modal = box.data("ThinkBoxModal");
- modal && modal.fadeOut();
-
- switch(options.hide[0]){
- case "slideUp":
- box.stop(true, true).slideUp(options.hide[1], _);
- break;
- case "fadeOut":
- box.stop(true, true).fadeOut(options.hide[1], _);
- break;
- default:
- box.hide(options.hide[1], _);
- }
- return this;
- function _() {
- fire.call(self, options.afterHide, data);
- options.unload && unload.call(self);
- }
- },
-
- "toggle" : function(){
- return lists[this.key][1].is(":visible") ? self.hide() : self.show();
- },
-
- "find" : function(selector){
- var content = $(".thinkbox-body", lists[this.key][1]);
- return selector ? $(selector, content) : content.children();
- },
-
- "getContent" : function(){
- return $(".thinkbox-body", lists[this.key][1]).html()
- },
-
- "setContent" : function(content){
- var options = lists[this.key][0];
- $(".thinkbox-body", lists[this.key][1]).empty().append($(content).show());
- this.resetLocate();
- return this;
- },
-
- "setSize" : function(width, height){
- var width = $.isFunction(width) ? width.call(this) : width,
- height = $.isFunction(height) ? height.call(this) : height;
- $(".thinkbox-body", lists[this.key][1]).css({"width" : width, "height" : height});
- return this;
- },
-
- "moveToCenter" : function() {
- var size = this.getSize(),
- view = viewport(),
- overflow = lists[this.key][1].css("position") == "fixed" ? [0, 0] : [view.left, view.top],
- x = overflow[0] + view.width / 2,
- y = overflow[1] + view.height / 2;
- this.moveTo(x - size[0] / 2, y - size[1] / 2);
- return this;
- },
-
- "moveTo" : function (x, y) {
- var box = lists[this.key][1], options = lists[this.key][0];
- $.isNumeric(x) &&
- (options.locate[0] == "left" ? box.css({"left" : x}) : box.css({"right" : x}));
- $.isNumeric(y) &&
- (options.locate[1] == "top" ? box.css({"top" : y}) : box.css({"bottom" : y}));
- return this;
- },
-
- "getSize" : function (){
- var size = [0, 0], box = lists[this.key][1];
- if(box.is(":visible"))
- size = [box.width(), box.height()];
- else {
- box.css({"visibility" : "hidden", "display" : "block"});
- size = [box.width(), box.height()];
- box.css({"visibility" : "visible", "display" : "none"});
- }
- return size;
- },
-
- "setTitle" : function(title){
- $(".thinkbox-title", lists[this.key][1]).empty().append("<span>" + title + "</span>");
- return this;
- },
-
- "resetLocate" : function(){
- var options = lists[this.key][0];
- options.center ?
- this.moveToCenter() :
- this.moveTo(
- $.isNumeric(options.x) ?
- options.x :
- ($.isFunction(options.x) ? options.x.call($(options.dataEle)) : 0),
- $.isNumeric(options.y) ?
- options.y :
- ($.isFunction(options.y) ? options.y.call($(options.dataEle)) : 0)
- );
- return this;
- },
-
- "setStatus" : function(content, name){
- var options = lists[this.key][0],
- box = lists[this.key][1],
- name = name ? "thinkbox-status-" + name : "", status;
-
- if(options.tools){
- $(".thinkbox-status", box).remove();
- status = $("<div class=\"thinkbox-status\">").addClass(name).html(content);
- $(".thinkbox-tools", box).prepend(status);
- }
- return this;
- },
-
- "addToolsButton" : function(name, config){
- var options = lists[this.key][0],
- box = lists[this.key][1], button;
-
- if(options.tools){
- button = $("<button/>").attr("name", name).text(config[0]);
- config[1] && button.addClass("thinkbox-button-" + config[1]);
- if(!$.isFunction(config[2])){config[2] = $.noop};
- $(".thinkbox-tools", box).append(button);
- }
- return this;
- },
-
- "setToolsButton" : function(oldName, newName, config){
- var options = lists[this.key][0],
- box = lists[this.key][1], button;
- button = $(".thinkbox-tools", box).find("button[name=" + oldName + "]", box)
- .attr("name", newName).text(config[0]);
- options.buttons[newName] = config;
- config[1] && button.removeClass().addClass("thinkbox-button-" + config[1]);
- if(!$.isFunction(config[2])){config[2] = $.noop};
- return this;
- },
-
- "removeToolsButton" : function(name){
- $(".thinkbox-tools", lists[this.key][1]).find("button[name='" + name + "']").remove();
- return this;
- },
-
- "disableToolsButton" : function(name){
- $(".thinkbox-tools", lists[this.key][1]).find("button[name='" + name + "']")
- .addClass("disabled").attr("disabled", "disabled");
- return this;
- },
-
- "enableToolsButton" : function(name){
- $(".thinkbox-tools", lists[this.key][1]).find("button[name='" + name + "']")
- .removeClass("disabled").removeAttr("disabled", "disabled");
- return this;
- },
-
- "minimize" : function(){
- return this;
- },
-
- "maximize" : function(){
- return this;
- }
- }
- _doc.mousedown(function(){lists.current = null})
- .keydown(function(event){
- lists.current
- && lists[lists.current][0].escHide
- && event.keyCode == 27
- && lists[lists.current][1].data("thinkbox").hide();
- });
- $.thinkbox = function(element, options){
- if($.isPlainObject(options) && options.dataEle){
- var data = $(options.dataEle).data("thinkbox");
- if(data) return options.display === false ? data : data.show();
- }
- return new ThinkBox(element, options);
- }
- $.extend($.thinkbox, {
-
- "defaults" : function(name, value){
- if($.isPlainObject(name)){
- $.extend(defaults, name);
- } else {
- defaults[name] = value;
- }
- },
-
- "load" : function(url, opt){
- var options = {
- "clone" : false,
- "loading" : "加载中...",
- "type" : "GET",
- "dataType" : "text",
- "cache" : false,
- "onload" : undefined
- }, self, ajax, onload, loading, url = url.split(/\s+/);
- $.extend(options, opt || {});
-
- onload = options.onload;
- loading = options.loading;
-
- ajax = {
- "data" : options.data,
- "type" : options.type,
- "dataType" : options.dataType,
- "cache" : options.cache,
- "success" : function(data) {
- url[1] && (data = $(data).find(url[1]));
- if($.isFunction(onload))
- data = fire.call(self, onload, data);
- self.setContent(data);
- loading || self.show();
- }
- };
-
- del(["data", "type", "cache", "dataType", "onload", "loading"], options);
- self = loading ?
-
- $.thinkbox("<div class=\"thinkbox-load-loading\">" + loading + "</div>", options) :
-
- $.thinkbox("<div/>", $.extend({}, options, {"display" : false}));
- $.ajax(url[0], ajax);
- return self;
- },
-
- "iframe" : function(url, opt){
- var options = {
- "width" : 500,
- "height" : 400,
- "scrolling" : "no",
- "onload" : undefined
- }, self, iframe, onload;
- $.extend(options, opt || {});
- onload = options.onload;
-
- iframe = $("<iframe/>").attr({
- "width" : options.width,
- "height" : options.height,
- "frameborder" : 0,
- "scrolling" : options.scrolling,
- "src" : url})
- .load(function(){fire.call(self, onload)});
- del(["width", "height", "scrolling", "onload"], options);
- self = $.thinkbox(iframe, options);
- return self;
- },
-
- "tips" : function(msg, type, opt){
- var options = {
- "modalClose" : false,
- "escHide" : false,
- "unload" : true,
- "close" : false,
- "delayClose" : 1000
- }, html;
-
- switch(type){
- case 0: type = "error"; break;
- case 1: type = "success"; break;
- }
- html = "<div class=\"thinkbox-tips thinkbox-tips-" + type + "\">" + msg + "</div>";
- $.extend(options, opt || {});
- return $.thinkbox(html, options);
- },
-
- "success" : function(msg, opt){
- return this.tips(msg, "success", opt);
- },
-
- "error" : function(msg, opt){
- return this.tips(msg, "error", opt);
- },
-
- "loading" : function(msg, opt){
- var options = opt || {};
- options.delayClose = 0;
- return this.tips(msg, "loading", options);
- },
-
- "msg" : function(msg, opt){
- var options = {
- "drag" : false,
- "escHide" : false,
- "delayClose" : 0,
- "center" : false,
- "title" : "消息",
- "x" : 0,
- "y" : 0,
- "locate" : ["right", "bottom"],
- "show" : ["slideDown", "slow"],
- "hide" : ["slideUp", "slow"]
- }, html;
- $.extend(options, opt || {});
- html = $("<div/>").addClass("thinkbox-msg").html(msg);
- return $.thinkbox(html, options);
- },
-
- "alert" : function(msg, opt){
- var options = {
- "title" : lang.alert || "Alert",
- "modal" : true,
- "modalClose" : false,
- "unload" : false,
- "tools" : true,
- "actions" : ["close"],
- "buttons" : {"ok" : [lang.ok || "Ok", "blue", function(){this.hide()}]}
- };
- $.extend(options, opt || {});
-
- del("ok", options);
- var html = $("<div/>").addClass("thinkbox-alert").html(msg);
- return $.thinkbox(html, options);
- },
-
- "confirm" : function(msg, opt){
- var options = {"title" : "确认", "modal" : false, "modalClose" : false},
- button = {"ok" : "确定", "cancel" : "取消"};
- $.extend(options, opt || {});
- options.ok && (button.ok = options.ok);
- options.cancel && (button.cancel = options.cancel);
-
- del(["ok", "cancel"], options);
- options.buttons = button;
- var html = $("<div/>").addClass("thinkbox-confirm").html(msg);
- return $.thinkbox(html, options);
- },
-
- "get" : function(selector){
-
- return $(selector).closest(".thinkbox").data("thinkbox");
- }
- });
- $.fn.thinkbox = function(opt){
- if(opt == "get") return $(this).data("thinkbox");
- return this.each(function(){
- var self = $(this), box = self.data("thinkbox"), options, event;
- switch(opt){
- case "show":
- box && box.show();
- break;
- case "hide":
- box && box.hide();
- break;
- case "toggle":
- box && box.toggle();
- break;
- default:
- options = {
- "title" : self.attr("title"),
- "dataEle" : this,
- "fixed" : false,
- "center" : false,
- "modal" : false,
- "drag" : false
- };
- opt = $.isPlainObject(opt) ? opt : {};
- $.extend(options, {
- "x" : function(){return $(this).offset().left},
- "y" : function(){return $(this).offset().top + $(this).outerHeight()}
- }, opt);
- if(options.event){
- self.on(event, function(){
- _.call(self, options);
- return false;
- });
- } else {
- _.call(self, options);
- }
- }
- });
- function _(options){
- var href = this.data("href") || this.attr("href");
- if(href.substr(0, 1) == "#"){
- $.thinkbox(href, options);
- } else if(href.substr(0, 7) == "http://" || href.substr(0, 8) == "https://"){
- $.thinkbox.iframe(href, options);
- } else {
- $.thinkbox.load(href, options);
- }
- }
- }
- })(jQuery);
|