j-Typed

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Alapján Színes.js A Boldog Matt
Az értéknek kell lennie array

konfiguráció:

A Config ugyanaz, mint Színes.jsAz egyetlen különbség az, hogy minden kulcs alacsonyabb. Ez a következetesség fenntartása más komponensekkel. id

NEW: selector {String} tartalmazhat egy nemes elemet a szöveg rendereléséhez
NEW: text {String} a Text 1|Text 2|Text 3|Text N formanyomtatványban, különben a szöveg a path szerint van feltöltve
typespeed {Number} millisekundában (például 0)
startdelay {Number} millisekundában (például 0)
backspeed {Number} millisekundában (például 0)
smartbackspace {Boolean} ez csak a "Ez egy" után a szavak hátterét tükrözi (default: true)
shuffle {Boolean} szivattyú a szálak (default: true)
backdelay {String} idő a hátsó csomagolás előtt (default: 700)
A fadeout {Boolean} a hátsó tér helyett csökken (default: false)
fadeoutclass {String} css osztály fade animáció (default: typed-fade-out)
A fadeoutdelay {Number} millisekundus késés (például 500)
loop {Boolean} szálak (default: false)
loopcount {String/Number} mennyiségű csúszás (default: Infinity)
showcursor {Boolean} mutató kurzor (default: true)
cursorchar {String} kurzor karakter (default: |)
A autoinsertcss {Boolean} CSS-t adja be a kurzorhoz és a fadeOut-hoz a HTML <head>-be (például: true)
contenttype {String} tartalomTípus html vagy null a fellebbezési szöveghez (például: html)

Globális események:

Ismét úgy, mint Színes.jshozzáadva component Paraméterek

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

Használja a <ui-component name="typed">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator CDN default). szerző: Denis Granec. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>