j-ListForm

Konfiguration:

• autofocus {String/Boolean} konzentriert sich auf das erste Eingabeelement, string bedeutet einen benutzerdefinierten Selektor (Default: false)
• empty {String} leer Liste Text (Default: ---)
• default {Boolean} erfüllt die DEFAULT() Methode für den Formbereich (Default: true)
• required {Boolean} wird "bedarf" sein (Default: false)
• enter {Boolean} ermöglicht die Verwendung von enter als Unterlage (Default: false)
• disabled {Boolean} deaktiviert die Kontrolle (default: false)
• formclass {String} eine angepasste Klasse für den Container
• itemclass {String} eine angepasste Klasse für den Inhalt
• create {String} eine Verbindung zu einer Funktion function(empty_object, callback(DEFAULT_ITEM_OBJECT), arr) (null Werte Skips erstellen)
• submit {String} eine Verbindung zu einer Funktion function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (null Wertschöpfe Updates)
• update {String} eine Verbindung zu einer Funktion function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (null Wertschöpfe Updates)
• remove {String} eine Verbindung zu einer Funktion function(remove_item, callback(really_remove?), arr)
• selector {String} ein jQuery-Selektor für die angepasste Vorlage (außer der Komponente). custom template in Datenverbindung
• footertop {Boolean} bewegt den Fuß auf der Spitze des Komponenten (Default: false)
• move {String} eine Verbindung zu einer Funktion function(items)
• newbie {String} Ein Name für jedes neue Element (es wird immer enthalten true Wert)
• plugin {String} ein angepaster Plugin Name innerhalb der Komponente (Default: component.ID)
• invalidform {Boolean} deaktiviert die j-Validate Komponente, wenn die j-ListForm in der Einstellung ist (Default: false)
• NEW: delay {Number} ursprüngliche Verzögerung für die Anzeige von Details (Default: 1000 ms)

Die Komponente muss 3 Modelle in <script type="text/html"> festgelegt haben:

• 1 zuerst - mit einem Tangular-Template für die Renderung von Elementen
• 2 Sekunde - eine Form mit Komponenten (die Form wird in isolierter Umgebung gefüllt)
• 3 Footer - ein Footer mit einem Button für das create Element

Gut zu wissen:

Die Komponente beobachtet ein Klicks-Event auf allen Buttonen mit dem name-Attribute:

• name="submit" führt Daten an das Modell ein
• name="update" führt Daten an das Modell ein
• name="remove" entfernt das aktuelle Element aus dem Modell
• name="cancel" abgelehnt
• name="create" schafft eine leere Form
• form enthält die ui-listform-new Klasse, wenn ein neues Element erstellt wird

Aufzeichnung von Buttons:

• name="remove" Entfernen
• name="up" bewegt das Element auf
• name="down" bewegt das Element nach unten

Methoden :

• NEW: component.add() öffnet ein Formular für die Erstellung von Aufzeichnungen

Verwenden Sie es mit <ui-component name="listform">. 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: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

<style>
	.ui-listform-item { height: 26px; line-height: 26px; overflow: hidden; padding: 0 5px; }
	button { background-color: white; border-radius: 2px; border: 1px solid #E0E0E0; font-size: 12px; height: 28px; line-height: 27px; padding: 0 10px; }
	button i { margin-right: 5px; }
	button:disabled { color: gray; background-color: #F8F8F8; }
	.ui-dark button { background-color: #303030; border-color: #454545; }
	.ui-dark button:disabled { background-color: #252525; color: #404040; }
</style>

<div style="width:400px">

	<ui-component name="listform" path="users" config="autofocus:1">

		<!-- LIST RENDERING -->
		<script type="text/html">
			<div>
				<div class="pull-right">
					<button name="up"><i class="ti ti-arrow-up"></i></button>
					<button name="down"><i class="ti ti-arrow-down"></i></button>
					<button name="remove"><i class="ti ti-remove"></i></button>
				</div>
				{{ name }}
			</div>
		</script>

		<!-- FORM RENDERING -->
		<script type="text/html">
			<div class="padding">
				<ui-component name="input" path="?.name" config="required:1" default="''" class="m">Name</ui-component>
				<ui-component name="validate" path="?">
					<button name="submit"><i class="ti ti-save"></i>Save</button>
					<button name="remove">Remove</button>
					<button name="cancel">Cancel</button>
				</ui-component>
			</div>
		</script>

		<!-- FOOTER -->

		<script type="text/html">
			<div style="margin-top:10px"><button name="create"><i class="ti ti-plus-circle green"></i>Create new</button></div>
		</script>

	</ui-component>
	<hr />
	<ui-bind path="users" config="text:STRINGIFY(value)" style="font-family:monospace" class="block"></ui-bind>

</div>

<script>

	var users = [{ name: 'Total.js' }, { name: 'Flow' }, { name: 'jComponent' }];

</script>