j-Panel

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Támogatja a sötét módot

konfiguráció:

title {String} ablak cím
if {String} állapot az ablak megjelenítéséhez, összehasonlítva a path értékével
icon {String} teljes ikon nélkül ti-
A reload {String} egy globális funkcióhoz kapcsolódik, és akkor fut, ha a formanyomtatvány megjelenik
A enter {Boolean} opcionális, a enter kulcsot automatikusan rögzíti, és a benyújtást elvégzi (default: false)
autofocus {Boolean/String} opcionális, lehet összpontosítani egy bevitelt. String === jQuery selector a beviteli
default {String} opcionális, rövid alias a DEFAULT(default, true)
closebutton {Boolean} opcionális, képes elrejteni a x gombot (default: false)
width {Number} opcionális, az alapértelmezett panel szélessége (default: 300)
bg {Boolean} opcionális, lehet letiltani background (default: true)
bgclose {Boolean} opcionális, ha a felhasználó rákattint a háttérre, akkor a panel bezárva lesz (default: false)
zindex {Number} opcionális, hatással lehet a z-indexre (default: 12)
close {String} opcionális, út / módszer fut a path_to_method(com) amikor a felhasználó bezárja a panel manuálisan a záró gomb
scrollbar {Boolean} opcionális, lehetővé teszi a személyre szabott scrollbar (default: true)
scrollbarY {Boolean} opcionális, függőleges beállított szalagot mutat (default: true)
scrollbarshadow {Boolean} opcionális, lehetővé teszi az árnyékot a scrollbarban (default: false)
menu {String} opcionális, a funkcióhoz való link (a panel egy gombot mutat a burger ikonmal a címsorban)
container {String} opcionális, jQuery kiválasztó (ez a tartály egy szeletelő tartály)
margin {Number} opcionális, a container és a scrollbar marginja (csak container-val működik)
closeicon {String} opcionális, Font-Awesome ikon (default: ti ti-times)
NEW closeesc {Boolean} zárja be a űrlapot, amikor a felhasználó megnyomja a ESC kulcsot

Jó tudni:

Az új verzió támogatja a <script type="text/html"> tartalmának dinamikus értékelését. az alábbi példa HTML-vel ellátott forgatókönyvet tartalmaz, és az összetevő értékeli a tartalmat, ha a j-Panel megjelenik (csak egyszer).

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

Használja a <ui-component name="panel">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>