javascript - Paul Kinzett 的 Toolbar.js 事件处理

Question

我想使用 http://paulkinzett.github.io/toolbar 中的 toolbar.js但是即使我有工具栏按照记录处理事件，我似乎也无法确定我单击了哪个工具栏按钮/图标。

下面是代码片段，它几乎是从示例站点中提取的。

我不是 JS 方面的专家，所以如果有人能告诉我如何处理 toolbarItemClick 事件以便我可以执行正确的操作，那就太棒了。

谢谢莱昂内尔

<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);
            }
        );

Answer 1

我试图弄清楚同样的事情，最终我破译了这个机制。为您提供帮助有点晚了，但也许可以为其他人节省一些时间。

首先，我给了按钮 anchor 标签 ID，尽管可以使用数据属性等(注意我使用的是 img 标签而不是默认的字形支持)

<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) 是被点击的元素上。

在下面的代码中，我还将 targetBlock 设置为按钮所在的 div(因为我可能有几十篇文章，按钮就是工具栏出现在每篇文章上的方式)所以我需要让有问题的文章起作用

$('#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;
                    }
                }