jquery.boxy.js
上传用户:wenllgg125
上传日期:2020-04-09
资源大小:7277k
文件大小:21k
源码类别:

SCSI/ASPI

开发平台:

Others

  1. /**
  2.  * Boxy 0.1.4 - Facebook-style dialog, with frills
  3.  *
  4.  * (c) 2008 Jason Frame
  5.  * Licensed under the MIT License (LICENSE)
  6.  */
  7.  
  8. /*
  9.  * jQuery plugin
  10.  *
  11.  * Options:
  12.  *   message: confirmation message for form submit hook (default: "Please confirm:")
  13.  * 
  14.  * Any other options - e.g. 'clone' - will be passed onto the boxy constructor (or
  15.  * Boxy.load for AJAX operations)
  16.  */
  17. jQuery.fn.boxy = function(options) {
  18.     options = options || {};
  19.     return this.each(function() {      
  20.         var node = this.nodeName.toLowerCase(), self = this;
  21.         if (node == 'a') {
  22.             jQuery(this).click(function() {
  23.                 var active = Boxy.linkedTo(this),
  24.                     href = this.getAttribute('href'),
  25.                     localOptions = jQuery.extend({actuator: this, title: this.title}, options);
  26.                     
  27.                 if (active) {
  28.                     active.show();
  29.                 } else if (href.indexOf('#') >= 0) {
  30.                     var content = jQuery(href.substr(href.indexOf('#'))),
  31.                         newContent = content.clone(true);
  32.                     content.remove();
  33.                     localOptions.unloadOnHide = false;
  34.                     new Boxy(newContent, localOptions);
  35.                 } else { // fall back to AJAX; could do with a same-origin check
  36.                     if (!localOptions.cache) localOptions.unloadOnHide = true;
  37.                     Boxy.load(this.href, localOptions);
  38.                 }
  39.                 
  40.                 return false;
  41.             });
  42.         } else if (node == 'form') {
  43.             jQuery(this).bind('submit.boxy', function() {
  44.                 Boxy.confirm(options.message || '请确认:', function() {
  45.                     jQuery(self).unbind('submit.boxy').submit();
  46.                 });
  47.                 return false;
  48.             });
  49.         }
  50.     });
  51. };
  52. //
  53. // Boxy Class
  54. function Boxy(element, options) {
  55.     
  56.     this.boxy = jQuery(Boxy.WRAPPER);
  57.     jQuery.data(this.boxy[0], 'boxy', this);
  58.     
  59.     this.visible = false;
  60.     this.options = jQuery.extend({}, Boxy.DEFAULTS, options || {});
  61.     
  62.     if (this.options.modal) {
  63.         this.options = jQuery.extend(this.options, {center: true, draggable: false});
  64.     }
  65.     
  66.     // options.actuator == DOM element that opened this boxy
  67.     // association will be automatically deleted when this boxy is remove()d
  68.     if (this.options.actuator) {
  69.         jQuery.data(this.options.actuator, 'active.boxy', this);
  70.     }
  71.     
  72.     this.setContent(element || "<div></div>");
  73.     this._setupTitleBar();
  74.     
  75.     this.boxy.css('display', 'none').appendTo(document.body);
  76.     this.toTop();
  77.     if (this.options.fixed) {
  78.         if (jQuery.browser.msie && jQuery.browser.version < 7) {
  79.             this.options.fixed = false; // IE6 doesn't support fixed positioning
  80.         } else {
  81.             this.boxy.addClass('fixed');
  82.         }
  83.     }
  84.     
  85.     if (this.options.center && Boxy._u(this.options.x, this.options.y)) {
  86.         this.center();
  87.     } else {
  88.         this.moveTo(
  89.             Boxy._u(this.options.x) ? this.options.x : Boxy.DEFAULT_X,
  90.             Boxy._u(this.options.y) ? this.options.y : Boxy.DEFAULT_Y
  91.         );
  92.     }
  93.     
  94.     if (this.options.show) this.show();
  95. };
  96. Boxy.EF = function() {};
  97. jQuery.extend(Boxy, {
  98.     
  99.     WRAPPER:    "<table cellspacing='0' cellpadding='0' border='0' class='boxy-wrapper'>" +
  100.                 "<tr><td class='top-left'></td><td class='top'></td><td class='top-right'></td></tr>" +
  101.                 "<tr><td class='td_left'></td><td class='boxy-inner'></td><td class='td_right'></td></tr>" +
  102.                 "<tr><td class='bottom-left'></td><td class='bottom'></td><td class='bottom-right'></td></tr>" +
  103.                 "</table>",
  104.     
  105.     DEFAULTS: {
  106.         title:                  null,           // titlebar text. titlebar will not be visible if not set.
  107.         closeable:              true,           // display close link in titlebar?
  108.         draggable:              true,           // can this dialog be dragged?
  109.         clone:                  false,          // clone content prior to insertion into dialog?
  110.         actuator:               null,           // element which opened this dialog
  111.         center:                 true,           // center dialog in viewport?
  112.         show:                   true,           // show dialog immediately?
  113.         modal:                  false,          // make dialog modal?
  114.         fixed:                  true,           // use fixed positioning, if supported? absolute positioning used otherwise
  115.         closeText:              '[关闭]',      // text to use for default close link
  116.         unloadOnHide:           false,          // should this dialog be removed from the DOM after being hidden?
  117.         clickToFront:           false,          // bring dialog to foreground on any click (not just titlebar)?
  118.         behaviours:             Boxy.EF,        // function used to apply behaviours to all content embedded in dialog.
  119.         afterDrop:              Boxy.EF,        // callback fired after dialog is dropped. executes in context of Boxy instance.
  120.         afterShow:              Boxy.EF,        // callback fired after dialog becomes visible. executes in context of Boxy instance.
  121.         afterHide:              Boxy.EF,        // callback fired after dialog is hidden. executed in context of Boxy instance.
  122.         beforeUnload:           Boxy.EF         // callback fired after dialog is unloaded. executed in context of Boxy instance.
  123.     },
  124.     
  125.     DEFAULT_X:          50,
  126.     DEFAULT_Y:          50,
  127.     zIndex:             1337,
  128.     dragConfigured:     false, // only set up one drag handler for all boxys
  129.     resizeConfigured:   false,
  130.     dragging:           null,
  131.     
  132.     // load a URL and display in boxy
  133.     // url - url to load
  134.     // options keys (any not listed below are passed to boxy constructor)
  135.     //   type: HTTP method, default: GET
  136.     //   cache: cache retrieved content? default: false
  137.     //   filter: jQuery selector used to filter remote content
  138.     load: function(url, options) {
  139.         
  140.         options = options || {};
  141.         
  142.         var ajax = {
  143.             url: url, type: 'GET', dataType: 'html', cache: false, success: function(html) {
  144.                 html = jQuery(html);
  145.                 if (options.filter) html = jQuery(options.filter, html);
  146.                 new Boxy(html, options);
  147.             }
  148.         };
  149.         
  150.         jQuery.each(['type', 'cache'], function() {
  151.             if (this in options) {
  152.                 ajax[this] = options[this];
  153.                 delete options[this];
  154.             }
  155.         });
  156.         
  157.         jQuery.ajax(ajax);
  158.         
  159.     },
  160.     
  161.     // allows you to get a handle to the containing boxy instance of any element
  162.     // e.g. <a href='#' onclick='alert(Boxy.get(this));'>inspect!</a>.
  163.     // this returns the actual instance of the boxy 'class', not just a DOM element.
  164.     // Boxy.get(this).hide() would be valid, for instance.
  165.     get: function(ele) {
  166.         var p = jQuery(ele).parents('.boxy-wrapper');
  167.         return p.length ? jQuery.data(p[0], 'boxy') : null;
  168.     },
  169.     
  170.     // returns the boxy instance which has been linked to a given element via the
  171.     // 'actuator' constructor option.
  172.     linkedTo: function(ele) {
  173.         return jQuery.data(ele, 'active.boxy');
  174.     },
  175.     
  176.     // displays an alert box with a given message, calling optional callback
  177.     // after dismissal.
  178.     alert: function(message, callback, options) {
  179.         return Boxy.ask(message, ['确认'], callback, options);
  180.     },
  181.     
  182.     // displays an alert box with a given message, calling after callback iff
  183.     // user selects OK.
  184.     confirm: function(message, after, options) {
  185.         return Boxy.ask(message, ['确认', '取消'], function(response) {
  186.             if (response == '确认') after();
  187.         }, options);
  188.     },
  189.     
  190.     // asks a question with multiple responses presented as buttons
  191.     // selected item is returned to a callback method.
  192.     // answers may be either an array or a hash. if it's an array, the
  193.     // the callback will received the selected value. if it's a hash,
  194.     // you'll get the corresponding key.
  195.     ask: function(question, answers, callback, options) {
  196.         
  197.         options = jQuery.extend({modal: true, closeable: false},
  198.                                 options || {},
  199.                                 {show: true, unloadOnHide: true});
  200.         
  201.         var body = jQuery('<div></div>').append(jQuery('<div class="question"></div>').html(question));
  202.         
  203.         // ick
  204.         var map = {}, answerStrings = [];
  205.         if (answers instanceof Array) {
  206.             for (var i = 0; i < answers.length; i++) {
  207.                 map[answers[i]] = answers[i];
  208.                 answerStrings.push(answers[i]);
  209.             }
  210.         } else {
  211.             for (var k in answers) {
  212.                 map[answers[k]] = k;
  213.                 answerStrings.push(answers[k]);
  214.             }
  215.         }
  216.         
  217.         var buttons = jQuery('<form class="answers"></form>');
  218.         buttons.html(jQuery.map(answerStrings, function(v) {
  219. //add by zhangxinxu http://www.zhangxinxu.com 给确认对话框的确认取消按钮添加不同的class
  220. var btn_index; 
  221. if(v === "确认"){
  222. btn_index = 1;
  223. }else if(v === "取消"){
  224. btn_index = 2;
  225. }else{
  226. btn_index = 3;
  227. }
  228. //add end.  include the 'btn_index' below 
  229.             return "<input class='boxy-btn"+btn_index+"' type='button' value='" + v + "' />";
  230.         }).join(' '));
  231.         
  232.         jQuery('input[type=button]', buttons).click(function() {
  233.             var clicked = this;
  234.             Boxy.get(this).hide(function() {
  235.                 if (callback) callback(map[clicked.value]);
  236.             });
  237.         });
  238.         
  239.         body.append(buttons);
  240.         
  241.         new Boxy(body, options);
  242.         
  243.     },
  244.     
  245.     // returns true if a modal boxy is visible, false otherwise
  246.     isModalVisible: function() {
  247.         return jQuery('.boxy-modal-blackout').length > 0;
  248.     },
  249.     
  250.     _u: function() {
  251.         for (var i = 0; i < arguments.length; i++)
  252.             if (typeof arguments[i] != 'undefined') return false;
  253.         return true;
  254.     },
  255.     
  256.     _handleResize: function(evt) {
  257.         var d = jQuery(document);
  258.         jQuery('.boxy-modal-blackout').css('display', 'none').css({
  259.             width: d.width(), height: d.height()
  260.         }).css('display', 'block');
  261.     },
  262.     
  263.     _handleDrag: function(evt) {
  264.         var d;
  265.         if (d = Boxy.dragging) {
  266.             d[0].boxy.css({left: evt.pageX - d[1], top: evt.pageY - d[2]});
  267.         }
  268.     },
  269.     
  270.     _nextZ: function() {
  271.         return Boxy.zIndex++;
  272.     },
  273.     
  274.     _viewport: function() {
  275.         var d = document.documentElement, b = document.body, w = window;
  276.         return jQuery.extend(
  277.             jQuery.browser.msie ?
  278.                 { left: b.scrollLeft || d.scrollLeft, top: b.scrollTop || d.scrollTop } :
  279.                 { left: w.pageXOffset, top: w.pageYOffset },
  280.             !Boxy._u(w.innerWidth) ?
  281.                 { width: w.innerWidth, height: w.innerHeight } :
  282.                 (!Boxy._u(d) && !Boxy._u(d.clientWidth) && d.clientWidth != 0 ?
  283.                     { width: d.clientWidth, height: d.clientHeight } :
  284.                     { width: b.clientWidth, height: b.clientHeight }) );
  285.     }
  286. });
  287. Boxy.prototype = {
  288.     
  289.     // Returns the size of this boxy instance without displaying it.
  290.     // Do not use this method if boxy is already visible, use getSize() instead.
  291.     estimateSize: function() {
  292.         this.boxy.css({visibility: 'hidden', display: 'block'});
  293.         var dims = this.getSize();
  294.         this.boxy.css('display', 'none').css('visibility', 'visible');
  295.         return dims;
  296.     },
  297.                 
  298.     // Returns the dimensions of the entire boxy dialog as [width,height]
  299.     getSize: function() {
  300.         return [this.boxy.width(), this.boxy.height()];
  301.     },
  302.     
  303.     // Returns the dimensions of the content region as [width,height]
  304.     getContentSize: function() {
  305.         var c = this.getContent();
  306.         return [c.width(), c.height()];
  307.     },
  308.     
  309.     // Returns the position of this dialog as [x,y]
  310.     getPosition: function() {
  311.         var b = this.boxy[0];
  312.         return [b.offsetLeft, b.offsetTop];
  313.     },
  314.     
  315.     // Returns the center point of this dialog as [x,y]
  316.     getCenter: function() {
  317.         var p = this.getPosition();
  318.         var s = this.getSize();
  319.         return [Math.floor(p[0] + s[0] / 2), Math.floor(p[1] + s[1] / 2)];
  320.     },
  321.                 
  322.     // Returns a jQuery object wrapping the inner boxy region.
  323.     // Not much reason to use this, you're probably more interested in getContent()
  324.     getInner: function() {
  325.         return jQuery('.boxy-inner', this.boxy);
  326.     },
  327.     
  328.     // Returns a jQuery object wrapping the boxy content region.
  329.     // This is the user-editable content area (i.e. excludes titlebar)
  330.     getContent: function() {
  331.         return jQuery('.boxy-content', this.boxy);
  332.     },
  333.     
  334.     // Replace dialog content
  335.     setContent: function(newContent) {
  336.         newContent = jQuery(newContent).css({display: 'block'}).addClass('boxy-content');
  337.         if (this.options.clone) newContent = newContent.clone(true);
  338.         this.getContent().remove();
  339.         this.getInner().append(newContent);
  340.         this._setupDefaultBehaviours(newContent);
  341.         this.options.behaviours.call(this, newContent);
  342.         return this;
  343.     },
  344.     
  345.     // Move this dialog to some position, funnily enough
  346.     moveTo: function(x, y) {
  347.         this.moveToX(x).moveToY(y);
  348.         return this;
  349.     },
  350.     
  351.     // Move this dialog (x-coord only)
  352.     moveToX: function(x) {
  353.         if (typeof x == 'number') this.boxy.css({left: x});
  354.         else this.centerX();
  355.         return this;
  356.     },
  357.     
  358.     // Move this dialog (y-coord only)
  359.     moveToY: function(y) {
  360.         if (typeof y == 'number') this.boxy.css({top: y});
  361.         else this.centerY();
  362.         return this;
  363.     },
  364.     
  365.     // Move this dialog so that it is centered at (x,y)
  366.     centerAt: function(x, y) {
  367.         var s = this[this.visible ? 'getSize' : 'estimateSize']();
  368.         if (typeof x == 'number') this.moveToX(x - s[0] / 2);
  369.         if (typeof y == 'number') this.moveToY(y - s[1] / 2);
  370.         return this;
  371.     },
  372.     
  373.     centerAtX: function(x) {
  374.         return this.centerAt(x, null);
  375.     },
  376.     
  377.     centerAtY: function(y) {
  378.         return this.centerAt(null, y);
  379.     },
  380.     
  381.     // Center this dialog in the viewport
  382.     // axis is optional, can be 'x', 'y'.
  383.     center: function(axis) {
  384.         var v = Boxy._viewport();
  385.         var o = this.options.fixed ? [0, 0] : [v.left, v.top];
  386.         if (!axis || axis == 'x') this.centerAt(o[0] + v.width / 2, null);
  387.         if (!axis || axis == 'y') this.centerAt(null, o[1] + v.height / 2);
  388.         return this;
  389.     },
  390.     
  391.     // Center this dialog in the viewport (x-coord only)
  392.     centerX: function() {
  393.         return this.center('x');
  394.     },
  395.     
  396.     // Center this dialog in the viewport (y-coord only)
  397.     centerY: function() {
  398.         return this.center('y');
  399.     },
  400.     
  401.     // Resize the content region to a specific size
  402.     resize: function(width, height, after) {
  403.         if (!this.visible) return;
  404.         var bounds = this._getBoundsForResize(width, height);
  405.         this.boxy.css({left: bounds[0], top: bounds[1]});
  406.         this.getContent().css({width: bounds[2], height: bounds[3]});
  407.         if (after) after(this);
  408.         return this;
  409.     },
  410.     
  411.     // Tween the content region to a specific size
  412.     tween: function(width, height, after) {
  413.         if (!this.visible) return;
  414.         var bounds = this._getBoundsForResize(width, height);
  415.         var self = this;
  416.         this.boxy.stop().animate({left: bounds[0], top: bounds[1]});
  417.         this.getContent().stop().animate({width: bounds[2], height: bounds[3]}, function() {
  418.             if (after) after(self);
  419.         });
  420.         return this;
  421.     },
  422.     
  423.     // Returns true if this dialog is visible, false otherwise
  424.     isVisible: function() {
  425.         return this.visible;    
  426.     },
  427.     
  428.     // Make this boxy instance visible
  429.     show: function() {
  430.         if (this.visible) return;
  431.         if (this.options.modal) {
  432.             var self = this;
  433.             if (!Boxy.resizeConfigured) {
  434.                 Boxy.resizeConfigured = true;
  435.                 jQuery(window).resize(function() { Boxy._handleResize(); });
  436.             }
  437.             this.modalBlackout = jQuery('<div class="boxy-modal-blackout"></div>')
  438.                 .css({zIndex: Boxy._nextZ(),
  439.                       opacity: 0.7,
  440.                       width: jQuery(document).width(),
  441.                       height: jQuery(document).height()})
  442.                 .appendTo(document.body);
  443.             this.toTop();
  444.             if (this.options.closeable) {
  445.                 jQuery(document.body).bind('keypress.boxy', function(evt) {
  446.                     var key = evt.which || evt.keyCode;
  447.                     if (key == 27) {
  448.                         self.hide();
  449.                         jQuery(document.body).unbind('keypress.boxy');
  450.                     }
  451.                 });
  452.             }
  453.         }
  454.         this.boxy.stop().css({opacity: 1}).show();
  455.         this.visible = true;
  456.         this._fire('afterShow');
  457.         return this;
  458.     },
  459.     
  460.     // Hide this boxy instance
  461.     hide: function(after) {
  462.         if (!this.visible) return;
  463.         var self = this;
  464.         if (this.options.modal) {
  465.             jQuery(document.body).unbind('keypress.boxy');
  466.             this.modalBlackout.animate({opacity: 0}, function() {
  467.                 jQuery(this).remove();
  468.             });
  469.         }
  470.         this.boxy.stop().animate({opacity: 0}, 300, function() {
  471.             self.boxy.css({display: 'none'});
  472.             self.visible = false;
  473.             self._fire('afterHide');
  474.             if (after) after(self);
  475.             if (self.options.unloadOnHide) self.unload();
  476.         });
  477.         return this;
  478.     },
  479.     
  480.     toggle: function() {
  481.         this[this.visible ? 'hide' : 'show']();
  482.         return this;
  483.     },
  484.     
  485.     hideAndUnload: function(after) {
  486.         this.options.unloadOnHide = true;
  487.         this.hide(after);
  488.         return this;
  489.     },
  490.     
  491.     unload: function() {
  492.         this._fire('beforeUnload');
  493.         this.boxy.remove();
  494.         if (this.options.actuator) {
  495.             jQuery.data(this.options.actuator, 'active.boxy', false);
  496.         }
  497.     },
  498.     
  499.     // Move this dialog box above all other boxy instances
  500.     toTop: function() {
  501.         this.boxy.css({zIndex: Boxy._nextZ()});
  502.         return this;
  503.     },
  504.     
  505.     // Returns the title of this dialog
  506.     getTitle: function() {
  507.         return jQuery('> .title-bar h2', this.getInner()).html();
  508.     },
  509.     
  510.     // Sets the title of this dialog
  511.     setTitle: function(t) {
  512.         jQuery('> .title-bar h2', this.getInner()).html(t);
  513.         return this;
  514.     },
  515.     
  516.     //
  517.     // Don't touch these privates
  518.     
  519.     _getBoundsForResize: function(width, height) {
  520.         var csize = this.getContentSize();
  521.         var delta = [width - csize[0], height - csize[1]];
  522.         var p = this.getPosition();
  523.         return [Math.max(p[0] - delta[0] / 2, 0),
  524.                 Math.max(p[1] - delta[1] / 2, 0), width, height];
  525.     },
  526.     
  527.     _setupTitleBar: function() {
  528.         if (this.options.title) {
  529.             var self = this;
  530.             var tb = jQuery("<div class='title-bar'></div>").html("<h2>" + this.options.title + "</h2>");
  531.             if (this.options.closeable) {
  532.                 tb.append(jQuery("<a href='#' class='close'></a>").html(this.options.closeText));
  533.             }
  534.             if (this.options.draggable) {
  535.                 tb[0].onselectstart = function() { return false; }
  536.                 tb[0].unselectable = 'on';
  537.                 tb[0].style.MozUserSelect = 'none';
  538.                 if (!Boxy.dragConfigured) {
  539.                     jQuery(document).mousemove(Boxy._handleDrag);
  540.                     Boxy.dragConfigured = true;
  541.                 }
  542.                 tb.mousedown(function(evt) {
  543.                     self.toTop();
  544.                     Boxy.dragging = [self, evt.pageX - self.boxy[0].offsetLeft, evt.pageY - self.boxy[0].offsetTop];
  545.                     jQuery(this).addClass('dragging');
  546.                 }).mouseup(function() {
  547.                     jQuery(this).removeClass('dragging');
  548.                     Boxy.dragging = null;
  549.                     self._fire('afterDrop');
  550.                 });
  551.             }
  552.             this.getInner().prepend(tb);
  553.             this._setupDefaultBehaviours(tb);
  554.         }
  555.     },
  556.     
  557.     _setupDefaultBehaviours: function(root) {
  558.         var self = this;
  559.         if (this.options.clickToFront) {
  560.             root.click(function() { self.toTop(); });
  561.         }
  562.         jQuery('.close', root).click(function() {
  563.             self.hide();
  564.             return false;
  565.         }).mousedown(function(evt) { evt.stopPropagation(); });
  566.     },
  567.     
  568.     _fire: function(event) {
  569.         this.options[event].call(this);
  570.     }
  571.     
  572. };