j-Textbox

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Konfiguracja:

type {String} Opcjonalnie można email, phone, password, date, number, search, lower, upper lub pusty (default)
required {Boolean} (opcjonalnie) umożliwia „wymagane” (default: false)
Ikony icon {String} (opcjonalne) dla etykiet np. home, cog, itp.
Ikony icon2 {String} (opcjonalne) w prawym pudełku np. home, cog, itp.
label {String} (opcjonalna) etykieta (default jest treścią HTML)
autofocus {Boolean} (opcjonalnie) koncentruje się na wejściu (default: false)
align {String} (opcjonalny) left (default), right lub center
autofill {Boolean} (opcjonalnie) umożliwia funkcję autofill przeglądarki (default: false)
placeholder {String} (opcjonalnie) dodaje tekst placeholder do wpisu
maxlength {Number} (opcjonalnie) ustawia maksymalną długość ładunków
minlength {Number} (opcjonalnie) określa minimalną długość ładunków
validation {String} (opcjonalny) warunek dla evaluation np. value.match(/[a-z]+/) !== null
format {String} (opcjonalne) formatowanie wyjścia np. dla dat (default: yyyy-MM-dd)
increment {Boolean} (opcjonalnie) umożliwia kontrolę zwiększenia liczby (default: false)
keypress {Boolean} (opcjonalnie) może wyłączyć wartości wiążące w czasie rzeczywistym (default: true)
delay {Number} (opcjonalnie) może zwiększyć/zmniejszyć opóźnienie w czasie rzeczywistym (default: 300 ms)
disabled {Boolean} (opcjonalnie) wyłącza ten składnik
error {String} (opcjonalnie) dodaje tekst string pod wpisem
iconclick {String} (opcjonalny) musi zawierać link do funkcji
autocomplete {String} (opcjonalny) musi zawierać link do funkcji, jest wywołany na wydarzeniach focus
spaces {Boolean} (opcjonalnie) umożliwia przestrzenie w przeciwnym razie usuwa je (default: true)
Opcjonalny readonly {Boolean}, domyślny false
NEW innerlabel {Boolean} opcjonalny, umożliwia etykietę wewnętrzną (default: true)

Interesujące jest:

type:date wykorzystuje składnik calendar.

Użyj go z <ui-component name="textbox">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

example.html

<div style="width:400px">
	<ui-component name="textbox" path="form.name" config="required:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
	<br />
	<ui-component name="textbox" path="form.email" config="required:true;type:email;autofill:email;icon:envelope;error:E-mail must be in format email@domain.com">E-mail</ui-component>
	<br />
	<ui-component name="textbox" path="form.password" config="type:password">Password</ui-component>
	<br />
	<ui-component name="textbox" path="form.note">Note</ui-component>
	<br />
	<ui-component name="textbox" path="form.phone" config="type:phone">Phone</ui-component>
	<br />
	<ui-component name="textbox" path="form.age" config="type:number;increment:true">Age</ui-component>
	<br />
	<ui-component name="textbox" path="form.search" config="type:search">Search</ui-component>
	<hr />
	<h2>Inner label</h2>
	<ui-component name="textbox" path="form.name" config="required:true;innerlabel:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
</div>

<script>
	var form = {};
	form.email = '@';
	form.age = 30;
</script>