ForgeKomponensek
hu

Komponensek

j-Parts

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Ez a tartalom képes kezelni több parts tárolt a Array és összpontosít egy adott részre.


konfiguráció:

  • parent {String} szülőterület részméretének köszönhetően (default: auto)
  • margin {Number} függőleges margin (default: 0)
  • create {String} egy link a function(part)-hez, ha a rész létrehozott (egy alkalommal)
  • focus {String} egy link a function(part)-hez, akkor fut, ha a rész összpontosít
  • close {String} egy link a function(part)-hez, akkor fut, ha a rész zárva van

Jó tudni 1:

  • Az összes ~PATH~ kifejezés automatikusan helyettesíthető a item.path
  • Az összes ~ID~ kifejezés automatikusan helyettesíthető a item.id

Elemek specifikáció:

  • item.id {String} nagyon fontos, rész azonosító
  • item.blur {String/Function(el, item)} opcionális, egy link a function(element, item) ha a rész összpontosít
  • item.focus {String/Function(el, item)} vagy item.reload {String} opcionális, a function(element, item)-hez való link, ha a rész összpontosít
  • item.remove {String/Function(el, item)} opcionális, a function(element, item) linkje, ha a rész eltávolításra kerül
  • item.html {String} HTML tartalom vagy használata item.url
  • item.import {String} URL-cím a tartalom részéhez
  • item.path {String} opcionális, automatikusan helyettesíti az összes ~PATH~ mondatot
  • item.delay {Number} a invisible osztály eltávolításának késleltetése
  • NEW item.attrd {Object} hozzáadja a data-key attribútumokat az elemhez

bővítése az összetevővel:

  • A item.focused {Boolean} meghatározza, hogy a rész összpontosít-e vagy sem
  • item.element {jQuery} rész elem

módszerek:

  • A component.close(id) befejeződik
  • A component.focus(id) rész
  • component.rename(id, name, [icon]) rész

Használja a <ui-component name="parts">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

example.html
<ui-component name="exec">

	<ui-bind path="myparts" config="template" class="block">
		<script type="text/html">
			{{ foreach m in value }}
			<button class="exec" data-exec="changepart" data-id="{{ m.id }}"><i class="ti ti-times exec mr5" data-prevent="true" data-exec="closepart"></i>{{ m.name }}</button>
			{{ end }}
		</script>
	</ui-bind>
	<br />

	<div style="width:600px;height:300px;border:1px solid #E0E0E0">
		<ui-component name="parts" path="myparts" config="parent:auto"></ui-component>
	</div>

</ui-component>

<script>
	var myparts = [];

	myparts.push({ id: '1', name: 'Part 1', html: '<div class="padding">Part 1</div>' });
	myparts.push({ id: '2', name: 'Part 2', html: '<div class="padding">Part 2</div>' });
	myparts.push({ id: '3', name: 'Part 3', html: '<div class="padding">Part 3</div>' });

	function changepart(el ,e) {
		var id = ATTRD(el);
		SETTER('parts/focus', id);
	}

	function closepart(el, e) {
		var id = ATTRD(el);
		SETTER('parts/close', id);
	}

</script>