j-LazyContent

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent visar sitt eget innehåll när det är synligt. Det stöder användbara funktioner som redraw och hide.

Konfigurera:

height:NUMBER_IN_PIXELS" valfritt, en standardinnehåll höjd. Default värde: är höjden på det aktuella elementet
init:method_or_variable" körs när elementet första gången syns (alternativt)
redraw:method_or_variable" körs när elementet är igen synligt (alternativt)
hide:method_or_variable" körs när elementet är dolt (alternativt)

noter:

init kommer att utföras endast en gång
redraw och hide kommer att utföras fler gånger
Om attributerna innehåller en länk till variable (inte metoder) så lagras värdet Boolean som värde.
important: skruvområdet måste vara document.body element

Använd den med <ui-component name="lazycontent">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

example.html

<div><b>SCROLL DOWN</b></div>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<ui-component name="lazycontent" config="init:method_init;redraw:method_redraw;hide:method_hide">
	.... default content ....
</ui-component>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<ui-component name="lazycontent" config="init:method_init;redraw:method_redraw;hide:method_hide">
	.... default content ....
</ui-component>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />

<script>
	function method_init() {
		this.element.html('INIT');
		this.element.css('background-color', 'green');
	}

	function method_redraw() {
		this.element.html('REDRAW');
		this.element.css('background-color', 'blue');
	}

	function method_hide() {
		this.element.html('HIDDEN');
		this.element.css('background-color', 'red');
	}
</script>