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

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Executată cu jComponent 20

ATTRD(element or event, [name]) citește data-name (implicit data-id) al unui element, al unui obiect jQuery sau al elementului unui eveniment; pentru un obiect simplu citește proprietatea.
HIDDEN(element) este true când elementul nu este afișat (el sau un părinte are display: none; un element care este copil direct al body este raportat întotdeauna ca nefiind ascuns, verificarea începe de la părintele lui); VISIBLE(element, [threshold], [mode]) este true când este în partea vizibilă a ferestrei (mode 'above' sau 'below' întreabă unde se află când nu este). NOTFOCUSED() este true când fila browserului este în fundal, iar inDOM(element) este adevărat cât timp elementul este în document.
WIDTH([element]) returnează clasa de mărime a lățimii elementului (implicit: fereastra): 'xs', 'sm', 'md' sau 'lg' (limitele sunt în DEF.devices). WW și WH sunt dimensiunea ferestrei; $W este obiectul jQuery al ferestrei; SCROLLBARWIDTH() este lățimea pe care o ocupă o bară de derulare.
SCROLLBAR(element, [options]) învelește un element cu o bară de derulare personalizată și îl returnează; scrollbar.resize() o recalculează după ce conținutul s-a schimbat.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE și isIE sunt booleeni despre browser, setați când pornește pagina.
STYLE(css, [id], [selector]) adaugă un style în head. Cu un id, stilul este înlocuit când îl apelezi din nou cu același id; cu un selector, fiecare regulă este învelită de el ('.a { }' devine '#p .a{ }').
NODEINDEXOF(element) este poziția elementului printre frații săi, NODEINSERT(element, reference, [before]) mută un element după (sau înaintea) altuia, iar NODEMOVE(element, [up]) îl mută un loc în jos (sau în sus).
DIFFDOM(parent, selector, html, [attribute]) face copiii lui parent care se potrivesc cu selector identici cu cei din html, fără a redesena pe cei care există deja: un element este același când attribute are aceeași valoare (fără attribute, când tot HTML-ul lui este la fel). Elimină cei care nu sunt în lista nouă, adaugă pe cei noi și îi pune în ordinea lui html, și returnează { add, upd, rem }. Conținutul unui element păstrat nu este înlocuit.
APPEARANCE({ color, dark, large, <name>: value }) setează aspectul paginii: dark și large comută clasele ui-dark și ui-large ale body, color și orice altă cheie devin variabile CSS ale lui :root (--color, iar --rgb este calculat din culoare) într-un singur <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) setează numele care prefixează cheile din localStorage, versiunea și limba (DEF.localstorage, DEF.version, DEF.language) și, cu env, mai multe valori 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>

Încearcă în browserul tău

Editează exemplul și rulează-l. Rulează într-un cadru izolat din browserul tău; nimic nu este trimis către serverul nostru.

Cod

Previzualizare