j-Panel

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

Apresentação - Modo escuro

Configuração:

title {String} Título da janela
if {String} condição para exibir a janela, é comparado com o valor dentro de path
icon {String} Total sem ti-
reload {String} liga-se a uma função global e é executada se o formulário estiver exibindo
enter {Boolean} opcional, capta a chave enter automaticamente e realiza o envio (default: false)
autofocus {Boolean/String} opcional, pode focar uma entrada. String === jQuery selector para a entrada
default {String} opcional, um alias curto para DEFAULT(default, true)
closebutton {Boolean} opcional, pode esconder o botão x (default: false)
width {Number} opcional, uma largura padrão do painel (default: 300)
bg {Boolean} opcional, pode desativar background (default: true)
bgclose {Boolean} opcional, se o usuário clicar no fundo então o painel será fechado (default: false)
zindex {Number} opcional, pode afetar o índice z (default: 12)
close {String} opcional, o caminho/metodo é executado como path_to_method(com) quando o usuário fecha manualmente o painel através do botão fechado
scrollbar {Boolean} opcional, permite a barra de rolamento personalizada (default: true)
scrollbarY {Boolean} opcional, mostra a barra de rolamento personalizada vertical (default: true)
scrollbarshadow {Boolean} opcional, permite uma sombra na barra de rolamento (default: false)
menu {String} opcional, um link para a função (o painel mostrará um botão com um ícone de hamburguês na barra de título)
container {String} opcional, jQuery selector (este contêiner significa um contêino para o scrollbar)
margin {Number} opcional, uma margem para o container e seu scrollbar (funciona apenas com o container)
closeicon {String} opcional, ícone Font-Awesome (default: ti ti-times)
NEW closeesc {Boolean} fecha o formulário quando o usuário pressiona a chave ESC

Bom para saber:

A nova versão deste componente suporta a avaliação dinâmica do conteúdo de <script type="text/html">. O exemplo abaixo contém um script com HTML e o componente avalia o conteúdo se o j-Panel será exibido (apenas uma vez).

<ui-component name="panel" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>

Use-o com <ui-component name="panel">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="panel" path="common.panel" config="if:user;title:Title of this panel" class="hidden">
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
	<br />
	<div style="padding:20px">SOME CONTENT</div>
</ui-component>

<script>
	var common = {};
	common.panel = 'user';
</script>