DOM-Helfer: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM und APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Mit jComponent 20 ausgeführt

ATTRD(element or event, [name]) liest data-name (Standard data-id) eines Elements, eines jQuery-Objekts oder des Elements eines Ereignisses; bei einem einfachen Objekt liest es die Eigenschaft.
HIDDEN(element) ist true, wenn das Element nicht angezeigt wird (es oder ein Elternelement hat display: none; ein Element, das direktes Kind des body ist, wird immer als nicht verborgen gemeldet, die Prüfung beginnt bei seinem Elternelement); VISIBLE(element, [threshold], [mode]) ist true, wenn es im sichtbaren Teil des Fensters liegt (mode 'above' oder 'below' fragt, wo es ist, wenn nicht). NOTFOCUSED() ist true, wenn der Browser-Tab im Hintergrund ist, und inDOM(element) ist wahr, solange das Element im Dokument ist.
WIDTH([element]) gibt die Größenklasse der Breite des Elements zurück (Standard: das Fenster): 'xs', 'sm', 'md' oder 'lg' (die Grenzen stehen in DEF.devices). WW und WH sind die Größe des Fensters; $W ist das jQuery-Objekt des Fensters; SCROLLBARWIDTH() ist die Breite, die eine Scrollleiste einnimmt.
SCROLLBAR(element, [options]) umhüllt ein Element mit einer eigenen Scrollleiste und gibt es zurück; scrollbar.resize() berechnet sie neu, nachdem sich der Inhalt geändert hat.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE und isIE sind Booleans über den Browser, die beim Start der Seite gesetzt werden.
STYLE(css, [id], [selector]) fügt dem Head ein style hinzu. Mit einer id wird der Style ersetzt, wenn du ihn erneut mit derselben ID aufrufst; mit einem selector wird jede Regel davon umhüllt ('.a { }' wird zu '#p .a{ }').
NODEINDEXOF(element) ist die Position des Elements unter seinen Geschwistern, NODEINSERT(element, reference, [before]) verschiebt ein Element hinter (oder vor) ein anderes und NODEMOVE(element, [up]) verschiebt es eine Stelle nach unten (oder oben).
DIFFDOM(parent, selector, html, [attribute]) macht die Kinder von parent, die zu selector passen, gleich denen in html, ohne die bereits vorhandenen neu zu zeichnen: Ein Element ist dasselbe, wenn sein attribute denselben Wert hat (ohne attribute, wenn sein gesamtes HTML gleich ist). Es entfernt die, die nicht in der neuen Liste sind, fügt die neuen hinzu, bringt sie in die Reihenfolge von html und gibt { add, upd, rem } zurück. Der Inhalt eines beibehaltenen Elements wird nicht ersetzt.
APPEARANCE({ color, dark, large, <name>: value }) setzt das Aussehen der Seite: dark und large schalten die Klassen ui-dark und ui-large des body um, color und jeder andere Schlüssel werden zu CSS-Variablen von :root (--color, und --rgb wird aus der Farbe berechnet) in einem einzigen <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) setzt den Namen, der den Schlüsseln in localStorage vorangestellt wird, die Version und die Sprache (DEF.localstorage, DEF.version, DEF.language) und mit env mehrere ENV()-Werte.

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>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau