j-Editable

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

Ez az összetevő a editable osztályú összes elemet szerkesztheti. data-bind vagy dinamikus értékekkel működik.

konfiguráció:

autofocus {Boolean} az első elemre összpontosít (default: false)
validate {Boolean} nem engedélyezheti a validációt (default: true)
disabled {Boolean} lehet letiltani a szerkesztés (ez hozzáteszi a ui-editable-disabled és a ui-editable-enabled osztályok), alapértelmezett: false
changed {String} opcionális, a módszerhez vagy úthoz való link --> csak változó értékekkel tartalmazza az objektumot
enter {String} opcionális, egy link a módszerhez method(path, value, el)a módszer végrehajtása, ha a felhasználó nyomja ENTER
escape {String} opcionális, egy link a módszerhez method(path, value, el)a módszer végrehajtása, ha a felhasználó nyomja ESC
can {String} opcionális, egy link a módszerhez method(opt, el) Visszatérni kell booleanEz azt jelenti, can edit?
error {String} opcionális, a method(el, isInvalid, meta) módszerhez való linket akkor értékelik, ha az elem nem érvényes, és fordítva.
NEW class {String} opcionális, az osztály neve a ui-editable-CLASS űrlapban szerepel (előzetes: default)

A data-editable tulajdonság a viselkedés leírását írja le:

path {String} egy relatív út a tulajdonság (a data-bind automatikusan örökölhető)
required {Boolean} opcionális, lehetővé teszi a „követelt” (default: false)
type {String} opcionális, lehet string (default), date, number, boolean, email vagy html NEW tags
can {String} opcionális, egy út a function(opt, el) vissza kell boolean, ez azt jelenti, hogy can edit?
save Választható, egy út a function(opt, accepted(boolean)), accepted A funkciót értékelni kell
format {String} opcionális, a date formátum, alapértelmezett: yyyy-MM-dd
dirsource {String} opcionális, az adatforráshoz vezető út
dircustom {String/Boolean} opcionális, tartalmazhat egy utat a function(val, next(new_val)) vagy lehet Boolean. Ez az opció lehetővé teszi a hozzáadott értéket (érték nem meghatározott adatforrás)
dirrender {String} opcionális, egy út a function(item, text) (a j-Directory HTML-t vissza kell adni), ez a funkció befolyásolhatja az elemek listáját a j-Directory
dirminwidth {Number} opcionális, minimum szélesség a j-Directory, alapértelmezett: 200
dirmaxwidth {Number} opcionális, a maximális szélesség a j-Directory
dirplaceholder {String} opcionális, egy helytartó a j-Directory
dirempty {String} opcionális, üres mezőt ad a j-Directory számára
dirkey {String} opcionális, a text olvasásához szükséges kulcsszavak a dirsource-ben (előzetes: name)
dirvalue {String} opcionális, a value olvasásához szükséges kulcsszavak a dirsource-ben (előzetes: id)
dirsearch {Boolean} opcionális, nem engedélyezhető a keresés a j-Directory
autosource {String} a search funkcióhoz vezető út a autocomplete, function(search, render(arr))
autovalue {String} az értéket a autosource
maxlength {Number} egy maxhossz
minvalue {Number} egy min. értéke a szám típusa (default: undefined)
maxvalue {Number} a maximális érték a szám típus (default: undefined)
rebind {Boolean} ha a true csak a data-bind elemet kötődik (elsődleges: 0)
validate {String} opcionális, az érték érvényesítésének feltétele, tartalmazhat egy linket a function(value) vagy !!value.match(/[a-z]+/)
multiline {Boolean} opcionális, lehetővé teszi multiline + appends osztály editable-multiline (inline-block + width:100%) amikor szerkesztés (default: false)
raw {Boolean} opcionális, amikor true akkor a jelenlegi HTML tartalma lesz, mint egy helytartó, ha az érték nullable (default: true)
accept {String} opcionális, az érték elfogadásának feltétele, tartalmazhat egy linket a function(value) vagy !!value.match(/[a-z]+/) hasonló a validate
empty {String} opcionális, üres értéket engedélyez, és tartalmazhat üres címke vagy 1 vagy true az automatikus rebind kötődés
invalid {String} opcionális, a method(el, isInvalid, meta) módszerhez való linket akkor értékelik, ha az elem nem érvényes, és fordítva.

módszerek:

NEW: component.changed() visszatér egy módosított adatot tartalmazó objektumhoz

Jó tudni:

ha a felhasználó néhány key nyomást, akkor a szerkeszthető elem tartalmazza a keypressed osztály, amíg nem hagyja el a vezérlő
Minden változó elem tartalmazza a changed osztályot
Ha az összetevő változtat néhány értéket, a fő elem tartalmazza a ui-editable-changed osztály
ha a data-bind és a empty-es elemet tartalmazza, akkor a fókusz után törlődik.
Új támogatás tags Mostantól csak a támogatás rebind és data-bind(Az adatok összekapcsolása template A {jQuery selector} Munkák a +v18)
NEW ha az elem ( vagy a szülő, vagy a szülők) tartalmazza a data-disabled="1" attribútumot, a vezérlés kikapcsolódik
NEW rejtett és törölt elemek nem érvényesülnek

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

<style>
	.changed {}
	.changed::after { float: right; content: '+'; margin-left: 5px; font-weight: normal; color: orange; }
</style>

<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY directory"></ui-component>

<ui-component name="editable" path="form">
	<div style="width:500px;padding:10px;border:1px solid #E0E0E0">

		<div class="row">
			<div class="col-xs-3">
				Name:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.name" config="html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Email:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.email" config="html" class="editable block" data-editable="required:1;type:email"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Nickname:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.nickname" config="empty:Nickname;html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Framework:
			</div>
			<div class="col-xs-9">
				<ui-bind class="editable block" config="html;empty:Choose a framework;change:renderframework" path="form.frameworkid" data-editable="dirsource:frameworks;"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Country:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.countries" config="template:{#countrytags}" class="editable block" data-editable="rebind:1;dirsource:countries;type:tags"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Date:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.date" config="html:(new Date() || value).format('yyyy-MM-dd')" class="editable block" data-editable="type:date"></ui-bind>
			</div>
		</div>
	</div>
	<pre><ui-bind path="form" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-component>

<script type="text/html" id="countrytags">
	{{ foreach m in value }}<span class="editable-tag"><i class="ti ti-times"></i>{{ m }}</span>{{ end }}
</script>


<script>

	// Alternative to tags (ui-bind path="path" config="change:myfunc")
	function myfunc(data, path, el) {
		if (!data)
			return el.html('');
		var template = '<span class="tag"><i class="ti ti-times"></i>{0}</span>';
		var html = '';
		for (var i = 0; i < data.length; i++)
			html += template.format(data[i]);
		el.html(html);
	}

	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var countries = ['Slovakia', 'Poland', 'Hungary', 'Germany', 'USA', 'Austria', 'Poland', 'Czechia'];
	var form = {};
	form.date = new Date();
	form.name = 'Peter Širka';
	form.countries = ['Slovakia', 'Hungary'];
	form.frameworkid = 0;

	function renderframework(value, path, el) {
		return value ? frameworks.findValue('id', value, 'name', DEF.empty) : DEF.empty;
	}

</script>