Splitter.js 不适用于新版本的 jQuery
Splitter.js won't work with new versions of jQuery
I'm using Splitter.js in a project.
代码来自 http://methvin.com/splitter/具体的 JS 在 http://methvin.com/splitter/splitter.js
使用 jQuery v1.5.2 时,代码工作正常。
当我移动到jQuery v1.7.2时,代码失败,并给出"太多递归"错误。当我使用 jQuery 1.6.2 时,这似乎也会发生
有人对此有解决方法吗?
我确实在 https://bungeni-exist.googlecode.com/svn-history/r188/xq-framework/trunk/db/framework/assets/bungeni/scripts/splitter.js 找到了(更新的?)版本的拆分器.js但这似乎并不能解决问题。
任何建议将不胜感激。
有一个更新的 jQuery.splitter 分支,它适用于 jQuery 1.8(如果你恢复jQuery.browser
,也是 1.9 https://github.com/e1ven/jQuery-Splitter。
UI-Layout保持最新状态,并进行"拆分"等等,并且相当易于使用。
极简主义的例子
$('body').layout({ applyDemoStyles: true });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div class="ui-layout-center">Center
<p><a href="http://layout.jquery-dev.com/demos.html">Go to the Demos page</a></p>
<p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
<p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
复杂演示
var layoutSettings_Outer = {
name: "outerLayout",
defaults: {
size: "auto",
minSize: 50,
paneClass: "pane",
resizerClass: "resizer",
togglerClass: "toggler",
buttonClass: "button",
contentSelector: ".content",
contentIgnoreSelector: "span",
togglerLength_open: 35,
togglerLength_closed: 35,
hideTogglerOnSlide: true,
togglerTip_open: "Close This Pane",
togglerTip_closed: "Open This Pane",
resizerTip: "Resize This Pane",
fxName: "slide",
fxSpeed_open: 750,
fxSpeed_close: 1500,
fxSettings_open: { easing: "easeInQuint" },
fxSettings_close: { easing: "easeOutQuint" }
},
north: {
spacing_open: 1,
togglerLength_open: 0,
togglerLength_closed: -1,
resizable: false,
slidable: false,
fxName: "none"
},
south: {
maxSize: 200,
spacing_closed: 0,
slidable: false,
initClosed: true,
onhide_start: function() { return confirm("START South pane hide 'n'n onhide_start callback 'n'n Allow pane to hide?"); },
onhide_end: function() { alert("END South pane hide 'n'n onhide_end callback"); },
onshow_start: function() { return confirm("START South pane show 'n'n onshow_start callback 'n'n Allow pane to show?"); },
onshow_end: function() { alert("END South pane show 'n'n onshow_end callback"); },
onopen_start: function() { return confirm("START South pane open 'n'n onopen_start callback 'n'n Allow pane to open?"); },
onopen_end: function() { alert("END South pane open 'n'n onopen_end callback"); },
onclose_start: function() { return confirm("START South pane close 'n'n onclose_start callback 'n'n Allow pane to close?"); },
onclose_end: function() { alert("END South pane close 'n'n onclose_end callback"); },
onresize_end: function() { alert("END South pane resize 'n'n onresize_end callback 'n'n NOTE: onresize_start event was skipped."); }
},
west: {
size: 250,
spacing_closed: 21,
togglerLength_closed: 21,
togglerAlign_closed: "top",
togglerLength_open: 0,
togglerTip_open: "Close West Pane",
togglerTip_closed: "Open West Pane",
resizerTip_open: "Resize West Pane",
slideTrigger_open: "click",
initClosed: true,
fxSettings_open: { easing: "easeOutBounce" }
},
east: {
size: 250,
spacing_closed: 21,
togglerLength_closed: 21,
togglerAlign_closed: "top",
togglerLength_open: 0,
togglerTip_open: "Close East Pane",
togglerTip_closed: "Open East Pane",
resizerTip_open: "Resize East Pane",
slideTrigger_open: "mouseover",
initClosed: true,
fxName: "drop",
fxSpeed: "normal",
fxSettings: { easing: "" }
},
center: {
paneSelector: "#mainContent",
minWidth: 200,
minHeight: 200
}
};
$(function() {
var outerLayout, innerLayout;
outerLayout = $("body").layout(layoutSettings_Outer);
outerLayout.addToggleBtn("#tbarToggleNorth", "north");
outerLayout.addOpenBtn("#tbarOpenSouth", "south");
outerLayout.addCloseBtn("#tbarCloseSouth", "south");
outerLayout.addPinBtn("#tbarPinWest", "west");
outerLayout.addPinBtn("#tbarPinEast", "east");
var westSelector = "body > .ui-layout-west",
eastSelector = "body > .ui-layout-east";
$("<span></span>").addClass("pin-button").prependTo(westSelector);
$("<span></span>").addClass("pin-button").prependTo(eastSelector);
outerLayout.addPinBtn(westSelector + " .pin-button", "west");
outerLayout.addPinBtn(eastSelector + " .pin-button", "east");
$("<span></span>").attr("id", "west-closer").prependTo(westSelector);
$("<span></span>").attr("id", "east-closer").prependTo(eastSelector);
outerLayout.addCloseBtn("#west-closer", "west");
outerLayout.addCloseBtn("#east-closer", "east");
$("a").each(function() {
var path = document.location.href;
if (path.substr(path.length - 1) == "#") path = path.substr(0, path.length - 1);
if (this.href.substr(this.href.length - 1) == "#") this.href = path + "#";
});
});
body { font-size: 85%; }
<link href="http://layout.jquery-dev.net/demos/css/complex.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.net/demos/js/complex.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/debug.js"></script>
<div class="ui-layout-west">
<div class="header">Outer - West</div>
<div class="content">
<h3><b>Outer Layout</b></h3>
<ul>
<li><a href="#" onClick="outerLayout.toggle('north')">Toggle North</a></li>
<li><a href="#" onClick="outerLayout.toggle('south')">Toggle South</a></li>
<li><a href="#" onClick="outerLayout.toggle('west')"> Toggle West</a></li>
<li><a href="#" onClick="outerLayout.toggle('east')"> Toggle East</a></li>
<li><a href="#" onClick="outerLayout.hide('north')">Hide North</a></li>
<li><a href="#" onClick="outerLayout.hide('south')">Hide South</a></li>
<li><a href="#" onClick="outerLayout.show('south', false)">Unhide South</a></li>
<li><a href="#" onClick="outerLayout.hide('east')"> Hide East</a></li>
<li><a href="#" onClick="outerLayout.show('east', false)">Unhide East</a></li>
<li><a href="#" onClick="outerLayout.open('east')"> Open East</a></li>
<li><a href="#" onClick="outerLayout.open('north'); outerLayout.sizePane('north', 'auto')"> Resize North="auto"</a></li>
<li><a href="#" onClick="outerLayout.sizePane('north', 100); outerLayout.open('north')"> Resize North=100</a></li>
<li><a href="#" onClick="outerLayout.sizePane('north', 300); outerLayout.open('north')"> Resize North=300</a></li>
<li><a href="#" onClick="outerLayout.sizePane('north', 10000); outerLayout.open('north')">Resize North=10000</a></li>
<li><a href="#" onClick="outerLayout.open('south'); outerLayout.sizePane('south', 'auto')"> Resize South="auto"</a></li>
<li><a href="#" onClick="outerLayout.sizePane('south', 100); outerLayout.open('south')"> Resize South=100</a></li>
<li><a href="#" onClick="outerLayout.sizePane('south', 300); outerLayout.open('south')"> Resize South=300</a></li>
<li><a href="#" onClick="outerLayout.sizePane('south', 10000); outerLayout.open('south')">Resize South=10000</a></li>
<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','#FCC')">North Color = Red</a></li>
<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','#CFC')">North Color = Green</a></li>
<li><a href="#" onClick="outerLayout.panes.north.css('backgroundColor','')"> North Color = Default</a></li>
<li><a href="#" onClick="alert('outerLayout.name = '''+outerLayout.options.name+'''')">Show Layout Name</a></li>
<li><a href="#" onClick="showOptions(outerLayout,'defaults')">Show Options.Defaults</a></li>
<li><a href="#" onClick="showOptions(outerLayout,'north')"> Show Options.North</a></li>
<li><a href="#" onClick="showOptions(outerLayout,'south')"> Show Options.South</a></li>
<li><a href="#" onClick="showOptions(outerLayout,'west')"> Show Options.West</a></li>
<li><a href="#" onClick="showOptions(outerLayout,'east')"> Show Options.East</a></li>
<li><a href="#" onClick="showOptions(outerLayout,'center')"> Show Options.Center</a></li>
<li><a href="#" onClick="showState(outerLayout,'container')"> Show State.Container</a></li>
<li><a href="#" onClick="showState(outerLayout,'north')"> Show State.North</a></li>
<li><a href="#" onClick="showState(outerLayout,'south')"> Show State.South</a></li>
<li><a href="#" onClick="showState(outerLayout,'west')"> Show State.West</a></li>
<li><a href="#" onClick="showState(outerLayout,'east')"> Show State.East</a></li>
<li><a href="#" onClick="showState(outerLayout,'center')"> Show State.Center</a></li>
</ul>
</div>
<div class="footer">Automatically positioned footer</div>
</div>
<div class="ui-layout-east">
<div class="header">Outer - East</div>
<div class="subhead">I'm a subheader</div>
<div class="content">
<h3><b>Inner Layout</b></h3>
<ul id="createInner">
<li><a href="#" onClick="createInnerLayout(); return false;">CREATE Inner Layout</a></li>
</ul>
<ul id="innerCommands" style="display: none;">
<li><a href="#" onClick="innerLayout.toggle('north')">Toggle North</a></li>
<li><a href="#" onClick="innerLayout.toggle('south')">Toggle South</a></li>
<li><a href="#" onClick="innerLayout.toggle('west')"> Toggle West</a></li>
<li><a href="#" onClick="innerLayout.toggle('east')"> Toggle East</a></li>
<li><a href="#" onClick="innerLayout.hide('north')">Hide North</a></li>
<li><a href="#" onClick="innerLayout.hide('south')">Hide South</a></li>
<li><a href="#" onClick="innerLayout.hide('west')"> Hide West</a></li>
<li><a href="#" onClick="innerLayout.hide('east')"> Hide East</a></li>
<li><a href="#" onClick="innerLayout.show('east')"> Show East</a></li>
<li><a href="#" onClick="innerLayout.sizePane('north', 50); innerLayout.open('north')"> Resize North=50</a></li>
<li><a href="#" onClick="innerLayout.sizePane('north', 300); innerLayout.open('north')"> Resize North=300</a></li>
<li><a href="#" onClick="innerLayout.sizePane('north', 10000); innerLayout.open('north')">Resize North=10000</a></li>
<li><a href="#" onClick="innerLayout.sizePane('south', 50); innerLayout.open('south')"> Resize South=50</a></li>
<li><a href="#" onClick="innerLayout.sizePane('south', 300); innerLayout.open('south')"> Resize South=300</a></li>
<li><a href="#" onClick="innerLayout.sizePane('south', 10000); innerLayout.open('south')">Resize South=10000</a></li>
<li><a href="#" onClick="innerLayout.panes.north.css('backgroundColor','#FCC')">North Color = Red</a></li>
<li><a href="#" onClick="innerLayout.panes.north.css('backgroundColor','#CFC')">North Color = Green</a></li>
<li><a href="#" onClick="innerLayout.panes.north.css('backgroundColor','')"> North Color = Default</a></li>
<li><a href="#" onClick="alert('innerLayout.name = '''+innerLayout.options.name+'''')">Show Layout Name</a></li>
<li><a href="#" onClick="showOptions(innerLayout,'defaults')">Show Options.Defaults</a></li>
<li><a href="#" onClick="showOptions(innerLayout,'north')"> Show Options.North</a></li>
<li><a href="#" onClick="showOptions(innerLayout,'south')"> Show Options.South</a></li>
<li><a href="#" onClick="showOptions(innerLayout,'west')"> Show Options.West</a></li>
<li><a href="#" onClick="showOptions(innerLayout,'east')"> Show Options.East</a></li>
<li><a href="#" onClick="showOptions(innerLayout,'center')"> Show Options.Center</a></li>
<li><a href="#" onClick="showState(innerLayout,'container')"> Show State.Container</a></li>
<li><a href="#" onClick="showState(innerLayout,'north')"> Show State.North</a></li>
<li><a href="#" onClick="showState(innerLayout,'south')"> Show State.South</a></li>
<li><a href="#" onClick="showState(innerLayout,'west')"> Show State.West</a></li>
<li><a href="#" onClick="showState(innerLayout,'east')"> Show State.East</a></li>
<li><a href="#" onClick="showState(innerLayout,'center')"> Show State.Center</a></li>
</ul>
</div>
<div class="footer">I'm a footer</div>
<div class="footer">I'm another footer</div>
<div class="footer">Unlimited headers & footers</div>
</div>
<div class="ui-layout-north">
<div class="header">Outer - North</div>
<div class="content">
I only have toggler when 'closed' - I cannot be resized - and I do not 'slide open'
</div>
<ul class="toolbar">
<li id="tbarToggleNorth" class="first"><span></span>Toggle NORTH</li>
<li id="tbarOpenSouth"><span></span>Open SOUTH</li>
<li id="tbarCloseSouth"><span></span>Close SOUTH</li>
<li id="tbarPinWest"><span></span>Pin/Unpin WEST</li>
<li id="tbarPinEast" class="last"><span></span>Pin/Unpin EAST</li>
</ul>
</div>
<div class="ui-layout-south">
<div class="header">Outer - South</div>
<div class="content">
<p>I only have a resizer/toggler when 'open'</p>
</div>
</div>
<div id="mainContent">
<div class="ui-layout-center">
<h3 class="header">Inner - Center</h3>
<div class="ui-layout-content">
<p id="createInner2" style="font-weight: bold;"><a href="#" onClick="createInnerLayout(); return false;">Click here to CREATE the Inner Layout</a></p>
<p>See the <a href="#" onclick="outerLayout.open('east'); return false;">Outer-East pane</a> for commands to manipulate the Inner Layout</p>
<p><a href="../demos.html">Go to the Demos page</a></p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
<div class="footer">Center panes can have headers & footers too</div>
</div>
<div class="ui-layout-north"> Inner - North</div>
<div class="ui-layout-south"> Inner - South</div>
<div class="ui-layout-west"> Inner - West</div>
<div class="ui-layout-east"> Inner - East
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
</div>
高级复杂演示
我在将站点升级到jQuery 1.8的过程中遇到了同样的问题。经过一些调试和在代码中闲逛后,在我看来有两个问题:resize 事件在一些地方被不必要地触发,并且在拆分器的 resize 事件处理程序设置之前在拆分器上被触发。我切换了最后两个代码块的顺序,以确保首先设置拆分器的 resize 事件处理程序并整理几行。它现在看起来像这样:
// Resize event handler
splitter.bind("resize", function(e, size){
// 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));
e.stopPropagation();
});
// 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);
splitter._bottomOffset = opts.bottomOffset ? opts.bottomOffset : 0;
$(window).bind("resize", function(){
var top = splitter.offset().top;
var wh = $(window).height() - splitter._bottomOffset;
splitter.css("height", Math.max(wh-top-splitter._hadjust, splitter._hmin)+"px");
splitter.trigger("resize");
}).trigger("resize");
}
else if ( opts.resizeToWidth )
$(window).bind("resize", function(){
splitter.trigger("resize");
});
另外,请确保删除
if ( !$.browser.msie ) panes.trigger("resize");
从重新拆分功能。如果您想在一个地方查看所有内容,我已经将整个内容上传到 GitHub 存储库。
我遇到了同样的问题。在拆分器.js文件中查看了一段时间后,我遇到了这段代码:
// 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;
......
}).trigger("resize" , [initPos]);
"yo dawg"的参考是死的赠品:)
果然,在Chrome中调试后,此特定事件处理程序函数中存在过多的递归。编写它的开发人员试图解决此问题,但由于某种原因,较新版本的 JQuery 库无法按预期工作,并且从未满足转义条件。据我所知,这段特定的代码仅在页面加载期间用于设置拆分器的初始位置。我发现除了堆栈溢出之外,拆分器仍然可用,我注意到这个问题的唯一原因是因为我初始化拆分器后的 javascript 代码没有运行。如果您有时间,请查看是否可以找出这部分代码不起作用的原因并发布修复程序。如果您赶时间并且不介意胶带,请在调用 .splitter() 函数的代码行周围放置一个 try catch。它似乎在Chrome 19和IE 9中都可以正常工作。
根据史蒂文·亨特的回答,我有一个解决方法,即添加 try/catch 块并删除递归调用。
将下面的块(从第 149 行左右)替换为此修改版本-
try
{
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(){
var top = splitter.offset().top;
var wh = $(window).height();
splitter.css("height", Math.max(wh-top-splitter._hadjust, splitter._hmin)+"px");
}).trigger("resize");
}
else if ( opts.resizeToWidth && !$.browser.msie )
$(window).bind("resize", function(){
splitter.trigger("resize");
});
}
catch(err)
{
}
- 如何确定相对较新版本的IE的高度和宽度(IE8不喜欢从JavaScript设置这种样式吗?
- 浏览器兼容性/支持较新版本
- 如何在较新版本的 Free-JQGard 中重置搜索工具栏和搜索过滤器
- 如何用新版本的因果报应取代被弃用的吞咽因果报应
- npm安装can'找不到新版本
- 为什么获胜't客户端在公用文件夹中接收此脚本的新版本
- 获取模板是用我的Node.JS应用程序的新版本Handlebars错误预编译的
- 上载图像的新版本并避免缓存
- jQuery-新窗口上的选择器
- Jquery新元素在连接时导致[对象对象]
- 如何避免被大量的框架和新版本的JavaScript淹没
- 无法将 Slickgrid 的标头与 Jquery 新版本分组
- 为什么这个选择菜单在jQuery和JQM的新版本组合中失败
- Splitter.js 不适用于新版本的 jQuery
- 一些jquery插件不适用于新版本的jquery库
- 从不同范围访问较新版本的变量(JavaScript / jQuery)
- 检查jQuery版本并加载一个新版本
- 新版本的jQuery无法使用脚本
- 为什么新版本的jQuery不能使用这种递归?
- jQuery .change() 事件在较新版本中由 .click() 触发