j-ListForm

konfiguráció:

• A autofocus {String/Boolean} az első beviteli elemre összpontosít, a string egyéni kiválasztót jelenti (első: false)
• empty {String} üres lista szöveg (default: ---)
• A default {Boolean} a DEFAULT() módszert alkalmazza a formaszámmal (default: true)
• required {Boolean} vezérlő lesz "követelt" (default: false)
• A enter {Boolean} lehetővé teszi a enter benyújtását (default: false)
• A disabled {Boolean} megakadályozza az ellenőrzést (default: false)
• formclass {String} egy speciális osztály a formanyomtatvány
• itemclass {String} egy speciális osztály az elem tartály
• create {String} A funkcióhoz való kapcsolódás function(empty_object, callback(DEFAULT_ITEM_OBJECT), arr) (null Értékesítő hajók létrehozása)
• submit {String} egy link a funkció function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (null értékes hajók frissítése)
• update {String} egy link a funkció function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (null értékes hajók frissítése)
• remove {String} A funkcióhoz való kapcsolódás function(remove_item, callback(really_remove?), arr)
• selector {String} egy jQuery kiválasztó a személyre szabott sablon (a komponens kívül). custom template A adatköteles
• A footertop {Boolean} mozgatja a lábát az összetevő tetején (default: false)
• move {String} A funkcióhoz való kapcsolódás function(items)
• newbie {String} egy ingatlan neve minden új elem (ez mindig tartalmazza a true értéket)
• plugin {String} egy személyre szabott plug-in nevét a komponens (default: component.ID)
• invalidform {Boolean} kikapcsolja a j-Validate összetevőt, ha a j-ListForm szerkesztési módban van (például: false)
• NEW: delay {Number} kezdeti késleltetése a részletek megjelenítéséhez (előzetes: 1000 ms)

Az összetevőnek meg kell határoznia a <script type="text/html">-ben beágyazott 3 mintát:

• 1 első - a Tangular mintával az elem rendereléséhez
• 2 másodperc - az összetevőkkel ellátott forma (a formát elszigetelt térfogatban fogják öntözni)
• 3 footer - egy footer a create elem gombjával

Jó tudni:

A komponens egy kattintási eseményt figyelemmel kísér minden gombra, amelyben a name attribútum van:

• A name="submit" adatainak benyújtását / mentését végzi a modellnek
• A name="update" adatainak benyújtását / mentését végzi a modellnek
• A name="remove" eltávolítja a jelenlegi elemet a modellből
• name="cancel" törlése
• A name="create" egy üres formát hoz létre
• form tartalmazza a ui-listform-new osztályot egy új elem létrehozásakor

A gombok listája:

• name="remove" eltávolítja az elemet
• A name="up"-es elem felfelé mozog
• A name="down" az elemet lefelé mozgatja

A módszerek:

• NEW: component.add() megnyitja a rekord létrehozására szolgáló űrlapot

Használja a <ui-component name="listform">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.

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