• Címkék:
  • eszköztár
  • toolbar
  • tooltip
  • tip
  • buborék

Toolbar.js

Eszköztár felül (bezárás újabb klikk-kel)

Eszköztár alul (bezárás újabb klikk-kel)

Eszköztár baloldalt (bezárás tetszőleges klikk-kel)

Eszköztár jobboldalt (bezárás tetszőleges klikk-kel)

Deklaráció

        $(document).ready(function(){
          $('#pelda-1').toolbar({
            content: '#user-toolbar-options'
          })

          $('#pelda-2').toolbar({
            content: '#user-toolbar-options',
            position: 'bottom'
          })

          $('#pelda-3').toolbar({
            content: '#user-toolbar-options',
            position: 'left',
            hideOnClick: true
          })

          $('#pelda-4').toolbar({
            content: '#user-toolbar-options',
            position: 'right',
            hideOnClick: true
          })
        })
      

HTML kód

        <div id="pelda-1" class="settings-button"><img src="css/icon-cog-small.png"></div>

        <div id="pelda-2" class="settings-button"><img src="css/icon-cog-small.png"></div>

        <div id="pelda-3" class="settings-button"><img src="css/icon-cog-small.png"></div>

        <div id="pelda-4" class="settings-button"><img src="css/icon-cog-small.png"></div>

        <div id="user-toolbar-options">
          <a href="#"><i class="icon-user"></i></a>
          <a href="#"><i class="icon-star"></i></a>
          <a href="#"><i class="icon-edit"></i></a>
          <a href="#"><i class="icon-trash"></i></a>
          <a href="#"><i class="icon-ban-circle"></i></a>
        </div>
      

« bezár