NAME

Quiq::JQuery::ContextMenu::Ajax - Erzeuge Code für ein jQuery Kontext-Menü

BASE CLASS

Quiq::Hash

DESCRIPTION

Die Klasse erzeugt Code für ein Kontext-Menü, welches durch das jQuery-Plugin jQuery contextmenu realisiert wird. Der Inhalt des Menüs wird durch einen AJAX-Aufruf beschafft.

Der Perl-Code

  my $js = Quiq::JQuery::ContextMenu::Ajax->html(
      className => 'contextMenu',
      selector => '.popup',
      trigger => 'left',
  );

liefert

  $.contextMenu({
      className: 'contextMenu',
      selector: '.popup',
      trigger: 'left',
      build: function(ej,ev) {
          var options;
  
          $.ajax({
              type: 'GET',
              url: ej.attr('href'),
              async: false,
              beforeSend: function () {
                  $('body').css('cursor','wait');
              },
              complete: function () {
                  $('body').css('cursor','default');
              },
              success: function (data,textStatus,jqXHR) {
                  // Wir bekommen die Items in einem Array geliefert,
                  // damit die Reihenfolge wohldefiniert ist. Hier
                  // wandeln wir das Array in ein Objekt, wie
                  // das ContexMenu-Plugin es erwartet.
                  var items = {};
                  for (var i = 0; i < data.length; i += 2) {
                      items[data[i]] = data[i+1];
                  }
                  options = {
                      items: items,
                      callback: function(key,options) {
                          var item = items[key];
                          if (item.target)
                              window.open(item.url,item.target);
                          else
                              document.location = item.url;
                      },
                  };
              },
              error: function () {
                  alert('ERROR: AJAX Request failed');
              },
          });
  
          return options;
      },
  });

Das JavaScript-Array data, das vom Server geliefert wird, hat den Aufbau

  [
      <key>: {
          name: '<name>',
          url: '<url>',
          target: '<target>',
      }
      ...
  ]

Der serverseitige Perl-Code, der eine Menü-Definition liefert (Beispiel):

  return [
      sql => {
          name => 'SQL',
          url => 'sqlFromLog?'.Quiq::Url->queryEncode(
              system => $system,
              path => $logfile,
          ),
      },
      ...
  ];

SEE ALSO

• Allgmeine Doku

METHODS

Klassenmethoden

new() - Konstruktor

Synopsis

  $obj = $class->new(@keyVal);

Attributes

className => $name

Name der CSS-Klasse des Menüs. Kann explizit angegeben werden, wenn das Menü customized werden soll. Beispiel ($name ist 'contextMenu'):

  .contextMenu {
      width: 85px !important;
      min-width: 50px !important;
  }

selector => $selector

Der jQuery-Selektor, der die Elemente identifiziert, auf die das Kontext-Menü gelegt wird. Siehe Plugin-Doku: selector.

trigger => $event

Das Ereignis, durch das das Kontext-Menü angesprochen wird. Siehe Plugin-Doku: tigger.

Description

Instantiiere ein Objekt der Klasse und liefere eine Referenz auf dieses Objekt zurück.

Objektmethoden

js() - Generiere JavaScript-Code

Synopsis

  $js = $obj->%METHOD;
  $js = $obj->%METHOD(@keyVal);

Description

Generiere den JavaScript-Code eines Kontext-Menüs und liefere diesen zurück.

VERSION

1.185

AUTHOR

Frank Seitz, http://fseitz.de/

COPYRIGHT

Copyright (C) 2020 Frank Seitz

LICENSE

This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

cpanm Quiq

perl -MCPAN -e shell
install Quiq