如何onclick-trigger非本地jQuery插件的动作? [英] How to onclick-trigger a non-native jQuery plugin's action?
问题描述
我已经安装了第三方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>
...
我想点击myImgdiv中的图片,并将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链接所示。
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.
我的问题是 - 如何?
My question is -- how?
我想我需要开火(例如,幻灯片3),
I think I need to fire off (e.g., for slide #3),
jQuery(this).activateSlide(3);
添加一些变体,
$('#myImg').click(function () {
...
});
。 ($($){
Drupal.behaviors.myEasyAccordion = {
附加:$)
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>
...
然后,在init中,
( 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.
这篇关于如何onclick-trigger非本地jQuery插件的动作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!