Use of class instead of id's for multiple toolbars on same page?

[macsupport]

Is there a method to load the toolbar using classes for both the link and for the content div? I have an image gallery with buttons for each image ( favorite, print, info, etc.) and I want to use a single icon to click to open the toolbar but be able to use classes so I don't have to have an id for each toolbar ( the page has many images on it).

[skyzyx]

Using data attributes would be far better.

[macsupport]

Ahh, much better!

[macsupport]

Does this mean one can't do this? Not sure why it was closed without at least a comment.

[paulkinzett]

Hi

Sorry I thought this one was solved.

If you had HTML like below...

<div class="settings-button" data-toolbar="true"><img src="img/icon-cog-small.png" /></div>
<div class="settings-button" data-toolbar="true"><img src="img/icon-cog-small.png" /></div>
<div class="settings-button" data-toolbar="true"><img src="img/icon-cog-small.png" /></div>

Then you could load all the toolbars using the Js

$('div[data-toolbar]').toolbar({
    content: '#user-options',
    position: 'top'
});

Is that what you are after?

[macsupport]

Thanks. This works but the toolbar icons do not respond to a click. In this scenario, would I need a click handler for each icon? I tried:

$('.toolbar-icons a').on('click', function() {
                    $(this).click();                     
                });

Gives me "too much recursion"

[bergmark]

@macsupport click triggers the click handlers, so that's why it recurses.

[qtronik]

this on "toolbarItemClick" function do not return the cliked ITEM object but the tool bar trigger itself...

[mvkamalesh]

Hi Paul,

$('div[data-toolbar]').toolbar({ content: '#user-options', position: 'top' });

above works well but i need the content: part also to be unique?

I have a listing page with 10 posts per page i want each post to have a toolbar, currently same content tools for all the post. how do i achieve this.

regards, kamalesh mv

[ashffaq]

@mvkamalesh

I figured it out by writing the init script in the loop, you have to define and different id for each post,

          <?php $counter = 1 ?>

           <div class="btn-toolbar" id="sharebutton<?php echo $counter; ?>"></div>
            <div id="toolbar-options<?php echo $counter; ?>"  class="hidden">

            </div>
            <script type="text/javascript">
            $('#sharebutton<?php echo $counter; ?>').toolbar({
                content: '#toolbar-options<?php echo $counter; ?>',
                position: 'top',
                animation: 'bounce',
                adjustment: 25,
            });
            </script>

           <?php $counter ++ ?>

$counter will increase every time loop run and will create different ids