Pomocniki DOM: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM i APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Uruchomiono z jComponent 20

ATTRD(element or event, [name]) czyta data-name (domyślnie data-id) elementu, obiektu jQuery lub elementu zdarzenia; dla zwykłego obiektu czyta właściwość.
HIDDEN(element) to true, gdy element nie jest pokazany (on lub rodzic ma display: none; element będący bezpośrednim dzieckiem body jest zawsze zgłaszany jako nieukryty, sprawdzanie zaczyna się od jego rodzica); VISIBLE(element, [threshold], [mode]) to true, gdy jest w widocznej części okna (mode 'above' lub 'below' pyta, gdzie jest, gdy nie jest). NOTFOCUSED() to true, gdy karta przeglądarki jest w tle, a inDOM(element) jest prawdą, dopóki element jest w dokumencie.
WIDTH([element]) zwraca klasę rozmiaru szerokości elementu (domyślnie okna): 'xs', 'sm', 'md' lub 'lg' (granice są w DEF.devices). WW i WH to rozmiar okna; $W to obiekt jQuery okna; SCROLLBARWIDTH() to szerokość, jaką zajmuje pasek przewijania.
SCROLLBAR(element, [options]) opakowuje element własnym paskiem przewijania i go zwraca; scrollbar.resize() przelicza go po zmianie zawartości.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE i isIE to wartości logiczne o przeglądarce, ustawiane przy starcie strony.
STYLE(css, [id], [selector]) dodaje style do head. Z id styl jest zastępowany, gdy wywołasz go ponownie z tym samym id; z selector każda reguła jest nim opakowana ('.a { }' staje się '#p .a{ }').
NODEINDEXOF(element) to pozycja elementu wśród rodzeństwa, NODEINSERT(element, reference, [before]) przenosi element za (lub przed) inny, a NODEMOVE(element, [up]) przesuwa go o jedno miejsce w dół (lub w górę).
DIFFDOM(parent, selector, html, [attribute]) sprawia, że dzieci parent pasujące do selector są takie same jak te w html, bez ponownego rysowania tych, które już są: element jest tym samym, gdy jego attribute ma tę samą wartość (bez attribute, gdy cały jego HTML jest taki sam). Usuwa te, których nie ma na nowej liście, dodaje nowe i ustawia je w kolejności html, i zwraca { add, upd, rem }. Zawartość zachowanego elementu nie jest zastępowana.
APPEARANCE({ color, dark, large, <name>: value }) ustawia wygląd strony: dark i large przełączają klasy ui-dark i ui-large body, color i każdy inny klucz stają się zmiennymi CSS :root (--color, a --rgb jest liczone z koloru) w jednym <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) ustawia nazwę będącą prefiksem kluczy w localStorage, wersję i język (DEF.localstorage, DEF.version, DEF.language) i, z env, kilka wartości 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>

Wypróbuj w przeglądarce

Edytuj przykład i uruchom go. Działa w izolowanej ramce w Twojej przeglądarce; nic nie jest wysyłane na nasz serwer.

Kod

Podgląd