Toolbar.js由Paul Kinzett事件处理 [英] Toolbar.js by Paul Kinzett Event handling

问题描述

我想使用 http://paulkinzett.github.io/toolbar但即使我有工具栏处理已记录的事件，似乎无法找到我点击的工具栏按钮/图标。

I'm wanting to use toolbar.js from http://paulkinzett.github.io/toolbar but even though I have the tool bar working the the handling of the events as documented I don't seem to be able to get identify which toolbar button/icon I clicked.

以下是代码段，它几乎从示例网站中解除。

Below is the code snippit, which it pretty much lifted from the example site.

我不是JS的专家，所以如果有人能够启发我如何来处理toolbarItemClick事件，以便我能够执行正确的操作，这将是非常棒的。

I'm no expert in JS, so if someone could enlighten me as to how to handle the toolbarItemClick event so that I can preform the correct action, that would be awesome.

感谢
Lionel

Thanks Lionel

<div id="user-options" class="toolbar-icons" style="display: none;">
    <a href="#" target="_blank"><i class="icon-edit"></i></a>
    <a href="#" target="_blank"><i class="icon-trash"></i></a>
</div>

<div class="tooltip-container normal">';
    <section class="left">';
        <div id="normal-button" class="settings-button"><img src="/3rdparty/paulkinzett-toolbar/documentation/img/icon-cog-small.png" /></div>';
    </section>';
</div>


$('#normal-button').toolbar({content: '#user-options', position: 'top'});

$('#normal-button').on('toolbarItemClick',
            function(event) {
                console.log(event);
            }
        );

推荐答案

我试图找出同样的事情，最终我解释了这个机制。有一点帮忙，但也许这会节省别人一段时间。

I was trying to figure out the same thing, eventually i deciphered the mechanism. A bit late to help you but maybe it will save someone else some time.

首先，我给了按钮锚标签ID，虽然可以使用数据属性等注意我使用img标签而不是默认的字形支持）

Firstly, I gave the button anchor tags IDs, though one could use data- attributes etc (note i am using img tags instead of the default glyph support)

<div id="user-toolbar-options">
    <a id="menu-insert" href="#"><img src="add.png" width="18px" height="18px" /></a>
    <a id="menu-remove"  href="#"><img src="remove.png" width="18px" height="18px" /></a>
</div>  

关键是使用不在文档中公开的不同功能签名（ function（event，buttonClicked）{} ，第二个参数（buttonClicked）是点击的一个元素。

The key is to use a different function signature which isn't publicized in the documentation (function (event, buttonClicked){}, the 2nd parameter (buttonClicked) is the a element that was clicked on.

下面的代码我还将targetBlock设置为按钮所在的div（因为我有潜在的几十个文章，按钮就是每个工具栏上出现的按钮），所以我需要得到有关的文章来处理它。 （'toolbarItemClick'，
函数（事件，buttonClicked））$ {

in the code below i also set targetBlock to the div that the button was in (as i have potentially dozens of articles and the button thats hows the toolbar appears on each) so i need to get the article in question to act on it.

$('#normal-button').on('toolbarItemClick',
                function (event, buttonClicked) {
                    var targetBlock = $(event.target).parents('.article') // get article
                    var buttonClickedID = buttonClicked.id // get the id of the button click

                    switch (buttonClickedID) {
                        case 'menu-insert':
                            insertNewArticleBelow(targetBlock)
                            break;
                        case 'menu-remove':
                            removeArticle(targetBlock)
                            break;
                    }
                }

这篇关于Toolbar.js由Paul Kinzett事件处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！