如何点击触发非本地 jQuery 插件的操作? [英] How to onclick-trigger a non-native jQuery plugin's action?
问题描述
我已经安装了一个 3rd-party jQuery 插件(它是一个手风琴).它显示在我的页面上，并按预期工作.
I've installed a 3rd-party jQuery plugin (it's an accordion). It displays on my page, and works as expected.
我想在我点击页面上的图像时触发插件的一个操作(打开特定幻灯片).
I want to trigger one of the plugin's actions (open a particular slide) when I click on an image on my page.
我似乎无法获得正确执行此操作的代码和/或语法.
I can't seem to get the code &/or syntax for doing that right.
我安装的插件是EasyAccordion"(http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/).它的 .js 源发布在这里:http://pastebin.com/55JB4pr2.
The plugin I've installed is "EasyAccordion" (http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/). It's .js source is posted here: http://pastebin.com/55JB4pr2.
我在 Drupal7 页面上使用插件.
I'm using the plugin on a Drupal7 page.
我不认为特定的插件，或者它在 Drupal 中使用的事实，与正确使用 jQuery 无关.
I don't think that the specific plugin, or the fact that it's been used in Drupal, is relevant to the proper jQuery usage.
jQuery 与 Drupal 捆绑在一起.我在我的页面上初始化插件:
jQuery's bundled with Drupal. I init the plugin on my page with:
( function ($) {
Drupal.behaviors.myEasyAccordion = {
attach: function(context,settings) {
$('#accordion1',context).easyAccordion({
autoStart: false,
...
});
}
};
})(jQuery);
在我的标记中，我有
...
<div id="accordion1">
... EASYACCORDION MARKUP ...
</div>
...
再一次，使用这个 init &标记，手风琴按预期出现/工作.
Again, with this init & markup, the accordion appears/works as expected.
在同一页面上，在另一个页面上我添加了一个图片链接，即，
On the same page, in another I've added an image-link, i.e.,
...
<div id="myImg">
<a><img src="myimg.png" /></a>
</div>
<div id="accordion1">
... EASYACCORDION MARKUP ...
</div>
...
我想单击myImg"div 中的图像，并让 EasyAccordion 捕捉到特定打开的窗格".我认为，特定窗格的激活是由
I want to click on the image in the "myImg" div, and have the EasyAccordion snap to a specific open 'pane'. The activation of a particular pane is addressed, I think, by the
line #127 jQuery.fn.activateSlide = function() {
函数，如我上面提供的 pastebin-link 所示.
function, as seen at the pastebin-link I provided above.
Iiuc，我需要在上面的 init 函数中添加代码，以将图像点击与 EasyAccordion 中的动作执行联系起来.
Iiuc, I need to add code to the init function above, to tie the image-click to an action execution in the EasyAccordion.
我的问题是——如何?
我认为我需要启动(例如，对于幻灯片 #3)，
I think I need to fire off (e.g., for slide #3),
jQuery(this).activateSlide(3);
添加一些变体，
$('#myImg').click(function () {
...
});
到 init，将它附加到 EasyAccordion init 的 function().像什么?
to the init, attaching it to the EasyAccordion init's function(). Something like?
( function ($) {
Drupal.behaviors.myEasyAccordion = {
attach: function(context,settings) {
$('#accordion1',context).easyAccordion({
autoStart: false,
...
});
----> $('#myImg',context).easyAccordion({ ...
----> ?????????
----> });
}
};
})(jQuery);
到目前为止，我还没有找到正确的语法.至少，我无法让点击图像实际导致指定项目在 EasyAccordion 中激活".
So far the right syntax has eluded me. At least, I can't get the click-on-image to actually cause the specified item to 'activate' in the EasyAccordion.
这两篇文章，
http://stackoverflow.com/questions/5492258/easyacordion-jump-to-desired-slidenum-jquery-plugin
http://stackoverflow.com/questions/6243870/easyaccordion-jquery-plugin-callbacks
我认为很接近.但是我仍然没有得到将撬棒插入我的 Drupal.behaviors... 节的语法.
I think are close. But I'm still not getting the syntax to crowbar into my Drupal.behaviors... stanza right.
有什么指导吗?
推荐答案
这行得通.
为每张幻灯片添加一个可定位的类，以便标记的:
Adding a targetable class to each slide, so that markup's:
...
<div id="myImg">
<a><img src="myimg.png" /></a>
</div>
<div id="accordion1">
<dt class="slide_1" >
...
<dt class="slide_2" >
...
</div>
...
然后，在初始化中，
( function ($) {
Drupal.behaviors.myEasyAccordion = {
attach: function(context,settings) {
$('#accordion1',context).easyAccordion({
autoStart: false,
...
});
$('#myImg',context).click(function() {
$("dt.slide_1").activateSlide();
});
}
};
})(jQuery);
现在，单击 #myImg div 中的 img 会按预期打开目标幻灯片...此处为slide_1".
Now, a click on the img in the #myImg div opens the target slide ... here, 'slide_1', as intended.
这篇关于如何点击触发非本地 jQuery 插件的操作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
