j-Exec

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Die Komponente führt eine Methode durch, wenn der Benutzer auf das gleiche Element mit der exec, exec2, oder exec3 Klasse klickt.

Elemente:

Elemente können ein data-exec-Attribut mit einem Methodenenname enthalten, das ausgeführt wird, wenn der Benutzer auf das Element klickt.
Elemente können data-href-Attribute enthalten und die Komponente erfüllt REDIRECT().

Attribute:

data-exec="METHOD_NAME" führt eine Methode durch, wenn der Benutzer klickt (Support Plugin-Anrufe über ? Charakter)
data-prevent="true" verhindert die Fortsetzung des click
data-href="URL" führt REDIRECT() aus

Attribute für den Doppelklick:

data-exec2="METHOD_NAME" führt eine Methode durch, wenn der Benutzer klickt (Support Plugin-Anrufe über ? Charakter)
data-prevent2="true" verhindert die Fortsetzung des click
data-href2="URL" führt REDIRECT() aus

Attribute für das Kontextmenü:

data-exec3="METHOD_NAME" führt eine Methode durch, wenn der Benutzer klickt (Support Plugin-Anrufe über ? Charakter)
data-href3="URL" führt REDIRECT() aus

Gut zu wissen:

die Komponente führt eine Zielfunktion in der Form function(element, event) aus
data-exec=, data-exec2=, data-exec3= kann @METHOD_NAME enthalten, die in den aktuellen Komponenten-Plugins component/METHOD_NAME(element, e) ausgeführt werden

Neues: Erweiterungen:

SETTER('exec/register', function(exec, el, e, type) {

	// @exec {String} a value from data-exec
	// @el {jQuery element}
	// @e {Event}
	// @type {String} empty '': click, '2': double-click '3': context menu
	// registers a new extension

	if (exec.charAt(0) === '/') {

		EXEC('customplugin/' + exec.substring(1), el, e);

		// "return true" stops the next processing of Exec
		return true;

	}

});

Verwenden Sie es mit <ui-component name="exec">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<ui-component name="exec"></ui-component>
<a href="javascript:void(0)" class="exec" data-exec="myClick">1</a>
<a href="javascript:void(0)" class="exec" data-exec="myClick">2</a>
<p class="exec" data-exec="myClick">3</p>
<span class="exec" data-exec="myClick">4</span>
<div class="exec" data-exec="myClick">5</div>

<script>
	function myClick(el) {
        alert('CLICK: ' + el.html());
    }
</script>