Quiq::JQuery::ContextMenu::Ajax - Erzeuge Code für ein jQuery Kontext-Menü
Quiq::Hash
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
data
[ <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, ), }, ... ];
Allgmeine Doku
$obj = $class->new(@keyVal);
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; }
Der jQuery-Selektor, der die Elemente identifiziert, auf die das Kontext-Menü gelegt wird. Siehe Plugin-Doku: selector.
Das Ereignis, durch das das Kontext-Menü angesprochen wird. Siehe Plugin-Doku: tigger.
Instantiiere ein Objekt der Klasse und liefere eine Referenz auf dieses Objekt zurück.
$js = $obj->%METHOD; $js = $obj->%METHOD(@keyVal);
Generiere den JavaScript-Code eines Kontext-Menüs und liefere diesen zurück.
1.196
Frank Seitz, http://fseitz.de/
Copyright (C) 2021 Frank Seitz
This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.
To install Quiq, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Quiq
CPAN shell
perl -MCPAN -e shell install Quiq
For more information on module installation, please visit the detailed CPAN module installation guide.