1

我想使用来自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);
            }
        );
4

2 回答 2

2

我试图弄清楚同样的事情，最终我破译了机制。帮助你有点晚了，但也许它会为别人节省一些时间。

首先，我给了按钮锚标签 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;
                    }
                }
于 2014-10-21T06:07:54.297 回答
1 

$('#button').toolbar({
	content: '#toolbar-options',
	position: 'top',
	style: 'primary',
	event: 'click',
	hideOnClick: true
});

$('#button').on('toolbarItemClick',
   function( event,buttonClicked ) {
      alert(buttonClicked.id);
   }
);
<link href="https://paulkinzett.github.io/toolbar/css/documentation.css" rel="stylesheet"/>
<link href="https://paulkinzett.github.io/toolbar/css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://paulkinzett.github.io/toolbar/js/jquery.toolbar.min.js"></script>

<div id="toolbar-options" class="hidden">
   <a href="#" id="plane"><i class="fa fa-plane"></i></a>
   <a href="#" id="car"><i class="fa fa-car"></i></a>
   <a href="#" id="bycicle"><i class="fa fa-bicycle"></i></a>
</div>

<div data-toolbar="toolbar-options" data-toolbar-animation="flip" class="btn-toolbar feature-toolbar btn-toolbar-primary text-center" data-toolbar-style="primary" id="button"><i class="fa fa-cog" style="position: relative"></i></div>

于 2016-01-25T22:25:09.177 回答