j-Templates

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

Многобройни шаблони
Стрелба и drop
Къде са скролбарите
Контекстът меню

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

template {String} пътят към гледането на имената
scrollbar {Boolean} използва персонализирана лента за пробиване (предварително: true)
scrolltop {Boolean} се върти нагоре, ако източникът е променян (дефолт: true)
visibleY {Boolean} показва скалбар Y (предварително: true)
margin {Number} е вертикална маржа (дефолт: 0)
parent {String} jQuery селектор за родителски контейнер поради scrollbar (предварително: auto)
contextmenu {String} е пътят към метода function(e) ако потребителят стартира контекстния меню
emptyif {String} е условие за показване на празен съдържание (предварително: !value || !value.length)
drop {String} Пътят към метода function(e, target, selel)
- Методът се оценява, ако потребителят изхвърля някои файлове, след което selel е неразрешен
- или потребителят изтегля и пада елемент с атрибута draggable (аргумент selel) в аргумента target (целта трябва да съдържа клас droppable)

Шаблоните трябва да бъдат определени в <script type="text/html" data-name="NAME_OF_TEMPLATE">Tangular template</script> Този компонент поддържа специален шаблон, наречен empty Това ще бъде видимо, ако emptyif Опцията ще бъде валидна.

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

example.html

<div>
	<span data-name="list" onclick="changetemplate(this)" style="text-decoration:underline;cursor:pointer;margin-right:5px">List</span>
	<span data-name="icons" onclick="changetemplate(this)" style="text-decoration:underline;cursor:pointer">Icons</span>
</div>
<br />

<div style="width:500px;height:300px;border:1px solid #E0E0E0">
	<ui-component name="templates" path="myfiles" config="template:mytemplate;drop:template_drop">

		<script type="text/html" data-name="list">
			<div class="list padding">
				{{ foreach m in value }}
					<div draggable="true"{{ if m.isfolder }} class="droppable"{{ fi }}>{{ m.name }}</div>
				{{ end }}
			</div>
		</script>

		<script type="text/html" data-name="icons">
			<div class="icons padding">
				{{ foreach m in value }}
					<span draggable="true" class="mr5 {{ if m.isfolder }} droppable{{ fi }}"><i class="{{ m.icon }} mr5"></i>{{ m.name }}</span>
				{{ end }}
			</div>
		</script>

	</ui-component>

</div>
<br />
<div><b>Without multiple templates:</b></div>
<div style="width:500px;height:300px;border:1px solid #E0E0E0;margin-top:10px">
	<ui-component name="templates" path="myfiles">
		<script type="text/html">
			<div class="list padding">
				{{ foreach m in value }}
					<div draggable="true"{{ if m.isfolder }} class="droppable"{{ fi }}>{{ m.name }}</div>
				{{ end }}
			</div>
		</script>
	</ui-component>
</div>

<script>
	var myfiles = [{ icon: 'ti ti-folder', name: 'temp', isfolder: true }, { icon: 'ti ti-file', name: 'logo.png' }, { icon: 'ti ti-file', name: 'logo.svg' }];
	var mytemplate = 'list';

	function changetemplate(el) {
		SET('mytemplate', el.getAttribute('data-name'));
	}

	function template_drop(e, target, item) {

		console.log(e, target, item);
		// @target {jQuery element}

		if (item) {
			// @item {jQuery element}
		} else {
			var files = e.target.files || e.originalEvent.dataTransfer.files;
		}
	}

</script>