j-Panel

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Stöd för dark mode

Konfigurera:

Föregående title {String}
if {String} villkor för visning av fönstret, det är jämfört med värdet inom path
icon {String} Total icke utan ti-
reload {String} länkar till en global funktion och den körs om formuläret visas
enter {Boolean} är valfritt, fångar enter-nyckeln automatiskt och utför leverans (default: false)
autofocus {Boolean/String} valfritt, kan fokusera en inmatning. String === jQuery selector för inmatningen
default {String} alternativ, en kort alias för DEFAULT(default, true)
closebutton {Boolean} alternativ, kan dölja knappen x (default: false)
width {Number} valfritt, standard bredd av panelen (default: 300)
bg {Boolean} alternativ, kan inaktivera background (default: true)
bgclose {Boolean} är valfritt, om användaren klickar på bakgrunden så kommer panelen att stängas (default: false)
zindex {Number} är valfritt, kan påverka z-indexet (default: 12)
close {String} valfritt, spår/metod körs som path_to_method(com) när användaren stänger panelen manuellt via låst knapp
scrollbar {Boolean} valfritt, möjliggör anpassad skruvbar (default: true)
scrollbarY {Boolean} valfritt, visar vertikalt anpassad skruvbar (default: true)
scrollbarshadow {Boolean} är valfritt, möjliggör en skugga i scrollbar (default: false)
menu {String} valfritt, en länk till funktion (panelen visar en knapp med en burgerikona i rubriken)
container {String} valfritt, jQuery-selektor (detta behållare betyder en behållaren för scrollbar)
margin {Number} valfritt, en marginal för container och dess scrollbar (det fungerar endast med container)
closeicon {String} alternativ, Font-Awesome ikon (default: ti ti-times)
NEW closeesc {Boolean} stänger formuläret när användaren trycker på ESC

Bra att veta:

Den nya versionen av denna komponent stöder dynamisk utvärdering av innehållet i <script type="text/html">. exemplet nedan innehåller ett skript med HTML och komponenten utvärderar innehållet om j-Panel visas (endast en gång).

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

Använd den med <ui-component name="panel">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>