Βοηθοί DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM και APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Εκτελέστηκε με jComponent 20

Το ATTRD(element or event, [name]) διαβάζει το data-name (προεπιλογή data-id) ενός στοιχείου, ενός αντικειμένου jQuery ή του στοιχείου ενός συμβάντος· για απλό αντικείμενο διαβάζει την ιδιότητα.
Το HIDDEN(element) είναι true όταν το στοιχείο δεν εμφανίζεται (το ίδιο ή ένας γονέας έχει display: none· ένα στοιχείο που είναι άμεσο παιδί του body αναφέρεται πάντα ως μη κρυμμένο, ο έλεγχος ξεκινά από τον γονέα του)· το VISIBLE(element, [threshold], [mode]) είναι true όταν βρίσκεται στο ορατό τμήμα του παραθύρου (το mode 'above' ή 'below' ρωτά πού βρίσκεται όταν δεν είναι). Το NOTFOCUSED() είναι true όταν η καρτέλα του προγράμματος περιήγησης είναι στο παρασκήνιο και το inDOM(element) είναι αληθές όσο το στοιχείο είναι στο έγγραφο.
Το WIDTH([element]) επιστρέφει την κλάση μεγέθους του πλάτους του στοιχείου (προεπιλογή: το παράθυρο): 'xs', 'sm', 'md' ή 'lg' (τα όρια είναι στο DEF.devices). Τα WW και WH είναι το μέγεθος του παραθύρου· το $W είναι το αντικείμενο jQuery του παραθύρου· το SCROLLBARWIDTH() είναι το πλάτος που καταλαμβάνει μια γραμμή κύλισης.
Το SCROLLBAR(element, [options]) τυλίγει ένα στοιχείο με προσαρμοσμένη γραμμή κύλισης και το επιστρέφει· το scrollbar.resize() την υπολογίζει ξανά αφού αλλάξει το περιεχόμενο.
Τα isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE και isIE είναι λογικές τιμές για το πρόγραμμα περιήγησης, που ορίζονται όταν ξεκινά η σελίδα.
Το STYLE(css, [id], [selector]) προσθέτει ένα style στο head. Με id το στυλ αντικαθίσταται όταν το καλέσετε ξανά με το ίδιο id· με selector κάθε κανόνας τυλίγεται από αυτό (το '.a { }' γίνεται '#p .a{ }').
Το NODEINDEXOF(element) είναι η θέση του στοιχείου ανάμεσα στα αδέλφια του, το NODEINSERT(element, reference, [before]) μετακινεί ένα στοιχείο μετά (ή πριν) από ένα άλλο και το NODEMOVE(element, [up]) το μετακινεί μία θέση κάτω (ή πάνω).
Το DIFFDOM(parent, selector, html, [attribute]) κάνει τα παιδιά του parent που ταιριάζουν με το selector ίδια με αυτά του html, χωρίς επανασχεδίαση όσων υπάρχουν ήδη: ένα στοιχείο είναι το ίδιο όταν το attribute του έχει την ίδια τιμή (χωρίς attribute, όταν όλο το HTML του είναι ίδιο). Αφαιρεί όσα δεν είναι στη νέα λίστα, προσθέτει τα νέα και τα βάζει στη σειρά του html, και επιστρέφει { add, upd, rem }. Το περιεχόμενο ενός στοιχείου που διατηρείται δεν αντικαθίσταται.
Το APPEARANCE({ color, dark, large, <name>: value }) ορίζει την εμφάνιση της σελίδας: τα dark και large εναλλάσσουν τις κλάσεις ui-dark και ui-large του body, το color και κάθε άλλο κλειδί γίνονται μεταβλητές CSS του :root (--color, και το --rgb υπολογίζεται από το χρώμα) σε ένα <style id="cssappearance">.
Το ENVIRONMENT(name, version, language, [env]) ορίζει το όνομα που προτάσσεται στα κλειδιά του localStorage, την έκδοση και τη γλώσσα (DEF.localstorage, DEF.version, DEF.language) και, με env, αρκετές τιμές ENV().

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<p id="p">A paragraph</p>
	<div id="shown" style="width:300px;height:40px">Shown</div>
	<div id="hidden" style="display:none"><span id="inside">Inside</span></div>
	<div id="far" style="margin-top:3000px">Far away</div>
	<div id="box" style="width:200px;height:50px;overflow:auto"><div style="height:300px">tall</div></div>
	<ul id="list"><li id="a" data-id="a">a</li><li id="b" data-id="b">b</li><li id="c" data-id="c">c</li></ul>
	<ul id="diff"><li data-id="1">one</li><li data-id="2">two</li></ul>
</body>
</html>

Δοκιμάστε το στον browser σας

Επεξεργαστείτε το παράδειγμα και εκτελέστε το. Εκτελείται σε απομονωμένο πλαίσιο στον browser σας· τίποτα δεν στέλνεται στον διακομιστή μας.

Κώδικας

Προεπισκόπηση