无法使jQuery UI插件的destroy()方法正常工作(+冲突的jQuery插件) [英] Can't get the destroy() method of a jQuery UI plugin to work (+conflicting jQuery plugins)
问题描述
我正在尝试修复一个朋友的网站，在该网站上他添加的两个jQuery插件效果不佳.基本上，一个( foundation -具有选项卡的网格布局)与第二个( RoyalSlider -图片滑块)，因为后者需要看到"滑块材料，而前者隐藏不活动的选项卡.有问题的页面上有三个标签，每个标签上都包含其中一个RoyalSliders.
I'm trying to fix a friend's website in which two jQuery plugins he added aren't playing nice. Basically, one (foundation - a grid layout with tabs) isn't playing nice with the second (RoyalSlider - an image slider) because the latter needs to "see" the slider material while the former hides inactive tabs. The page in question has three tabs, each with one of these RoyalSliders on them.
原始代码立即在主页上的某些jQuery中初始化了三个选项卡中每个选项卡的滑块.我一直在尝试通过仅初始化活动选项卡来修复它，然后在单击选项卡时插入代码以删除以前的滑块实例，并为新选项卡创建一个新实例.
The original code initialized the slider for each of the three tabs right away in some jQuery on the main page. I've been trying to fix it by initializing only the active tab and then, when a tab is clicked, inserting code to delete the previous slider instance and create a new one for the new tab.
$(currentLocation).royalSlider('destroy') 我添加的行没有任何作用，而且我无法弄清楚自己在做什么错.现在，滑块第一次正确初始化，但是当我返回任何选项卡时，第一个滑块内将出现第二个滑块，使我认为删除功能不起作用；它的尺寸较小，并且动画与滑块应设置为的动画不同(可能会反弹吗?).这个数字永远不会超过两个.
The $(currentLocation).royalSlider('destroy') line that I added isn't doing anything, and I can't figure out what I'm doing wrong. Right now, the sliders are initializing for the first time correctly, but when I go back to any tab, a second slider appears inside of the first, making me think that the delete function is not working; its size is smaller and the animation is different than what the slider is supposed to be set to (bounce maybe?). The number never goes more than two.
以下是我正在处理的代码片段.为了尊重开发人员，我仅提供了一些小部分内容(尽管很容易检查源代码).首先是一些RoyalSlider.js，只是为了演示其结构和destroy方法(我根本没有更改它，它采用了非常标准的jQuery UI插件的格式):
Here are some snippets of the code that I'm working on. I've only included small parts out of respect for the developers (although it's easy to check the source code). First is some of RoyalSlider.js, just to demonstrate the structure and destroy method (I haven't changed it at all, and it's in the format of a pretty standard jQuery UI plugin):
RoyalSlider.js:
(function($) {
function RoyalSlider(element, options){ /* Make a slideshow, basically */ }
RoyalSlider.prototype = {
... /* methods */
destroy:function(){
this._stopSlideshow();
this._dragContainer.unbind(this._downEvent);
$(document).unbind(this._moveEvent).unbind(this._upEvent);
$(window).unbind(this._resizeEvent);
if(this.settings.keyboardNavEnabled) {
$(document).unbind("keydown.rs");
}
this.slider.remove();
delete this.slider;
}
... /* _internal methods; all above are defined */
}; /* RoyalSlider.prototype end */
$.fn.royalSlider = function(options) { /* basically return a new RoyalSlider */ };
$.fn.royalSlider.defaults = { /* whole lot of defaults */ };
$.fn.royalSlider.settings = {};
})(jQuery);
接下来是app.js，它将切换选项卡.这些选项卡是无序列表，单击它们可将您引至 http://domain.com/pagename#tabtwo(等)
Next, app.js, which switches the tabs. The tabs are an unordered list, and clicking on them directs you to http://domain.com/pagename#tabtwo (etc.)
app.js
jQuery(document).ready(function ($) {
function activateTab($tab) {
var $activeTab = $tab.closest('dl').find('a.active'),
contentLocation = $tab.attr("href") + 'Tab';
prevLocation = $activeTab.attr("href") + 'Tab'; /* I added this */
// Make Tab Active
$activeTab.removeClass('active');
$tab.addClass('active');
//Delete and Add Slider
$(prevLocation).royalSlider('destroy'); /* Doesn't Work, but doesn't break - it doesn't seem to have any effect. */
$mySlider = $(contentLocation).royalSlider({ /* I also added this, and it seems to work */
captionShowEffects:"moveleft",
directionNavAutoHide: true,
imageScaleMode:"fit",
imageAlignCenter:true,
blockLinksOnDrag:true,
});
//Show Tab Content
$(contentLocation).closest('.tabs-content').children('li').hide();
$(contentLocation).css('display', 'block');
}
/* More functions that aren't relevant for this */
}
最后，HTML文档本身中的jQuery:
Last, the jQuery in the HTML document itself:
product-design.html
<html><head> ...
<script>
var $mySlider;
$(document).ready(function() {
if ( window.location.hash ) { initialLocation = window.location.hash + 'Tab'; }
else { initialLocation = '#taboneTab'; }
$mySlider = $( initialLocation ).royalSlider({
captionShowEffects:"moveleft",
directionNavAutoHide: true,
imageScaleMode:"fit",
imageAlignCenter:true,
blockLinksOnDrag:true,
});
$(".royalSlider").css({ display: 'inline-block', overflow: 'hidden' });
});
</script>
</head><body>
...
<!-- Body goes here -->
...
<dl class="contained tabs">
<dd><a href="#tabone" class="active">TabOne</a></dd>
<dd><a href="#tabtwo" class="inactivetest">TabTwo</a></dd>
<dd><a href="#tabthree" class="inactivetest">TabThree</a></dd>
</dl>
<ul class="tabs-content">
<li class="active" id="taboneTab">
...
<div id="tabone" class="royalSlider default">
<!-- Container of slides(images) -->
<ul class="royalSlidesContainer">
<!-- Slides -->
<li class="royalSlide">
<div class="orbitcontent" style="">
<h3>Content One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="royalSlide"> <img class="royalImage" src="" alt="Beauty Shot" width="765" height="600"/>
<div class="royalCaption">
<h4 class="royalCaptionItem" data-show-effect="movetop">Constructed Prototype</h4>
</div>
</li>
</ul>
</div>
<!--TAB TWOOOOOOOOOOOO-->
<li id="tabtwoTab">
...
<!--TAB THREEEEEEEEEEE-->
<li id="tabthreeTab">
...
<!-- Close all of the tags -->
我真的很抱歉所有文本和缺少完整的代码，但是有人有什么建议吗?我已经尝试过$mySlider.destroy()，$mySlider.royalSlider('destroy')，$(pastLocation).destroy()，$(pastLocation).royalSlider('destroy')，$(pastLocation).royalSlider.prototype('destroy')，在删除它之前立即设置$('.royalslider).css('display','block')，以及其他我能想到的方法；所有这些都不执行任何操作(在Firebug中逐步浏览时，我正在观看变量royalSlider)或破坏了网页.我是jQuery的新手，所以答案很可能很简单，而我只是想念它.
I'm really sorry about all of the text and the lack of full code, but does anyone have any suggestions? I've tried $mySlider.destroy(), $mySlider.royalSlider('destroy'), $(pastLocation).destroy(), $(pastLocation).royalSlider('destroy'), $(pastLocation).royalSlider.prototype('destroy'), setting $('.royalslider).css('display','block') right before deleting it, and anything else I could come up with; all of those either did nothing (I was watching the variable royalSlider while stepping through it in Firebug) or broke the webpage. I'm a novice at jQuery, so it's entirely possible the answer's very simple and I'm just missing it.
任何帮助将不胜感激！
让我知道是否还需要其他信息.
Let me know if there's other information needed.
推荐答案
大多数jQuery插件将其对象的新实例存储在jQuery数据中.我在皇家滑标代码上达到了顶峰- http://dimsemenov.com/plugins/royal-slider/-我认为您可以通过直接引用royalSlider对象来销毁它.
Most jQuery plugins store the new instance of their object within jQuery data. I took a peak at what I think is the royal slider code - http://dimsemenov.com/plugins/royal-slider/ - and I think that you could destroy it by directly referencing the royalSlider object.
首先，您要检查并查看尝试调用destroy的元素是否实际上具有royalSlider实例.
First you're going want to check and see if the element you're trying to call destroy on actually has a royalSlider instance.
console.log($(prevLocation).data('royalSlider'));
假设上面的行返回一个对象，那么您应该能够直接访问destroy方法.如果它不返回对象，则说明您是在错误的元素上调用destroy，还是其他原因使存储的实例消失了.
Assuming the line above returns an object, you should then be able to access the destroy method directly. If it doesn't return an object, then either you're calling destroy on the wrong element, or something else is blowing away the stored instance.
$(prevLocation).data('royalSlider').destroy();
我在royalSlider网站上进行了测试，方法是在控制台中输入以下内容
I tested this at the royalSlider website by typing the following into my console
$('#homeSlider').data('royalSlider').destroy();
这篇关于无法使jQuery UI插件的destroy()方法正常工作(+冲突的jQuery插件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
