j-ContextMenu

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Stödjer 3 riktningar left, center och right
singlar
Det fungerar med Bootstrap Grid System
Arbeta med beröring

Metoder:

Metod: component.show(orientation, targetElement, [items], clickCallback, [offsetX], [offsetY])

orientation {String} kan vara left, center eller right
targetElement {Selector/jQuery/Element} ett mål där komponenten kommer att vara synlig
items {Array} är valfritt och måste ha denna struktur: annars kommer [{ name: String, value: String, icon: String }] att vara föremål lästa från målens data-options-attribut.
callback(selectedValue) {Function} utlöses när användaren klickar på objektet
offsetX {Number} alternativ kan ändra offset X
offsetY {Number} alternativ kan ändra offset Y

Metod: component.hide()

Attribut:

targetElement kan innehålla data-options="Name 1|fa-building|Value 1;Name 2|fa-github|Value 2;"-attribut med alla objekt i sammanhangsläget.

Om value inte definieras använder komponenten name som value.

Globala händelser:

ON('contextmenu', function(visible, component, target) {
    console.log('ContextMenu is', visible ? 'visible' : 'hidden');
});

Använd den med <ui-component name="contextmenu">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

example.html

<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="contextmenu"></ui-component>

<div class="container">
	<a href="javascript:void(0)">Edit</a>
</div>

<script>
	$(document).on('click', 'a', function() {
		SETTER('contextmenu/show', 'left', this, [{ name: 'Print', icon: 'ti-print', value: 'print' }, { name: 'Copy', icon: 'ti-copy', value: 'copy' }, { name: 'Remove', icon: 'ti-times-circle', value: 'remove' }], function(item) {
			console.log('CLICK', item);
		});
	});
</script>