j-Panel

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

podporuje tmavý režim

Konfigurácia:

Nadpis okna title {String}
if {String} podmienka pre zobrazenie okna, porovnáva sa s hodnotou v rámci path
icon {String} Celková ikona bez ti-
reload {String} odkaz na globálnu funkciu a vykoná sa, ak sa formulár zobrazuje
enter {Boolean} voliteľné, automaticky zachytí kľúč enter a odošle (predvolené: false)
autofocus {Boolean/String} voliteľné, môže zamerať vstup. String === jQuery selector pre vstup
default {String} voliteľné, krátky alias pre DEFAULT(default, true)
closebutton {Boolean} voliteľné, môže skryť tlačidlo x (predvolené: false)
width {Number} voliteľné, predvolená šírka panelu (predvolená: 300)
bg {Boolean} voliteľné, môže deaktivovať background (predvolené: true)
bgclose {Boolean} voliteľné, ak používateľ klikne na pozadie, panel sa zatvorí (predvolené: false)
zindex {Number} voliteľné, môže ovplyvniť z-index (predvolené: 12)
close {String} voliteľné, cesta/metóda sa vykoná ako path_to_method(com), keď používateľ manuálne zatvorí panel pomocou tlačidla zatvorenia
scrollbar {Boolean} voliteľné, umožňuje vlastný posuvník (predvolené: true)
scrollbarY {Boolean} voliteľné, zobrazuje vertikálny vlastný posuvník (predvolené: true)
scrollbarshadow {Boolean} voliteľné, povoľuje tieň v posuvnej lište (predvolené: false)
menu {String} voliteľné, odkaz na funkciu (panel zobrazí tlačidlo s ikonou burgeru v záhlaví)
container {String} voliteľné, selektor jQuery (tento kontajner znamená kontajner pre posuvník)
margin {Number} voliteľné, rezerva pre container a jeho scrollbar (funguje len so container)
closeicon {String} voliteľné, ikona Font-Awesome (predvolené: ti ti-times)
NEW closeesc {Boolean} zatvorí formulár, keď používateľ stlačí kláves ESC

Je dobré vedieť:

Nová verzia tohto komponentu podporuje dynamické vyhodnocovanie obsahu <script type="text/html">. Príklad nižšie obsahuje skript s HTML a komponent vyhodnotí obsah, ak sa zobrazí j-Panel (iba raz).

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

Použite ho so <ui-component name="panel">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>