paulkinzett / toolbar

A tooltip style toolbar jQuery plugin
http://paulkinzett.github.com/toolbar/
MIT License
2.3k stars 321 forks source link

(not a feature or bad documentation) with the toolbarItemClick event #25

Closed vasilevich closed 11 years ago

vasilevich commented 11 years ago

I think you lack documentation or the event lacks the data:

.on('toolbarItemClick',function(e) {

        console.log(e.id);      

}
);  

The click on the buttons on the toolbar does not insert the element that was acctualy clicked which might render the toolbarItemClick event as useless! no way to know what exactly was clicked, the e variable contains only data about the whole toolbar rather than the exact button that was clicked, there is of course a workaround to use an external click handler, but that would ruin the need for 'toolbarItemClick' which does not contain the neccresary info in its 'event' variable.

A possible workaround for now is probably something like:

$(document).on("click", ".tool-item", function(){ 
        var elementid=this.id; //the actual button that was just clicked.

        switch(elementid){
            case 'foo'
        //do something
            break
            case 'boo'
        //do something else
            break
        };
});

of course given that each button has an id, that id would end up in the 'elementid' variable. such as these:

    <div id="user-options" class="toolbar-icons hidden-icons" style="display: none;">
    <a href="#" id="foo" title="test1"><i class="icon-user"></i></a>
    <a href="#" id="boo" title="test2"><i class="icon-star"></i></a>
    </div>
vasilevich commented 11 years ago

This is my bad, I figured that I was wrong, because I didn't look at the source code before, and didn't know how to use trigger properly. I figured that it does pass the exact element that was clicked with an additional parameter, eg:

$('#yourbutton').toolbar({content: '#yourlinks', position: 'right'})
.on('toolbarItemClick',function(e,element) {

    console.log(element); //<---element is the exact icon that was just pressed!
var elementid=$(element).attr('id');
    switch(elementid){
        case 'foo'
    //do something
        break
        case 'boo'
    //do something else
        break
    };
}); 

I apologize for not paying attention to the source and hope someone else find this useful.