如何onclick-trigger非本地jQuery插件的动作? [英] How to onclick-trigger a non-native jQuery plugin's action?

查看:630
本文介绍了如何onclick-trigger非本地jQuery插件的动作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经安装了第三方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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