j-Typed

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

Basierend auf Ausgezeichnet.js durch Matt Boldt
Der Wert muss array sein.

Konfiguration:

Config ist das gleiche wie Ausgezeichnet.jsDer einzige Unterschied ist, dass alle Schlüssel niedriger sind. Dies besteht darin, Konsistenz mit anderen Komponenten zu erhalten. Die einzige Zusatzkonfiguration ist id

NEW: selector {String} kann ein Nested-Element für die Renderung von Text enthalten
NEW: text {String} in der Form Text 1|Text 2|Text 3|Text N sonst wird Text nach path geladen
typespeed {Number} in Millisekunden (Default: 0)
startdelay {Number} in Millisekunden (Default: 0)
backspeed {Number} in Millisekunden (Default: 0)
smartbackspace {Boolean} dies würde nur die Wörter nach "Dies ist eine" (Default: true)
shuffle {Boolean} schüttelt die Stränge (Default: true)
backdelay {String} Zeit vor Backspacing (Default: 700)
fadeout {Boolean} fade statt backspace (Default: false)
fadeoutclass {String} css-Klasse für Fade-Animation (Default: typed-fade-out)
fadeoutdelay {Number} verschwindet in Millisekunden (Default: 500)
loop {Boolean} Laufstreifen (Default: false)
loopcount {String/Number} Anzahl von Lücken (Default: Infinity)
showcursor {Boolean} Show Cursor (Default: true)
cursorchar {String} Kursor Charakter (Default: |)
autoinsertcss {Boolean} enthält CSS für den Kursor und fadeOut in HTML <head> (Default: true)
contenttype {String}-InhalteTyp html oder null für Beschwerde (Default: html)

Globale Ereignisse:

Wieder, wie auch Ausgezeichnet.js- Ergänzung von component

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) {})

Verwenden Sie es mit <ui-component name="typed">. 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="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>