j-ToggleMore

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

Det är en enkel komponent för att ta tag i innehållet.

Du kan ändra CSS för dina behov.

Metoder:

component.toggle(force) kan ta tag i komponenten. parametern force är valfri och kommer att tvinga värdet. exempelvis component.toggle(true); visar ui-togglemore-after.

Bra att veta:

Innehållet i j-ToggleMore är uppdelat i 2 delar: before och after.Varje del måste definieras.Komponenten lägger till CSS-klasser till varje del, till exempel den första div kommer att innehålla ui-togglemore-before och den andra ui-togglemore-after.

För att undvika "blink" lägg klassificeringen hidden till den andra div.

<ui-component name="togglemore">
	<div>
		Content before
	</div>
	<div class="hidden">
		Content after
	</div>
</ui-component>

Använd den med <ui-component name="togglemore">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: Denis Granec. källor: den Componentator Komponenterna i lager, MIT licens.

example.html

<div style="width: 400px">
	<ui-component name="togglemore">
		<div>
			BEFORE long text
		</div>
		<div class="hidden">
			AFTER Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eligendi pariatur perferendis expedita tempora, deserunt sunt, quas similique velit quo, harum odio explicabo ea dicta aliquam ipsa, veniam vitae nemo.
		</div>
	</ui-component>
</div>