# j-ListMenuEditable

> Ετικέτες Editable Menu

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 230711a8cf75e42f8e7e595c9befe2a99dfab08fdff1f9fc1ab32edd85cd1e75
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Ετικέτες Editable Menu

- Μπορείτε να αλλάξετε το CSS για τις ανάγκες σας.


__ΕΠΙΤΡΟΦΗ__:

- `iconremove {String}` προαιρετική, αλλάξετε το εικονίδιο κουμπιού `remove`. είναι ένα γραφικό εικόνιο χωρίς το μέρος `ti-` (προεπιλεγμένο: `times`)
- `defaulticon {String}` Εναλλακτικά, αλλαγές `edit` Το κουμπί icon (προεπιλεγμένο: `pencil-alt`)
- `addicon {String}` Εναλλακτικά, θα αλλάξει `add` Το κουμπί icon (προεπιλεγμένο: `plus-square`)
- `placeholder {String}` προαιρετική, μια θέση για την είσοδο (προεπιλεγμένη: `Write text and press ENTER`)
- `class {String}` κλάση CSS για το επιλεγμένο στοιχείο (προεπιλογή: `selected`)
- Το `title {String}` είναι προαιρετικό, θα προσθέσει τον τίτλο στο επάνω μέρος του μενού λίστας (η σημασία είναι αν θέλετε να χρησιμοποιήσετε το `addicon` και το `addclick`)
- `key {String}` προαιρετική, μια προεπιλεγμένη τιμή `key` για την τιμή `text` (προεπιλογή: `name`)
- `click {String}` προαιρετική, δράση μετά από κλικ στο στοιχείο στο μενού.
- `addclick {String}` προαιρετική, δράση μετά από κλικ στο κουμπί `add `.Path to function() εκτελεί όταν ο χρήστης κάνει κλικ στην εικονική `add`
- `editclick {String}` προαιρετική, δράση μετά από κλικ στο κουμπί `edit`.

__Μέθοδοι__:

- `component.add(object)` - Αυτή η λειτουργία θα πιέσει το αντικείμενο στο δρόμο (μπορεί να είναι μηδενικό)
- `component.edit(index)` - Η λειτουργία θα επιτρέψει την επεξεργασία σε στοιχείο
- `component.remove(index)` - Η λειτουργία θα αφαιρέσει τον δείκτη

__Καλό να ξέρεις__:

Διάδρομος __must be__ σειρά αντικειμένων. μετά από κλικ στο στοιχείο στο μενού
Υποστηρίζει δυναμική αξιολόγηση του περιεχομένου του `<script type="text/html">`. Το παρακάτω παράδειγμα περιέχει ένα σενάριο με HTML και το στοιχείο αξιολογεί το περιεχόμενο όταν δημιουργείται το στοιχείο (μόνο μία φορά).

```
<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>
```

__Προσθήκη της κλάσης__:

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

__Συγκεντρωτικά Editable__:

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

Χρησιμοποιήστε το με `<ui-component name="listmenueditable">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Denis Granec. Πηγή: The Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

```html 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>
```