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

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Spustené s jComponent 20

ATTRD(element or event, [name]) číta data-name (predvolene data-id) elementu, objektu jQuery alebo elementu udalosti; pri jednoduchom objekte číta vlastnosť.
HIDDEN(element) je true, keď element nie je zobrazený (on alebo rodič má display: none; element, ktorý je priamym potomkom body, sa vždy hlási ako neskrytý, kontrola začína od jeho rodiča); VISIBLE(element, [threshold], [mode]) je true, keď je vo viditeľnej časti okna (mode 'above' alebo 'below' sa pýta, kde je, keď nie je). NOTFOCUSED() je true, keď je karta prehliadača na pozadí, a inDOM(element) je pravda, kým je element v dokumente.
WIDTH([element]) vráti triedu veľkosti šírky elementu (predvolene okna): 'xs', 'sm', 'md' alebo 'lg' (hranice sú v DEF.devices). WW a WH sú veľkosť okna; $W je objekt jQuery okna; SCROLLBARWIDTH() je šírka, ktorú zaberá posuvník.
SCROLLBAR(element, [options]) obalí element vlastným posuvníkom a vráti ho; scrollbar.resize() ho prepočíta po zmene obsahu.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE a isIE sú booleany o prehliadači, nastavené pri štarte stránky.
STYLE(css, [id], [selector]) pridá style do head. S id sa štýl nahradí, keď ho zavoláte znova s rovnakým id; so selector je každé pravidlo ním obalené ('.a { }' sa stane '#p .a{ }').
NODEINDEXOF(element) je pozícia elementu medzi súrodencami, NODEINSERT(element, reference, [before]) presunie element za (alebo pred) iný a NODEMOVE(element, [up]) ho presunie o jedno miesto nadol (alebo nahor).
DIFFDOM(parent, selector, html, [attribute]) urobí potomkov parent, ktorí zodpovedajú selector, rovnakými ako tie v html, bez prekreslenia tých, ktoré tam už sú: element je ten istý, keď jeho attribute má rovnakú hodnotu (bez attribute, keď je celé jeho HTML rovnaké). Odstráni tie, ktoré nie sú v novom zozname, pridá nové a zoradí ich podľa html a vráti { add, upd, rem }. Obsah ponechaného elementu sa nenahrádza.
APPEARANCE({ color, dark, large, <name>: value }) nastaví vzhľad stránky: dark a large prepínajú triedy ui-dark a ui-large na body, color a každý ďalší kľúč sa stanú CSS premennými :root (--color, a --rgb sa vypočíta z farby) v jednom <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) nastaví názov, ktorý predsadzuje kľúče v localStorage, verziu a jazyk (DEF.localstorage, DEF.version, DEF.language) a s env niekoľko hodnôt 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>

Vyskúšajte to vo svojom prehliadači

Upravte príklad a spustite ho. Beží v izolovanom ráme vo vašom prehliadači; na náš server sa nič neposiela.

Kód

Náhľad