j-Extend

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

This component is a specific component with powerful functionality. When the component is evaluated then it executes two events in the form below. The component can be helpful in web applications that can be dynamically extended.

Configuration:

name {String} A name for extend, the component will emit ON('extend_' + name) event

The component emits only two events that you can catch somewhere:

// NAME: is defined in the component configuration
ON('extend_NAME', function(opt) {
	// opt.name {String} with a value according to the "config.name"
	// opt.component {Instance of j-Extend}
	// opt.element {jQuery element}
	// opt.dom {Node}
});

ON('extend', function(opt) {
	// opt.name {String} with a value according to the "config.name"
	// opt.component {Instance of j-Extend}
	// opt.element {jQuery element}
	// opt.dom {Node}
});

Use it with <ui-component name="extend">. 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: Pete Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="width:300px">
	<ui-plugin path="form">
		<ui-component name="extend" config="name:test"></ui-component>
	</ui-plugin>
</div>

<script>
	ON('extend_test', function(opt) {
		// Here you can use IMPORT() method
		opt.element.append(`
			<div class="m">Extended:</div>
			<ui-component name="input" path="?.name" config="required:1">Label</ui-component>
		`);
	});
</script>