Question

我想使用来自http://paulkinzett.github.io/toolbar的toolbar.js，但即使我有工具栏处理事件的处理文件，我似乎也无法识别哪个工具栏按钮/我点击的图标。

下面是代码snippit，它几乎从示例站点中解除了。

我不是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

我试图找出同样的事情，最终我破译了这个机制。有点晚来帮助你，但也许它会在一段时间内拯救别人。

首先，我给了按钮锚标签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;
                    }
                }

Answer 2

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

Toolbar.js由Paul Kinzett事件处理

2 个答案: