j-ToggleMore

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

È un semplice componente per toggle contenuti.

Puoi cambiare il CSS per le tue esigenze.

Metodi:

component.toggle(force) Può essere utilizzato il componente. il parametro force è opzionale e fornirà il valore. component.toggle(true); Mostrerà ui-togglemore-after.

Buono sapere:

Il contenuto del j-ToggleMore è suddiviso in 2 parti: before e after. Ogni parte deve essere definita. il componente aggiunge classi CSS a ciascuna parte, ad esempio il primo div contiene ui-togglemore-before e il secondo ui-togglemore-after.

Per evitare "blink" aggiungere la classe hidden al secondo div.

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

Utilizzare con <ui-component name="togglemore">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Denis Granec. fonte: il Componentator Ristorante dei componenti, licenza MIT.

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>