j-Typed

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Na podstawie Własne.js przez Matka Boldta
Wartość musi być _array__

Konfiguracja:

Konfig jest taki sam jak Własne.jsJedyna różnica polega na tym, że wszystkie klucze są niższe. to jest utrzymanie spójności z innymi komponentami. id

NEW: selector {String} może zawierać element zniszczony do renderowania tekstu
NEW: text {String} w formularzu Text 1|Text 2|Text 3|Text N w przeciwnym razie tekst jest ładowany zgodnie z path
typespeed {Number} w milisekundach (default: 0)
startdelay {Number} w milisekundach (default: 0)
backspeed {Number} w milisekundach (default: 0)
smartbackspace {Boolean} to będzie tylko spacery słów po "To jest" (default: true)
shuffle {Boolean} wstrząsa strumieniami (default: true)
Czas backdelay {String} przed backspacing (default: 700)
fadeout {Boolean} wypada zamiast spaceru (default: false)
Klasa fadeoutclass {String} css dla animacji fade (default: typed-fade-out)
fadeoutdelay {Number} opóźnia się w milisekundach (default: 500)
Zestaw filarów loop {Boolean} (default: false)
loopcount {String/Number} ilość pęcherzyków (default: Infinity)
Kursor wyświetlający showcursor {Boolean} (default: true)
charakter kursora cursorchar {String} (default: |)
autoinsertcss {Boolean} wprowadza CSS dla kursora i fadeOut do HTML <head> (default: true)
Zawartość contenttype {String}Typ html lub null dla klauzuli (default: html)

Światowe wydarzenia:

Ponownie, podobnie jak Własne.jsDodano component Parametry

ON('typed.onComplete', function(typed, component) {})
ON('typed.preStringTyped', function(pos, typed, component) {})
ON('typed.onStringTyped', function(pos, typed, component) {})
ON('typed.onLastStringBackspaced', function(typed, component) {})
ON('typed.onTypingPaused', function(pos, typed, component) {})
ON('typed.onTypingResumed', function(pos, typed, component) {})
ON('typed.onReset', function(typed, component) {})
ON('typed.onStop', function(pos, typed, component) {})
ON('typed.onStart', function(pos, typed, component) {})
ON('typed.onDestroy', function(typed, component) {})

Użyj go z <ui-component name="typed">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Denis Granec Źródło: Componentator Zestaw składników, licencja MIT.

example.html

<div style="height:100px">
	<ui-component name="typed" path="messages" config="loop:true" style="white-space:pre"></ui-component>
</div>
<div style="height:50px">
	<ui-component name="typed" path="messages2" config="loop:true;typespeed:100;backspeed:50"></ui-component>
</div>

<script>
	var messages = 'npm install total.js^1000\n`+ <b>total.js@3.1.0</b>` ^1000\n`added <b>1 package</b> from 23 contributors and audited 1 package in <b>1.348s</b>` ^1000\n`found 0 vulnerabilities`';
	var messages2 = ['Hello world!', '<b>Total.js</b> is awesome!', 'jComponent is <b>awesome</b>!', 'Lorem ipsum', 'Lorem dolor'];

	var count = 0;
	ON('typed.onComplete', function(typed, component) {
		if (typed.el.id === 'myconsole') {
			count++;

			if (count === 5)
				typed.loop = false;
		}
	});
</script>