DOM помощници: ATTRD, HIDDEN, VISIBLE, WIDTH, STYLE, NODEMOVE, DIFFDOM и APPEARANCE

jComponent 20 · jcomponent@20 jcomponentfrontenddomutilities Изпълнено с jComponent 20

ATTRD(element or event, [name]) чете data-name (по подразбиране data-id) на елемент, jQuery обект или елемента на събитие; за обикновен обект чете свойството.
HIDDEN(element) е true, когато елементът не е показан (той или родител има display: none; елемент, който е пряко дете на body, винаги се отчита като нескрит, проверката започва от неговия родител); VISIBLE(element, [threshold], [mode]) е true, когато е във видимата част на прозореца (mode 'above' или 'below' пита къде е, когато не е). NOTFOCUSED() е true, когато разделът на браузъра е на заден план, а inDOM(element) е истина, докато елементът е в документа.
WIDTH([element]) връща класа на размера на ширината на елемента (по подразбиране: прозореца): 'xs', 'sm', 'md' или 'lg' (границите са в DEF.devices). WW и WH са размерът на прозореца; $W е jQuery обектът на прозореца; SCROLLBARWIDTH() е ширината, която заема лентата за превъртане.
SCROLLBAR(element, [options]) обвива елемент със собствена лента за превъртане и го връща; scrollbar.resize() я преизчислява, след като съдържанието се е променило.
isTOUCH, isMOBILE, isROBOT, isSTANDALONE, isPRIVATEMODE и isIE са булеви за браузъра, задават се при стартиране на страницата.
STYLE(css, [id], [selector]) добавя style в head. С id стилът се замества, когато го извикате отново със същото id; със selector всяко правило се обвива от него ('.a { }' става '#p .a{ }').
NODEINDEXOF(element) е позицията на елемента сред неговите събратя, NODEINSERT(element, reference, [before]) премества елемент след (или преди) друг, а NODEMOVE(element, [up]) го премества с едно място надолу (или нагоре).
DIFFDOM(parent, selector, html, [attribute]) прави децата на parent, съвпадащи със selector, същите като тези в html, без прерисуване на вече съществуващите: елементът е същият, когато неговият attribute има същата стойност (без attribute, когато целият му HTML е еднакъв). Премахва тези, които не са в новия списък, добавя новите и ги подрежда по html, и връща { add, upd, rem }. Съдържанието на запазен елемент не се заменя.
APPEARANCE({ color, dark, large, <name>: value }) задава външния вид на страницата: dark и large превключват класовете ui-dark и ui-large на body, color и всеки друг ключ стават CSS променливи на :root (--color, а --rgb се изчислява от цвета) в един <style id="cssappearance">.
ENVIRONMENT(name, version, language, [env]) задава името, което е префикс на ключовете в localStorage, версията и езика (DEF.localstorage, DEF.version, DEF.language) и, с env, няколко стойности на 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>

Опитайте в браузъра си

Редактирайте примера и го изпълнете. Работи в изолирана рамка във вашия браузър; нищо не се изпраща към нашия сървър.

Код

Преглед