Pomocníci DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM a APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Spuštěno s jComponent 20

ATTRD(element or event, [name]) čte data-name (výchozí data-id) elementu, objektu jQuery nebo elementu události; u jednoduchého objektu čte vlastnost.
HIDDEN(element) je true, když element není zobrazen (on nebo rodič má display: none; element, který je přímým potomkem body, se vždy hlásí jako neskrytý, kontrola začíná od jeho rodiče); VISIBLE(element, [threshold], [mode]) je true, když je ve viditelné části okna (mode 'above' nebo 'below' se ptá, kde je, když není). NOTFOCUSED() je true, když je karta prohlížeče na pozadí, a inDOM(element) je pravda, dokud je element v dokumentu.
WIDTH([element]) vrátí třídu velikosti šířky elementu (výchozí okna): 'xs', 'sm', 'md' nebo 'lg' (hranice jsou v DEF.devices). WW a WH jsou velikost okna; $W je objekt jQuery okna; SCROLLBARWIDTH() je šířka, kterou zabírá posuvník.
SCROLLBAR(element, [options]) obalí element vlastním posuvníkem a vrátí jej; scrollbar.resize() jej přepočítá po změně obsahu.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE a isIE jsou booleany o prohlížeči, nastavené při startu stránky.
STYLE(css, [id], [selector]) přidá style do head. S id se styl nahradí, když jej zavoláte znovu se stejným id; se selector je každé pravidlo jím obaleno ('.a { }' se stane '#p .a{ }').
NODEINDEXOF(element) je pozice elementu mezi sourozenci, NODEINSERT(element, reference, [before]) přesune element za (nebo před) jiný a NODEMOVE(element, [up]) jej přesune o jedno místo dolů (nebo nahoru).
DIFFDOM(parent, selector, html, [attribute]) udělá potomky parent, kteří odpovídají selector, stejnými jako ty v html, bez překreslení těch, které tam už jsou: element je tentýž, když jeho attribute má stejnou hodnotu (bez attribute, když je celé jeho HTML stejné). Odstraní ty, které nejsou v novém seznamu, přidá nové a seřadí je podle html a vrátí { add, upd, rem }. Obsah ponechaného elementu se nenahrazuje.
APPEARANCE({ color, dark, large, <name>: value }) nastaví vzhled stránky: dark a large přepínají třídy ui-dark a ui-large na body, color a každý další klíč se stanou CSS proměnnými :root (--color, a --rgb se vypočítá z barvy) v jednom <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) nastaví název, který předsazuje klíče v localStorage, verzi a jazyk (DEF.localstorage, DEF.version, DEF.language) a s env několik hodnot 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>

Vyzkoušejte to ve svém prohlížeči

Upravte příklad a spusťte ho. Běží v izolovaném rámu ve vašem prohlížeči; na náš server se nic neposílá.

Kód

Náhled