j-FormTab

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

Компонентът премества съдържанието на този компонент под етикета <body> (заради позиционирането)
Съставът очаква да се

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

width {Number} Ширина на формата
widthlg {Number} Ширина на формата за lg Съоръженията (по подразбиране са config.width)
widthmd {Number} Ширина на формата за md Съоръженията (по подразбиране са config.width)
widthsm {Number} Ширина на формата за sm Съоръженията (по подразбиране са config.width)
widthxs {Number} Ширина на формата за xs Съоръженията (по подразбиране са config.width)
height {Number} Височина на формата
heightlg {Number} Височина на формата за lg Съоръженията (по подразбиране са config.height)
heightmd {Number} Височина на формата за md Съоръженията (по подразбиране са config.height)
heightsm {Number} Височина на формата за sm Съоръженията (по подразбиране са config.height)
heightxs {Number} Височина на формата за xs Съоръженията (по подразбиране са config.height)
margin {Number} е стандартна маржа между формулярите (дефолт: 10)
marginlg {Number} е стандартна маржа за устройства на lg (дефолт: config.margin)
marginmd {Number} е стандартна маржа за устройства на md (дефолт: config.margin)
marginsm {Number} е стандартна маржа за устройства на sm (дефолт: config.margin)
marginxs {Number} е стандартна маржа за устройства на xs (дефолт: config.margin)
marginfullscreen {Number} е стандартна маржа за пълен екран (дефолт: 20)
marginfullscreenlg {Number} е стандартна маржа на пълния екран за устройства lg (предварително: config.marginfullscreen)
marginfullscreenmd {Number} е стандартна маржа на пълния екран за устройства md (предварително: config.marginfullscreen)
marginfullscreensm {Number} е стандартна маржа на пълния екран за устройства sm (предварително: config.marginfullscreen)
marginfullscreenxs {Number} е стандартна маржа на пълния екран за устройства xs (предварително: config.marginfullscreen)
submit {String} връзка към глобална функция function(meta, data, hide) и се изпълнява, ако натиснете бутона за подаване
cancel {String} свързва към глобална функция и се изпълнява, ако натиснете бутона cancel
enter {Boolean} автоматично улавя ключа на enter и всъщност кликне върху бутона за подаване (дефолт: false)
onclose {String} връзка към функцията function(item, close) (опционално)
onopen {String} връзка към функцията function(item, el) (опционално)
autofocus {Boolean} позволява автоматично фокусиране за първия вход (предварително: false)
NEW right {Number} десният марж (дефулт: 0)
NEW bottom {Number} дъно марж (дефулт: 0)
NEW useminheight {Boolean} използва min-height вместо height CSS атрибут (предварително: false)

Добре е да се знае:

Всеки елемент с клас cancel ще се използва като бутон за отмяна

Източник на данни:

[
	{
		// Required
		id: 'YOUR_ID_OF_THE_FORM',
		name: 'YOUR_NAME_OF_THE_FORM',

		// Optional
		minimized: true,
		data: { blabla: '"data" will be cloned into the form scope' }
		// NEW: scope: false (disables scope)
		// NEW: scope: mycustomscopepath
	}
]

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

example.html

<ui-component name="formtab" path="common.formtab">
	<script type="text/html">
		<div class="padding">
			YOUR CONTENT HERE.
		</div>
	</script>
</ui-component>

<script>
	var common = {};
	common.formtab = [];
	common.formtab.push({ id: '1', name: 'New message' });
	common.formtab.push({ id: '2', minimized: true, name: 'Message: John Deal' });
	common.formtab.push({ id: '3', minimized: true, name: 'Message: Denis Granec' });
</script>