DOM-segédek: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM és APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Futtatva a jComponent 20-szal

Az ATTRD(element or event, [name]) egy elem, egy jQuery objektum vagy egy esemény elemének data-name értékét olvassa (alapértelmezés data-id); sima objektumnál a tulajdonságot olvassa.
A HIDDEN(element) akkor true, ha az elem nem látszik (ő vagy egy szülője display: none; a body közvetlen gyermekeként szereplő elemet mindig nem rejtettnek jelenti, az ellenőrzés a szülőjétől indul); a VISIBLE(element, [threshold], [mode]) akkor true, ha az ablak látható részén belül van (a mode 'above' vagy 'below' azt kérdezi, hol van, ha nincs). A NOTFOCUSED() akkor true, ha a böngészőlap a háttérben van, az inDOM(element) pedig igaz, amíg az elem a dokumentumban van.
A WIDTH([element]) az elem szélességének méretosztályát adja vissza (alapértelmezés: az ablak): 'xs', 'sm', 'md' vagy 'lg' (a határok a DEF.devices helyen vannak). A WW és a WH az ablak mérete; a $W az ablak jQuery objektuma; a SCROLLBARWIDTH() a görgetősáv szélessége.
A SCROLLBAR(element, [options]) egyéni görgetősávval veszi körül az elemet, és visszaadja; a scrollbar.resize() újraszámolja, miután a tartalom megváltozott.
Az isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE és isIE a böngészőről szóló logikai értékek, az oldal indulásakor állítódnak be.
A STYLE(css, [id], [selector]) egy style elemet ad a headhez. id esetén a stílus lecserélődik, ha ugyanazzal az azonosítóval újra hívod; selector esetén minden szabályt az veszi körül (a '.a { }' '#p .a{ }' lesz).
A NODEINDEXOF(element) az elem pozíciója a testvérei között, a NODEINSERT(element, reference, [before]) egy elemet egy másik után (vagy elé) mozgat, a NODEMOVE(element, [up]) pedig egy hellyel lejjebb (vagy feljebb) mozgatja.
A DIFFDOM(parent, selector, html, [attribute]) a parent selector-ra illeszkedő gyermekeit az html gyermekeivel teszi azonossá, újrarajzolás nélkül azokat, amelyek már ott vannak: egy elem ugyanaz, ha az attribute értéke megegyezik (attribute nélkül, ha a teljes HTML-je azonos). Eltávolítja azokat, amelyek nincsenek az új listában, hozzáadja az újakat, és az html sorrendjébe teszi őket, majd { add, upd, rem } értéket ad vissza. A megtartott elem tartalma nem cserélődik.
Az APPEARANCE({ color, dark, large, <name>: value }) beállítja az oldal megjelenését: a dark és a large a body ui-dark és ui-large osztályát kapcsolja, a color és minden más kulcs a :root CSS-változójává válik (--color, a --rgb pedig a színből számolódik) egyetlen <style id="cssappearance"> elemben.
Az ENVIRONMENT(name, version, language, [env]) beállítja a localStorage kulcsainak előtagját adó nevet, a verziót és a nyelvet (DEF.localstorage, DEF.version, DEF.language), és env esetén több ENV() értéket.

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>

Próbáld ki a böngésződben

Szerkeszd a példát, és futtasd. A böngésződ egy izolált keretében fut; semmi nem kerül a szerverünkre.

Kód

Előnézet