j-Panel

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

supports dark mode

Configuration:

title {String} window title
if {String} condition for showing of the window, it's compared with the value within of path
icon {String} Total icon without ti-
reload {String} link to a global function and it's executed if the form is displaying
enter {Boolean} optional, captures enter key automatically and performs submit (default: false)
autofocus {Boolean/String} optional, can focus an input. String === jQuery selector for the input
default {String} optional, a short alias for DEFAULT(default, true)
closebutton {Boolean} optional, can hide x button (default: false)
width {Number} optional, a default width of the panel (default: 300)
bg {Boolean} optional, can disable background (default: true)
bgclose {Boolean} optional, if the user click on the background then the panel will be closed (default: false)
zindex {Number} optional, can affect z-index (default: 12)
close {String} optional, path/method is executed as path_to_method(com) when the user closes the panel manually via close button
scrollbar {Boolean} optional, enables custom scrollbar (default: true)
scrollbarY {Boolean} optional, shows vertical custom scrollbar (default: true)
scrollbarshadow {Boolean} optional, enables a shadow in scrollbar (default: false)
menu {String} optional, a link to function (panel will show a button with burger icon in title bar)
container {String} optional, jQuery selector (this container means a container for scrollbar)
margin {Number} optional, a margin for container and its scrollbar (it works with container only)
closeicon {String} optional, Font-Awesome icon (default: ti ti-times)
NEW closeesc {Boolean} closes the form when the user presses ESC key

Good to know:

New version of this component supports dynamic evaluation of the content of <script type="text/html">. The example below contains a script with HTML and the component evaluates the content if the j-Panel will be displayed (only once).

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

Use it with <ui-component name="panel">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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>