修復了在IE9的jQuery分流

Question

更新：

這個問題是關於multiple pane splitter這是工作的罰款在所有瀏覽器IE9的除外。在調整窗口大小時，右窗格子窗口的寬度不會相應地調整大小。

（在我的應用程序的情況下，我也不得不把右窗格拆分方法使用的setTimeout，0延遲一個不同的JavaScript線程，否則寬度/頂部位置去野外的IE9）。

Answer 1

找到問題，這是jQuery拆分器插件中使用的jQuery.browser.msie條件。

Answer 2

我也有這個問題。我更換了所有的

!$browser.msie 

在條件語句

到

browser_resize() 

，然後只是頭部意見後確定了新的功能：

function browser_resize() 
{ 
    if (!$.browser.msie) 
     return true; 
    if (parseInt($.browser.version)<9) 
     return false; 
    return true; 
} 

Answer 3

我有麻煩的插件工作直到我將garlon4的解決方案與jQuery 1.6+所需的另一個修補程序結合在一起。下面是我做的：

我增加了功能：

function browser_resize_auto_fired() { 
    // Returns true when the browser natively fires the resize 
    // event attached to the panes elements 
    return ($.browser.msie && (parseInt($.browser.version) < 9)); 
} 

然後替換

!$browser.msie 

實例與

!browser_resize_auto_fired() 

最後，讓插件工作在jquery 1.6+下，我更改了這段代碼：

$(window).bind("resize", function (e) { 
    var top = splitter.offset().top; 
    var wh = $(window).height(); 
    splitter.css("height", Math.max(wh - top - splitter._hadjust, splitter._hmin) + "px"); 
    if (!browser_resize_auto_fired()) splitter.trigger("resize"); 
}).trigger("resize"); 

這樣：

$(window).bind("resize", function (e) { 
    if (e.target == window) { 
    var top = splitter.offset().top; 
    var wh = $(window).height(); 
    splitter.css("height", Math.max(wh - top - splitter._hadjust, splitter._hmin) + "px"); 
    if (!browser_resize_auto_fired()) splitter.trigger("resize"); 
    } 
}).trigger("resize"); 

這裏是插件的全部代碼，含有該修正：

/* 
* jQuery.splitter.js - two-pane splitter window plugin 
* 
* version 1.51 (2009/01/09) 
* version 1.52 (2012/05/08) -- Fixes by Roger Martin 
* * Added check in window resize event handler to run only when the target is the window. This fixes a breaking 
* change introduced in jQuery 1.6. 
* * Added support for IE 9+ 
* 
* Dual licensed under the MIT and GPL licenses: 
* http://www.opensource.org/licenses/mit-license.php 
* http://www.gnu.org/licenses/gpl.html 
* 
*/ 

