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

 / 
Quiq-1.222
River stage zero No dependents
/ Quiq::JQuery::ContextMenu::Ajax

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.