j-Editable

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Questo componente può modificare tutti gli elementi con la classe editable. funziona con i valori di data-bind o dinamico.

Configurazione:

autofocus {Boolean} si concentra sul primo elemento (default: false)
validate {Boolean} può disabilitare la validazione (default: true)
disabled {Boolean} può disattivare l'editing (aggiunge le classi ui-editable-disabled e ui-editable-enabled), di default: false
changed {String} opzionale, un collegamento a un metodo o percorso --> contiene l'oggetto con valori cambiati solo
enter {String} opzionale, un collegamento a un metodo method(path, value, el), il metodo viene eseguito se l'utente premere ENTER
escape {String} opzionale, un collegamento a un metodo method(path, value, el), il metodo viene eseguito se l'utente premere ESC
can {String} opzionale, un collegamento al metodo method(opt, el) deve restituire boolean, cioè can edit?
error {String} opzionale, un collegamento al metodo method(el, isInvalid, meta) viene valutato quando l'articolo è invalido e viceversa
NEW class {String} opzionale, aggiunge un nome di classe nel modulo ui-editable-CLASS (default: default)

L'attribuzione data-editable descrive il comportamento:

path {String} un percorso relativo alla proprietà (può essere ereditato automaticamente da data-bind)
required {Boolean} opzionale, permette "necessario" (default: false)
type {String} opzionale, può essere string (default), date, number, boolean, email o html NEW tags
can {String} opzionale, un percorso a function(opt, el) deve restituire boolean, cioè can edit?
save {String} opzionale, un percorso a function(opt, accepted(boolean)), la funzione accepted deve essere valutata
format {String} opzionale, un formato per date, predefinito: yyyy-MM-dd
dirsource {String} opzionale, percorso verso una fonte di dati
dircustom {String/Boolean} opzionale, può contenere un percorso a function(val, next(new_val)) o può essere Boolean.Questa opzione può consentire l'aggiunta di un valore personalizzato (valore non definito nella fonte dati)
dirrender {String} opzionale, un percorso a function(item, text) (deve restituire HTML per j-Directory), questa funzione può influenzare l'elenco degli articoli in j-Directory
dirminwidth {Numero} opzionale, una larghezza minima per j-Directory, standard: 200
dirmaxwidth {Numero} opzionale, una larghezza massima per j-Directory
dirplaceholder {String} opzionale, un contenitore di spazio per j-Directory
dirempty {String} opzionale, aggiunge un campo vuoto per j-Directory
dirkey {String} opzionale, un nome chiave per la lettura di text in dirsource (default: name)
dirvalue {String} opzionale, un nome chiave per la lettura di value in dirsource (default: id)
dirsearch {Boolean} opzionale, può disattivare la ricerca per j-Directory
autosource {String} un percorso alla funzione search in autocomplete, function(search, render(arr))
autovalue {String} un percorso di proprietà per il valore in autosource
maxlength {Numero} una lunghezza massima
minvalue {Numero} un valore min. per il tipo di numero (default: undefined)
maxvalue {Numero} un valore massimo per il tipo di numero (default: undefined)
rebind {Boolean} se true rimbone data-bind solo su questo elemento (default: 0)
validate {String} opzionale, una condizione per la validazione del valore, può contenere un link a function(value) o !!value.match(/[a-z]+/)
multiline {Boolean} opzionale, consente multiline + append classe editable-multiline (inline-block + width:100%) quando si edita (default: false)
raw {Boolean} opzionale, quando true allora il contenuto HTML corrente sarà come localizzatore se il valore è nullable (default: true)
accept {String} opzionale, una condizione per l'accettazione di valore, può contenere un collegamento a function(value) o !!value.match(/[a-z]+/) è simile a validate
empty {String} opzionale, consente valore vuoto e può contenere etichetta vuota o 1 o true per auto rebind di legame
invalid {String} opzionale, un collegamento al metodo method(el, isInvalid, meta) viene valutato quando l'articolo è invalido e viceversa

Metodi:

NEW: component.changed() restituisce un oggetto con dati modificati

Buono sapere:

Se l'utente premere un po 'di key, allora l'elemento modificabile contiene la classe keypressed finché non ha lasciato il controllo.
Ogni elemento modificato contiene la classe changed
Se il componente cambia alcuni valori, l'elemento principale contiene la classe ui-editable-changed
se l'elemento ha data-bind con empty, sarà rimosso dopo il focus
NEW ora supporta il tipo tags. per ora supporterà solo con rebind e data-bind. (data-bind template con {jQuery selector} lavori da +v18)
NEW se l'elemento (o genitore, o genitore) contiene l'attributo data-disabled="1", il controllo sarà disattivato
NEW Elementi nascosti e disabilitati non saranno validati

Utilizzare con <ui-component name="editable">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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>