j-Window

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

The component moves the content of this component under the <body> tag (because of positioning)

Configuration:

title {String} window title
if {String} condition for a showing of the window, it's compared with the value within of path
icon {String} Total.js icons
reload {String} link to a global function(window_component) and it's executed if the form is showing
enter {Boolean} (optional) captures the 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)
zindex {Number} (optional) can affect z-index (default: 12)
scrollbar {Boolean} enables a custom scrollbar (default: true)
scrollbarshadow {Boolean} optional, enables a shadow in scrollbar (default: false)
NEW closeesc {Boolean} closes the form when the user presses the ESC key
NEW independent {Boolean} closing doesn't depend on the condition according to the path

Good to know:

A 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-Window will be displayed (only once).

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

Use it with <ui-component name="window">. 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="window" path="common.window" config="if:user;title:Title of this window" 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.window = 'user';
</script>