j-Input

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

j-input jest wielofunkcyjny input element, który obsługuje wiele funkcji i jest zoptymalizowany do codziennego użytku. j-Textbox i j-DropdownPracuje tylko z jComponent +v17.

Konfiguracja:

type {String} opcjonalny, wartości:
- Puste wartość oznacza default text
- email,
- multiline
- checkbox
- phone
- password
- zip
- date (potrzebny składnik datepicker)
- NEW: datetime (potrzebuje składnika datepicker)
- time (potrzebny składnik timepicker)
- color (potrzebny składnik colorpicker)
- icon (potrzebny składnik faicons)
- emoji (potrzebny składnik emoji)
- url
- number
- number2 (zaniedbany)
- search
- lower
- upper
- slug
- id
- Nowy: radiobutton
- Nowy: tags
- Nowy: tags-lower
- Nowy: tags-upper
- Nowy: tags-id
- Nowy: tags-email
- Nowy: tags-slug
- Nowy: tags-phone
- Nowy: tags-url
required {Boolean} opcjonalny, umożliwia "wymagane" (default: false)
icon {String} opcjonalny, ikona dla etykiety np. home, cog, itp.
Ikony licon {String} opcjonalne, ikonę lewej np. home, cog, itp.
liconclick {String} opcjonalny, droga do metody function(component, input)
Ikony ricon {String} opcjonalne, prawica np. home, cog, itp.
riconclick {String} opcjonalny, droga do metody function(component, input)
label {String} opcjonalny, etykieta (default jest treścią HTML)
autofocus {Boolean} opcjonalny, koncentruje się na wejściu (default: false)
align {String} opcjonalne , left (w oparciu o standard) 2 / right lub 1 / center
after {String} opcjonalny, oznacza to ładunek po etykietowaniu (default: :)
autofill {Boolean/String} opcjonalny, umożliwia funkcję autofill przeglądarki (string będzie używany jako nazwa wejściowa, domyślnie: false)
placeholder {String} opcjonalny, dodaje tekst placeholder do wpisu
maxlength {Number} opcjonalny, ustawiając maksymalną długość czołgów (default: 200)
minlength {Number} opcjonalny, ustawiający minimalną długość ładunków
minvalue {Number} opcjonalny, minimalna wartość dla typu number
maxvalue {Number} opcjonalny, maksymalna wartość dla typu number
increment {Number} opcjonalny, określa wartość zwiększenia (default: 1)
validate {String} opcjonalny, warunek weryfikacji wartości, może zawierać link do function(value) lub !!value.match(/[a-z]+/)
format {String} opcjonalne, formatowanie wyjściowe itp. dla date Tytuł : yyyy-MM-ddDla time Tytuł : HH:mmDla number Możesz zdefiniować maks. decimal (default): auto)
disabled {Boolean} opcjonalny, wyłącza ten składnik
error {String} opcjonalny, dodaje tekst string pod składnikiem
autocomplete {String} opcjonalny, musi zawierać link do funkcji, jest uruchomiony na wydarzeniach focus
spaces {Boolean} opcjonalny, umożliwia przestrzenie w przeciwnym razie usuwa je (default: true)
innerlabel {Boolean} opcjonalny, umożliwia etykietę wewnętrzną (default: true)
dirsource {String} opcjonalny, ścieżka do źródła danych lub NEW do function(search, next) (puta musi zawierać / lub NOW: id|name,id|name
dircustom {String/Boolean} jest opcjonalny, może zawierać ścieżkę do function(val, next(new_val)) lub może być Boolean. ta opcja może umożliwić dodanie wartości dostosowanej (wartość nie jest zdefiniowana w źródle danych)
dirrender {String} opcjonalny, ścieżka do function(item, text) (musisz zwrócić HTML dla j-Directory), ta funkcja może wpływać na listę elementów w j-Directory
dirminwidth {Number} opcjonalny, minimalna szerokość dla j-Directory, domyślnie: 200
dirmaxwidth {Number} opcjonalny, maksymalna szerokość dla j-Directory
diroffsety {Number} opcjonalny, Y offset (default: 0)
diroffsetx {Number} opcjonalny, X offset (default: 0)
dirplaceholder {String} opcjonalny, miejsce dla j-Directory
dirempty {String} opcjonalny, dodaje puste pole do j-Directory
dirkey {String} opcjonalny, nazwa kluczowa do czytania text w dirsource (default: name)
dirvalue {String} opcjonalny, nazwa kluczowa do czytania value w dirsource (default: id)
direxclude {Boolean} opcjonalny, wyklucza aktualną wartość z j-Directory (default: true)
dirsearch {Boolean|String} opcjonalny, można wyłączyć wyszukiwanie w j-Directory (default: true) lub {String} (nazwa kluczowa) może mapować wartość wyszukiwania
dirraw {Boolean} opcjonalny, może wyłączyć ucieczkę przedmiotów dla j-Directory (default: false)
dirdetail {String} opcjonalny, łącznik do funkcji function(val, next(NEW_TEXT)) (zaznaczony do dirsource)
Opcjonalna metoda dirfilter {String}, wstępna metoda filtra, na przykład: value.id !== 2 (zaznaczona do dirsource)
NEW: dirrawrender {Boolean} opcjonalny, jeśli dirsource nie zawiera wartości, będzie to wartość surowa (default: true)
mask {String} opcjonalny, może zawierać maskę w formie ###/## (# zastępuje się ładownikiem)
maskregexp {String} opcjonalny, może zawierać RegExp dla każdego czaru w formularzu \d,\d,\d,null,\d,\d (, jest delimiter)
masktidy {Boolean} opcjonalny, składnik zwraca tylko surowe czołgi bez stałych czołów (default: false)
autosource {String} jest ścieżką do źródła wyszukiwania Array (NEW) lub function(search, render(arr)) dla dynamicznego wyszukiwarki
autovalue {String} - trasa właściwości dla wartości w autosource, standard: name
Metoda autoexec {String} - metoda function(item, next(value_to_input))
searchalign {Number} Możesz dostosować ikonę type:search Wystarczy zostawić (2lub prawidłowo (1i default)
forcevalidation {Boolean} umożliwia weryfikację siły dla phone i email (default: true)
camouflage {Boolean|String} maskuje wartość w wejściu po wydaniu zdarzenia blur (default: false) lub może być String, który będzie używany jako kamuflaż
monospace {Boolean} umożliwia czcionkę monospaced (default: false)
multiple {Boolean} umożliwia skrzynki kontrolne, jeśli dirsource nie jest pusty
tabindex {Number} dodaje indeks tab (default: 0)
tabs {Boolean} umożliwia karty dla multiliny (default: true)
readonly {Boolean} Blok polu tekstowego (default: false)
transform {String} link do function(value, config) do przekształcenia wartości wprowadzonych
multiline {Boolean} działa tylko z typem radiobutton
separator {String|Boolean} - oddzielnik dla wielokrotnych wartości
realtime {Boolean} umożliwia wiązanie w czasie rzeczywistym (default: true)
exec {String} to link do function(value, element), który zostanie oceniony, jeśli wpływa na

Interesujące jest:

type:date potrzebny datepicker składnik
type:time potrzebny timepicker składnik
dirsource:path.to.datasource potrzebny directory składnik
Jeśli licon lub ricon zaczyna się od !, to składnik daje wartość surową zamiast icon.
Klasa ui-input-ok wiąże się, gdy wpis jest zatwierdzony i wypełniony
SET('path', 'camouflage', 'show'); wykazuje wartość 2000 ms

https://www.youtube.com/watch?v=Ne3ezaP0w34

Użyj go z <ui-component name="input">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

<ui-component name="LAZY directory" config="placeholder:Search..."></ui-component>
<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY icons"></ui-component>

<div style="width:400px">
	<ui-component name="input" path="form.framework" config="placeholder:Choose a framework;dirsource:frameworks" class="m">Framework</ui-component>
	<ui-component name="input" path="form.terms" config="type:checkbox" class="m">I agree with terms</ui-component>
	<ui-component name="input" path="form.notes" config="type:multiline;innerlabel:1;placeholder:Enter notes" class="m">Notes</ui-component>
	<ui-component name="input" path="form.frameworks" config="placeholder:Select frameworks;multiple:true;dirsource:frameworks">Frameworks</ui-component>
	<br />
	<ui-component name="input" path="form.city" config="required:1;placeholder:Where do you live?;dirsource:cities;dircustom:true">City</ui-component>
	<br />
	<ui-component name="input" path="cities" config="type:tags;placeholder:Type a tag and press enter">Tags</ui-component>
	<br />
	<ui-component name="input" path="form.date" config="placeholder:Enter date;type:date;required:true;innerlabel:true">Date</ui-component>
	<br />
	<ui-component name="input" path="form.search" config="placeholder:Search...;type:search;innerlabel:true">Search</ui-component>
	<br />
	<ui-component name="input" path="form.password" config="placeholder:Type a password...;type:password">Password</ui-component>
	<br />
	<ui-component name="input" path="form.zip" config="mask:###-##;maskregexp:\d,\d,\d,null,\d,\d">ZIP</ui-component>
	<br />
	<ui-component name="input" path="form.email" config="placeholder:example@email.com;type:email">Email</ui-component>
	<br />
	<ui-component name="input" path="form.phone" config="placeholder:+421;type:phone">Phone</ui-component>
	<br />
	<ui-component name="input" path="form.radio" config="type:radiobutton;dirsource:Male,Female,Unknown">Gender</ui-component>
	<br />
	<ui-component name="input" path="form.radio" config="type:radiobutton;dirsource:Male,Female,Unknown;multiline:1">Gender</ui-component>
	<br />
	<div style="width:150px">
		<ui-component name="input" path="form.age" config="type:number;innerlabel:false">Your age</ui-component>
	</div>
</div>

<script>
	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var cities = ['Slovakia', 'Poland', 'Hungary', 'Germany'];
	var form = {};
	form.age = 30;
</script>