j-Info

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Singleton
Uitgeverij: SETTER('info', 'show', options)
Hoofdstukken: SETTER('info', 'hide')

Toon opties:

opt.element {jQuery} een element waar j-Info wordt weergegeven
opt.align {String} aan de hand van left (default), center, right of half
opt.html {String} een HTML inhoud
opt.name {String} een naam van de Tangular-template, moet worden gedefinieerd in het lichaam van j-Info als voorbeeld hieronder
opt.value {Object} een model voor de Tangular template
opt.minwidth {Nummer} een minimale breedte (default: 100)
opt.maxwidth {Nummer} een maximale breedte (default: 280)
opt.offsetX {Nummer} x offset (default: 0)
opt.offsetY {Nummer} y offset (default: 0)
opt.offsetWidth {Nummer} width offset (default: 0)
opt.callback {Function(isvisible)} een callback wordt uitgevoerd wanneer het element verborgen is
opt.class {String} een aangepaste klasnaam
opt.closeclick {Boolean} sluit informatie wanneer de gebruiker een muis klikt (default: false)
NEW opt.position {String} positie top (default) of bottom
NEW opt.x {Nummer} maakt absolute positie mogelijk (opt.y is niet vereist)
NEW opt.y {Nummer} maakt absolute positie mogelijk (opt.x is niet vereist)

var opt = {};
opt.element = YOUR_ELEMENT;
opt.html = 'TEST';
SETTER('info', 'show', opt);

Of met Tangular templates:

<ui-component name="info">

	<script type="text/html" name="template1">
		{{ value.name }}
	</script>

	<script type="text/html" name="template2">
		<h2>{{ value.firstname }} {{ value.lastname }}</h2>
	</script>

	<script type="text/html" name="template3">
		{{ value.description }}
	</script>

</ui-component>

<script>
function some_caller() {
	var opt = {};
	opt.element = YOUR_ELEMENT;
	opt.name = 'template1';
	opt.value = { name: 'Peter' };
	SETTER('info', 'show', opt);
}
</script>

Gebruik het met <ui-component name="info">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

example.html

<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="info"></ui-component>

<br />
<div class="container">
	<a href="javascript:void(0)">Mouse hover here</a>
</div>

<script>
	$(document).on('mouseenter mouseleave', 'a', function(e) {
		if (e.type === 'mouseenter') {
			var opt = {};
			opt.element = this;
			opt.html = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nobis omnis quae commodi recusandae dolore saepe blanditiis, eligendi accusamus optio!';
			SETTER('info', 'show', opt);
		} else
			SETTER('info', 'hide');
	});
</script>