/** 
* The splitter() plugin implements a two-pane resizable splitter window. 
* The selected elements in the jQuery object are converted to a splitter; 
* each selected element should have two child elements, used for the panes 
* of the splitter. The plugin adds a third child element for the splitbar. 
* 
* For more details see: http://methvin.com/splitter/ 
* 
* 
* @example $('#MySplitter').splitter(); 
* @desc Create a vertical splitter with default settings 
* 
* @example $('#MySplitter').splitter({type: 'h', accessKey: 'M'}); 
* @desc Create a horizontal splitter resizable via Alt+Shift+M 
* 
* @name splitter 
* @type jQuery 
* @param Object options Options for the splitter (not required) 
* @cat Plugins/Splitter 
* @return jQuery 
* @author Dave Methvin (dave.methvin@gmail.com) 
*/ 
; (function ($) { 

$.fn.splitter = function (args) { 
args = args || {}; 
return this.each(function() { 
    var zombie;  // left-behind splitbar for outline resizes 
    function startSplitMouse(evt) { 
    if (opts.outline) 
     zombie = zombie || bar.clone(false).insertAfter(A); 
    panes.css("-webkit-user-select", "none"); // Safari selects A/B text on a move 
    bar.addClass(opts.activeClass); 
    A._posSplit = A[0][opts.pxSplit] - evt[opts.eventPos]; 
    $(document) 
      .bind("mousemove", doSplitMouse) 
      .bind("mouseup", endSplitMouse); 
    } 
    function doSplitMouse(evt) { 
    var newPos = A._posSplit + evt[opts.eventPos]; 
    if (opts.outline) { 
     newPos = Math.max(0, Math.min(newPos, splitter._DA - bar._DA)); 
     bar.css(opts.origin, newPos); 
    } else 
     resplit(newPos); 
    } 
    function endSplitMouse(evt) { 
    bar.removeClass(opts.activeClass); 
    var newPos = A._posSplit + evt[opts.eventPos]; 
    if (opts.outline) { 
     zombie.remove(); zombie = null; 
     resplit(newPos); 
    } 
    panes.css("-webkit-user-select", "text"); // let Safari select text again 
    $(document) 
      .unbind("mousemove", doSplitMouse) 
      .unbind("mouseup", endSplitMouse); 
    } 
    function resplit(newPos) { 
    // Constrain new splitbar position to fit pane size limits 
    newPos = Math.max(A._min, splitter._DA - B._max, 
       Math.min(newPos, A._max, splitter._DA - bar._DA - B._min)); 
    // Resize/position the two panes 
    bar._DA = bar[0][opts.pxSplit];  // bar size may change during dock 
    bar.css(opts.origin, newPos).css(opts.fixed, splitter._DF); 
    A.css(opts.origin, 0).css(opts.split, newPos).css(opts.fixed, splitter._DF); 
    B.css(opts.origin, newPos + bar._DA) 
      .css(opts.split, splitter._DA - bar._DA - newPos).css(opts.fixed, splitter._DF); 
    // IE fires resize for us; all others pay cash 
    if (!browser_resize_auto_fired()) 
     panes.trigger("resize"); 
    } 
    function dimSum(jq, dims) { 
    // Opera returns -1 for missing min/max width, turn into 0 
    var sum = 0; 
    for (var i = 1; i < arguments.length; i++) 
     sum += Math.max(parseInt(jq.css(arguments[i])) || 0, 0); 
    return sum; 
    } 
    function browser_resize_auto_fired() { 
    // Returns true when the browser natively fires the resize event attached to the panes elements 
    return ($.browser.msie && (parseInt($.browser.version) < 9)); 
    } 

    // Determine settings based on incoming opts, element classes, and defaults 
    var vh = (args.splitHorizontal ? 'h' : args.splitVertical ? 'v' : args.type) || 'v'; 
    var opts = $.extend({ 
    activeClass: 'active', // class name for active splitter 
    pxPerKey: 8,   // splitter px moved per keypress 
    tabIndex: 0,   // tab order indicator 
    accessKey: ''   // accessKey for splitbar 
    }, { 
    v: {     // Vertical splitters: 
     keyLeft: 39, keyRight: 37, cursor: "e-resize", 
     splitbarClass: "vsplitbar", outlineClass: "voutline", 
     type: 'v', eventPos: "pageX", origin: "left", 
     split: "width", pxSplit: "offsetWidth", side1: "Left", side2: "Right", 
     fixed: "height", pxFixed: "offsetHeight", side3: "Top", side4: "Bottom" 
    }, 
    h: {     // Horizontal splitters: 
     keyTop: 40, keyBottom: 38, cursor: "n-resize", 
     splitbarClass: "hsplitbar", outlineClass: "houtline", 
     type: 'h', eventPos: "pageY", origin: "top", 
     split: "height", pxSplit: "offsetHeight", side1: "Top", side2: "Bottom", 
     fixed: "width", pxFixed: "offsetWidth", side3: "Left", side4: "Right" 
    } 
    }[vh], args); 

    // Create jQuery object closures for splitter and both panes 
    var splitter = $(this).css({ position: "relative" }); 
    var panes = $(">*", splitter[0]).css({ 
    position: "absolute",   // positioned inside splitter container 
    "z-index": "1",     // splitbar is positioned above 
    "-moz-outline-style": "none" // don't show dotted outline 
    }); 
    var A = $(panes[0]);  // left or top 
    var B = $(panes[1]);  // right or bottom 

    // Focuser element, provides keyboard support; title is shown by Opera accessKeys 
    var focuser = $('<a href="javascript:void(0)"></a>') 
     .attr({ accessKey: opts.accessKey, tabIndex: opts.tabIndex, title: opts.splitbarClass }) 
     .bind($.browser.opera ? "click" : "focus", function() { this.focus(); bar.addClass(opts.activeClass) }) 
     .bind("keydown", function (e) { 
      var key = e.which || e.keyCode; 
      var dir = key == opts["key" + opts.side1] ? 1 : key == opts["key" + opts.side2] ? -1 : 0; 
      if (dir) 
      resplit(A[0][opts.pxSplit] + dir * opts.pxPerKey, false); 
     }) 
     .bind("blur", function() { bar.removeClass(opts.activeClass) }); 

    // Splitbar element, can be already in the doc or we create one 
    var bar = $(panes[2] || '<div></div>') 
     .insertAfter(A).css("z-index", "100").append(focuser) 
     .attr({ "class": opts.splitbarClass, unselectable: "on" }) 
     .css({ 
      position: "absolute", "user-select": "none", "-webkit-user-select": "none", 
      "-khtml-user-select": "none", "-moz-user-select": "none" 
     }) 
     .bind("mousedown", startSplitMouse); 
    // Use our cursor unless the style specifies a non-default cursor 
    if (/^(auto|default|)$/.test(bar.css("cursor"))) 
    bar.css("cursor", opts.cursor); 

    // Cache several dimensions for speed, rather than re-querying constantly 
    bar._DA = bar[0][opts.pxSplit]; 
    splitter._PBF = $.boxModel ? dimSum(splitter, "border" + opts.side3 + "Width", "border" + opts.side4 + "Width") : 0; 
    splitter._PBA = $.boxModel ? dimSum(splitter, "border" + opts.side1 + "Width", "border" + opts.side2 + "Width") : 0; 
    A._pane = opts.side1; 
    B._pane = opts.side2; 
    $.each([A, B], function() { 
    this._min = opts["min" + this._pane] || dimSum(this, "min-" + opts.split); 
    this._max = opts["max" + this._pane] || dimSum(this, "max-" + opts.split) || 9999; 
    this._init = opts["size" + this._pane] === true ? 
      parseInt($.curCSS(this[0], opts.split)) : opts["size" + this._pane]; 
    }); 

    // Determine initial position, get from cookie if specified 
    var initPos = A._init; 
    if (!isNaN(B._init)) // recalc initial B size as an offset from the top or left side 
    initPos = splitter[0][opts.pxSplit] - splitter._PBA - B._init - bar._DA; 
    if (opts.cookie) { 
    if (!$.cookie) 
     alert('jQuery.splitter(): jQuery cookie plugin required'); 
    var ckpos = parseInt($.cookie(opts.cookie)); 
    if (!isNaN(ckpos)) 
     initPos = ckpos; 
    $(window).bind("unload", function() { 
     var state = String(bar.css(opts.origin)); // current location of splitbar 
     $.cookie(opts.cookie, state, { 
     expires: opts.cookieExpires || 365, 
     path: opts.cookiePath || document.location.pathname 
     }); 
    }); 
    } 
    if (isNaN(initPos)) // King Solomon's algorithm 
    initPos = Math.round((splitter[0][opts.pxSplit] - splitter._PBA - bar._DA)/2); 

    // Resize event propagation and splitter sizing 
    if (opts.anchorToWindow) { 
    // Account for margin or border on the splitter container and enforce min height 
    splitter._hadjust = dimSum(splitter, "borderTopWidth", "borderBottomWidth", "marginBottom"); 
    splitter._hmin = Math.max(dimSum(splitter, "minHeight"), 20); 
    $(window).bind("resize", function (e) { 
     if (e.target == window) { 
     var top = splitter.offset().top; 
     var wh = $(window).height(); 
     splitter.css("height", Math.max(wh - top - splitter._hadjust, splitter._hmin) + "px"); 
     if (!browser_resize_auto_fired()) splitter.trigger("resize"); 
     } 
    }).trigger("resize"); 
    } 
    else if (opts.resizeToWidth && !browser_resize_auto_fired()) 
    $(window).bind("resize", function() { 
     splitter.trigger("resize"); 
    }); 

    // Resize event handler; triggered immediately to set initial position 
    splitter.bind("resize", function (e, size) { 
    // Custom events bubble in jQuery 1.3; don't get into a Yo Dawg 
    if (e.target != this) return; 
    // Determine new width/height of splitter container 
    splitter._DF = splitter[0][opts.pxFixed] - splitter._PBF; 
    splitter._DA = splitter[0][opts.pxSplit] - splitter._PBA; 
    // Bail if splitter isn't visible or content isn't there yet 
    if (splitter._DF <= 0 || splitter._DA <= 0) return; 
    // Re-divvy the adjustable dimension; maintain size of the preferred pane 
    resplit(!isNaN(size) ? size : (!(opts.sizeRight || opts.sizeBottom) ? A[0][opts.pxSplit] : 
      splitter._DA - B[0][opts.pxSplit] - bar._DA)); 
    }).trigger("resize", [initPos]); 
}); 
}; 

})(jQuery);