ForgeКомпоненти
bg
English Español Slovenčina Deutsch Français Italiano Português Polski Čeština Nederlands Română Magyar Svenska Ελληνικά Български

Компоненти

j-Input

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

j-Input е многофункционален input компонент, който поддържа много функции и е оптимизиран за ежедневна употреба. j-Textbox и j-DropdownРаботи само с jComponent +v17.


Конфигуриране:

  • type {String} опция, стойности:
    • Празна стойност означава дефолт text
    • email,
    • multiline
    • checkbox
    • phone
    • password
    • zip
    • date (необходим компонент на datepicker)
    • NEW: datetime (необходим компонент на datepicker)
    • time (необходим компонент на timepicker)
    • color (необходим компонент на colorpicker)
    • icon (необходим компонент на faicons)
    • emoji (необходим компонент на emoji)
    • url
    • number
    • number2 (не е възможно да се
    • search
    • lower
    • upper
    • slug
    • id
    • Новата е: radiobutton
    • Новата е: tags
    • Новата е: tags-lower
    • Новата е: tags-upper
    • Новата е: tags-id
    • Новата е: tags-email
    • Новата е: tags-slug
    • Новата е: tags-phone
    • Новата е: tags-url
  • required {Boolean} опционално, позволява "необходимо" (дефолт: false)
  • icon {String} опция, икона за етикет например home, cog, и т.н.
  • licon {String} опционален, лев икон например home, cog, и т.н.
  • liconclick {String} опционален, пътят към метода function(component, input)
  • ricon {String} опция, дясна икона, например home, cog, и т.н.
  • riconclick {String} опционален, пътят към метода function(component, input)
  • label {String} опция, етикет (предварително е HTML съдържание)
  • autofocus {Boolean} е опционален, фокусира се върху входа (предварително: false)
  • align {String} Оптималната left и по подразбиране, 2 / right или 1 / center
  • after {String} е опционален, което означава захранване след етикета (дефолт: :)
  • autofill {Boolean/String} опционално, позволява функцията за автофил на браузъра (string ще се използва като име за вход, по подразбиране: false)
  • placeholder {String} опционално, добавя текст на placeholder към входа
  • maxlength {Number} опционално, определяне на максимална дължина на кабелите (предварително: 200)
  • minlength {Number} опция, определя минимална дължина на камионите
  • minvalue {Number} опция, минимална стойност за тип number
  • maxvalue {Number} опция, максимална стойност за тип number
  • increment {Number} опционално, определя стойност за увеличаване (предварително: 1)
  • validate {String} опция, условие за валидиране на стойността, може да съдържа връзка към function(value) или !!value.match(/[a-z]+/)
  • format {String} Опционално, изходни форматиране и т.н. date Типът е: yyyy-MM-ddЗа time Типът е: HH:mmЗа number Можете да определите максималните децимали (дефолт: auto)
  • disabled {Boolean} опционално, деактивира този компонент
  • error {String} опционално, добавя текст на string под компонента
  • autocomplete {String} е опционален, трябва да съдържа връзка към функция, се излъчва на focus събитие
  • spaces {Boolean} е опционален, позволява пространства в противен случай те се отстраняват (предварително: true)
  • innerlabel {Boolean} опция, позволяваща вътрешна етикета (дефолт: true)
  • dirsource {String} опционален, път към източник на данни или NEW до function(search, next) (пътят трябва да съдържа / или NOW: id|name,id|name
  • dircustom {String/Boolean} опция, може да съдържа път към function(val, next(new_val)) или може да бъде Boolean. Тази опция може да позволи добавяне на персонализирана стойност (цена, която не е дефинирана в източника на данни)
  • dirrender {String} опционален, пътят към function(item, text) (може да се върне HTML за j-Directory), тази функция може да повлияе на списъка с елементи в j-Directory
  • dirminwidth {Number} опционално, минимална ширина за j-Directory, по подразбиране: 200
  • dirmaxwidth {Number} опция, максимална ширина за j-Directory
  • diroffsety {Number} опция, Y отстъпка (дефолт: 0)
  • diroffsetx {Number} опция, X отстъпка (дефолт: 0)
  • dirplaceholder {String} опция, място за j-Directory
  • dirempty {String} опционално, добавя празно поле за j-Directory
  • dirkey {String} опционално, ключово име за четене на text в dirsource (предварително: name)
  • dirvalue {String} опционално, ключово име за четене на value в dirsource (предварително: id)
  • direxclude {Boolean} опционално, изключва текущата стойност от j-Directory (предварително: true)
  • dirsearch {Boolean|String} опционално, може да деактивира търсенето в j-Directory (предварително: true) или {String} (ключово име) може да има стойност за търсене
  • dirraw {Boolean} опционално, може да деактивира изтичането на елементи за j-Directory (предварително: false)
  • dirdetail {String} опционално, връзка към функцията function(val, next(NEW_TEXT)) (целенасочено за dirsource)
  • dirfilter {String} опционален, инлайн филтър условен метод, например: value.id !== 2 (целенасочен за dirsource)
  • NEW: dirrawrender {Boolean} опция, ако dirsource не включва стойност тя ще направи сурова стойност (дефолт: true)
  • mask {String} е опционален, може да съдържа маска във формата на ###/## (# се заменя с захар)
  • maskregexp {String} опционално, може да съдържа RegExp за всеки чар във формата на \d,\d,\d,null,\d,\d (, е делимитер)
  • masktidy {Boolean} опционално, компонентът връща само сурови камери без фиксирани камери (дефолт: false)
  • autosource {String} е пътят към източника на търсене Array (NEW) или function(search, render(arr)) за динамично търсене
  • autovalue {String} е свойствен път за стойността в autosource, по подразбиране: name
  • autoexec {String} Методът на function(item, next(value_to_input))
  • searchalign {Number} Може да се свърже икона type:search Да си тръгнем (2или правилно (1и дефолт)
  • forcevalidation {Boolean} позволява валидиране на сила за phone и email (предварително: true)
  • camouflage {Boolean|String} маскира стойността на входа след като се разгърне събитие blur (предварително: false) или може да бъде String, което ще се използва като камуфлаж
  • monospace {Boolean} активира monospaced шрифт (дефолт: false)
  • multiple {Boolean} дава възможност за проверка, ако dirsource не е празен
  • tabindex {Number} добавя таб индекс (предварително: 0)
  • tabs {Boolean} позволява табчета за мултилин (предварително: true)
  • readonly {Boolean} Блокиране на текстовото поле (дефолт: false)
  • transform {String} е връзка към function(value, config) за преобразуване на въведените стойности
  • multiline {Boolean} работи само с тип radiobutton
  • separator {String|Boolean} - разделител за рендерирани стойности
  • realtime {Boolean} позволява свързване в реално време (предварително: true)
  • exec {String} е връзка към function(value, element) която ще бъде оценена, ако входът е засегнат

Интересното е:

  • type:date изисква datepicker компонент
  • type:time изисква timepicker компонент
  • dirsource:path.to.datasource изисква directory компонент
  • Ако licon или ricon започва с !, тогава компонентът дава сурова стойност вместо icon.
  • Класа ui-input-ok се свързва, когато входът е валидиран и попълнен
  • SET('path', 'camouflage', 'show'); показва стойността за 2000 ms
https://www.youtube.com/watch?v=Ne3ezaP0w34

Използвайте го с <ui-component name="input">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>