• Címkék:
  • context
  • helyi
  • menü
  • egér
  • klikk

jQuery Context Menu

Példa

Célterület
(jobb klikk!)

Deklaráció

        $(document).ready(function(){
          $('#celterulet').contextMenu({
            menu: 'pelda'
          },
            function(action, el, pos) {
            alert(
              'Művelet: ' + action + '\n\n' +
              'Objektum azonosító (ID): ' + $(el).attr('id') + '\n\n' + 
              'X: ' + pos.x + '  Y: ' + pos.y + ' (célterülethez viszonyítva)\n\n' + 
              'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (oldalhoz viszonyítva)'
            )
          });

          $('#disableItems').click( function() {
            $('#pelda').disableContextMenuItems('#kivag,#masol');
            $(this).attr('disabled', true);
            $('#enableItems').attr('disabled', false);
          });

          $('#enableItems').click( function() {
            $('#pelda').enableContextMenuItems('#kivag,#masol');
            $(this).attr('disabled', true);
            $('#disableItems').attr('disabled', false);
          });

          $('#disableMenus').click( function() {
            $('#celterulet, #pelda ul li').disableContextMenu();
            $(this).attr('disabled', true);
            $('#enableMenus').attr('disabled', false);
          });

          $('#enableMenus').click( function() {
            $('#celterulet, #pelda ul li').enableContextMenu();
            $(this).attr('disabled', true);
            $('#disableMenus').attr('disabled', false);
          });
        });
      

HTML kód

Célterület:

        <div id="celterulet">
          Célterület<br/>
          (jobb klikk!)
        </div>
      

Helyi menü:

        <ul id="pelda" class="contextMenu">
          <li class="edit"><a href="#szerkeszt">Szerkesztés</a></li>
          <li class="cut separator"><a href="#kivag">Kivágás</a></li>
          <li class="copy"><a href="#masol">Másolás</a></li>
          <li class="paste"><a href="#beilleszt">Beillszetés</a></li>
          <li class="delete"><a href="#torol">Törlés</a></li>
          <li class="quit separator"><a href="#kilep">Kilépés</a></li>
        </ul>
      

Gombok (metódusok):

        <div id="options">
          <p><input type="button" id="disableItems" value="'kivágás/másolás' menüpontok tiltása" /></p>
          <p><input type="button" id="enableItems" value="'kivágás/másolás' menüpontok engedélyezése" disabled="disabled" /></p>
          <p><input type="button" id="disableMenus" value="Helyi menü tiltása" /></p>
          <p><input type="button" id="enableMenus" value="Helyi menü engedélyezése" disabled="disabled" /></p>
        </div>
      

« bezár