j-ListMenuEditable

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

Komponente für bearbeitbares Listenmenü

Sie können CSS an Ihre Bedürfnisse anpassen.

Konfiguration:

iconremove {String} optional, remove-Schaltflächensymbol ändern. Es ist ein fantastisches Symbol ohne ti--Teil (Standard: times)
defaulticon {String} optional, edit-Schaltflächensymbol ändern (Standard: pencil-alt)
addicon {String} optional, ändert das Schaltflächensymbol add (Standard: plus-square)
placeholder {String} optional, ein Platzhalter für die Eingabe (Standard: Write text and press ENTER)
class {String} CSS-Klasse für ausgewähltes Element (Standard: selected)
title {String} optional, fügt den Titel oben im Listenmenü hinzu (wichtig, wenn Sie addicon und addclick verwenden möchten)
key {String} optional, ein Standardwert key für text (Standard: name)
click {String} optional, Aktion nach Klick auf Element im Menü. Pfad zur Funktion (Element, Index)
addclick {String} optional, Aktion nach Klick auf die Schaltfläche add . Der Pfad zu function() wird ausgeführt, wenn der Benutzer auf das add-Symbol klickt
editclick {String} optional, Aktion nach Klick auf die Schaltfläche edit. Pfad zur Funktion (Element, Index)

Methoden:

component.add(object) – Diese Funktion schiebt das Objekt in den Pfad (kann null sein)
component.edit(index) – Funktion ermöglicht die Bearbeitung eines Elements
component.remove(index) – Funktion entfernt den Index

Gut zu wissen:

Der Pfad muss ein Array von Objekten sein. Nachdem Sie auf den Eintrag im Menü geklickt haben

Unterstützt die dynamische Auswertung des Inhalts von <script type="text/html">. Das folgende Beispiel enthält ein Skript mit HTML und die Komponente wertet den Inhalt aus, wenn die Komponente erstellt wird (nur einmal).

<ui-component name="listmenueditable" path="tags">
	<script type="text/html">
		{{ if mycolor }}
			<i class="ti ti-circle" style="color: {{ mycolor }}"></i>
		{{ fi }}
		{{ name }}
	</script>
</ui-component>

Hinzufügen einer benutzerdefinierten Klasse:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });

Bearbeitbar umschalten:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', editable: true });

Verwenden Sie es mit <ui-component name="listmenueditable">. 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: Denis Granec. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<!-- EXAMPLE DEPENDENCIES -->
<ui-component name="menu"></ui-component>

<div style="width: 400px;">
	<ui-component name="listmenueditable" path="tags" config="title:All tags;editclick:edit;addclick:add;click:click">
		<script type="text/html">
			{{ if mycolor }}
				<i class="ti ti-circle-alt" style="color: {{ mycolor }}"></i>
			{{ fi }}
			{{ name }}
		</script>
	</ui-component>
</div>

<script>
	var tags = [{ name: 'Tag 1', mycolor: '#00B9D7', editable: true, classname: 'customclass', mycustomdata: 'ola' }, { name: 'Tag 2', mycolor: '#00A06E', editable: true, mycustomdata: 'ola2' }];

	function click(el, item, index) {
		console.log('clicked index', index, 'item', item);
	}

	function edit(el, index, icon) {
		var opt = {};
		opt.items = [{ name: 'Edit', id: 'edit' }, { name: 'Remove', icon: 'trash', id: 'remove' }];
		opt.align = 'center';
		opt.element = icon;
		opt.callback = function(selected) {
			switch (selected.id) {
				case 'edit':
					SETTER('listmenueditable/edit', index);
					break;
				case 'remove':
					SETTER('listmenueditable/remove', index);
					break;
			}
		};
		SETTER('menu/show', opt);
	}

	function add() {
		SETTER('listmenueditable/add', { name: 'New tag', mycolor: '#8e44ad', editable: true });
	}
</script>