j-Typed

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Με βάση το Ετικέτες.js Με ΜΑΤ ΒΟΛΔ
Η αξία πρέπει να είναι array

ΕΠΙΤΡΟΦΗ:

Η Config είναι η ίδια Ετικέτες.jsΗ μόνη διαφορά είναι ότι όλα τα κλειδιά είναι χαμηλότερα. Αυτό είναι να διατηρηθεί η συνοχή με άλλα συστατικά. id

NEW: Το selector {String} μπορεί να περιέχει ένα στοιχείο για την αναπαραγωγή κειμένου
NEW: text {String} στη φόρμα Text 1|Text 2|Text 3|Text N διαφορετικά το κείμενο φορτώνεται σύμφωνα με το path
typespeed {Number} σε δισεκατομμύρια δευτερόλεπτα (προεπιλογή: 0)
startdelay {Number} σε δισεκατομμύρια δευτερόλεπτα (προεπιλογή: 0)
backspeed {Number} σε δισεκατομμύρια δευτερόλεπτα (προεπιλογή: 0)
smartbackspace {Boolean} αυτό θα απομακρύνει μόνο τις λέξεις μετά από "Αυτό είναι ένα" (προεπιλεγμένο: true)
shuffle {Boolean} shuffle των αλυσίδων (προεπιλεγμένο: true)
Χρόνος backdelay {String} πριν από το backspacing (προεπιλεγμένο: 700)
Το fadeout {Boolean} εκκενώνεται αντί για το πίσω χώρο (προεπιλεγμένο: false)
fadeoutclass {String} κλάση css για την αναμόρφωση (προεπιλεγμένη: typed-fade-out)
fadeoutdelay {Number} καθυστέρηση σε δισεκατομμύρια δευτερόλεπτα (προεπιλογή: 500)
Σύνδεσμοι στροφής loop {Boolean} (προεπιλεγμένο: false)
loopcount {String/Number} ποσότητα λουλουδιών (προεπιλεγμένη: Infinity)
showcursor {Boolean} δείκτη (προεπιλεγμένο: true)
cursorchar {String} χαρακτήρας κούκλες (προεπιλεγμένο: |)
autoinsertcss {Boolean} εισάγει CSS για το cursor και fadeOut στο HTML <head> (προεπιλεγμένο: true)
contenttype {String} περιεχόμενοType html ή null για το κείμενο (προεπιλεγμένο: html)

Παγκόσμια γεγονότα:

Και πάλι, όπως Ετικέτες.jsΠροσθήκη παραμέτρων 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) {})

Χρησιμοποιήστε το με <ui-component name="typed">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Denis Granec. Πηγή: The Componentator Ετικέτες Αξιολόγηση, 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>