j-Panel

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

unterstützt den Dark-Modus

Konfiguration:

title {String}-Fenstertitel
Bedingung if {String} für die Anzeige des Fensters, es wird mit dem Wert innerhalb von path verglichen
icon {String} Gesamtsymbol ohne ti-
reload {String}-Link zu einer globalen Funktion, die ausgeführt wird, wenn das Formular angezeigt wird
enter {Boolean} optional, erfasst den enter-Schlüssel automatisch und führt die Übermittlung durch (Standard: false)
autofocus {Boolean/String} optional, kann eine Eingabe fokussieren. String === jQuery selector für die Eingabe
default {String} optional, ein kurzer Alias für DEFAULT(default, true)
closebutton {Boolean} optional, kann die Schaltfläche x ausblenden (Standard: false)
width {Number} optional, eine Standardbreite des Panels (Standard: 300)
bg {Boolean} optional, kann background deaktivieren (Standard: true)
bgclose {Boolean} optional, wenn der Benutzer auf den Hintergrund klickt, wird das Panel geschlossen (Standard: false)
zindex {Number} optional, kann den Z-Index beeinflussen (Standard: 12)
close {String} optional, Pfad/Methode wird als path_to_method(com) ausgeführt, wenn der Benutzer das Panel manuell über die Schaltfläche „Schließen“ schließt
scrollbar {Boolean} optional, aktiviert benutzerdefinierte Bildlaufleiste (Standard: true)
scrollbarY {Boolean} optional, zeigt vertikale benutzerdefinierte Bildlaufleiste (Standard: true)
scrollbarshadow {Boolean} optional, aktiviert einen Schatten in der Bildlaufleiste (Standard: false)
menu {String} optional, ein Link zur Funktion (Panel zeigt eine Schaltfläche mit Burger-Symbol in der Titelleiste an)
container {String} optional, jQuery-Selektor (dieser Container bedeutet einen Container für die Bildlaufleiste)
margin {Number} optional, ein Spielraum für container und dessen scrollbar (funktioniert nur mit container)
closeicon {String} optional, Font-Awesome-Symbol (Standard: ti ti-times)
NEW closeesc {Boolean} schließt das Formular, wenn der Benutzer die Taste ESC drückt

Gut zu wissen:

Die neue Version dieser Komponente unterstützt die dynamische Auswertung des Inhalts von <script type="text/html">. Das folgende Beispiel enthält ein Skript mit HTML und die Komponente wertet den Inhalt aus, ob der j-Panel angezeigt wird (nur einmal).

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

Verwenden Sie es mit <ui-component name="panel">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>