如何点击触发非本地 jQuery 插件的操作?

问题描述

我已经安装了一个 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 插件的操作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！