From Code to Community: Sponsoring The Perl and Raku Conference 2025 Learn more

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

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.222

AUTHOR

Frank Seitz, http://fseitz.de/

COPYRIGHT

Copyright (C) 2024 Frank Seitz

LICENSE

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