j-ToggleMore

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Ist eine einfache Komponente zum Umschalten von Inhalten.

Sie können CSS an Ihre Bedürfnisse anpassen.

Methoden:

component.toggle(force) kann die Komponente umschalten. Der Parameter force ist optional und erzwingt den Wert. z.B. component.toggle(true); zeigt ui-togglemore-after an.

Gut zu wissen:

Der Inhalt des j-ToggleMore ist in zwei Teile unterteilt: before und after. Jeder Teil muss definiert werden. Die Komponente fügt jedem Teil CSS-Klassen hinzu, zum Beispiel enthält der erste div ui-togglemore-before und der zweite ui-togglemore-after.

Um ein „Blinzeln“ zu vermeiden, fügen Sie die Klasse hidden zum zweiten div hinzu.

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

Verwenden Sie es mit <ui-component name="togglemore">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Denis Granec. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>