j-ListMenuEditable

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Състав за редактиращ списък

Можете да промените CSS за вашите нужди.

Конфигуриране:

iconremove {String} опция, промяна на иконата на бутона remove. това е фонавесен икона без частта на ti- (предварително: times)
defaulticon {String} опция, промяна на иконата на бутона edit (дефолт: pencil-alt)
addicon {String} опционално, ще промени иконата на бутона add (предварително: 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 Пътят към функцията() изпълнява, когато потребителят кликне върху иконата 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>

Добавяне на класиране:

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

Съвместно редактиране:

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

Използвайте го с <ui-component name="listmenueditable">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Автор: Денис Гран. източник: The Componentator Съставни съставки, лиценз на MIT.

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>