j-FormTab

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

O componente move o conteúdo deste componente sob a tag <body> (por causa da posição)
O componente espera array

Configuração:

width {Number} de forma
widthlg {Number} largura de formulário para dispositivos lg (default: config.width)
widthmd {Number} largura de formulário para dispositivos md (default: config.width)
widthsm {Number} largura de formulário para dispositivos sm (default: config.width)
widthxs {Number} largura de formulário para dispositivos xs (default: config.width)
height {Number} de forma
heightlg {Number} altura da forma para dispositivos lg (default: config.height)
heightmd {Number} altura da forma para dispositivos md (default: config.height)
heightsm {Number} altura da forma para dispositivos sm (default: config.height)
heightxs {Number} altura da forma para dispositivos xs (default: config.height)
margin {Number} é uma margem padrão entre os formulários (default: 10)
marginlg {Number} uma margem padrão para dispositivos lg (default: config.margin)
marginmd {Number} uma margem padrão para dispositivos md (default: config.margin)
marginsm {Number} uma margem padrão para dispositivos sm (default: config.margin)
marginxs {Number} uma margem padrão para dispositivos xs (default: config.margin)
marginfullscreen {Number} uma margem padrão para o modo de tela completa (default: 20)
marginfullscreenlg {Number} uma margem de tela completa padrão para dispositivos lg (default: config.marginfullscreen)
marginfullscreenmd {Number} uma margem de tela completa padrão para dispositivos md (default: config.marginfullscreen)
marginfullscreensm {Number} uma margem de tela completa padrão para dispositivos sm (default: config.marginfullscreen)
marginfullscreenxs {Number} uma margem de tela completa padrão para dispositivos xs (default: config.marginfullscreen)
submit {String} liga-se a uma função global function(meta, data, hide) e é executada se o botão de envio for pressionado
cancel {String} liga-se a uma função global e é executada se o botão cancel for pressionado
enter {Boolean} capta a chave enter automaticamente e clique virtualmente no botão de envio (default: false)
onclose {String} um link para a função function(item, close) (opcional)
onopen {String} um link para a função function(item, el) (opcional)
autofocus {Boolean} permite o foco automático para a primeira entrada (default: false)
NEW right {Number} margem direita (defeito: 0)
NEW bottom {Number} margem de fundo (defeito: 0)
NEW useminheight {Boolean} usa min-height em vez de height atributo CSS (default: false)

Bom para saber:

Cada elemento com classe cancel será usado como um botão de cancelamento

Fonte de dados:

[
	{
		// 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
	}
]

Use-o com <ui-component name="formtab">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>