zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
83 lines (73 loc) • 3.94 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZPT-JS reference - Query expressions</title>
<script type="module" src="../js/zpt.js"></script>
<script type="text/javascript" src="../lib/syntaxHighlighter/lib.js"></script>
<link rel="stylesheet" type="text/css" href="../docs.css">
<link rel="stylesheet" type="text/css" href="../lib/syntaxHighlighter/theme.css">
</head>
<body>
<div data-use-macro="'page@templates.html'">
<div data-fill-slot="'page-header'">
<h1>ZPT-JS reference - Query expressions</h1>
<ul>
<li><a href="#syntax">Syntax</a>.</li>
<li><a href="#description">Description</a>.</li>
<li><a href="#differences">Differences with ZPT</a>.</li>
<li><a href="#examples">Examples</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'syntax'">Syntax</h2>
<pre class="syntax">
query_expression ::= 'query:' expresssion
</pre>
<h2 data-attributes="id 'description'">Description</h2>
<p>
<em>Query expressions</em> evaluate arbitrary query expressions using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a>.
</p>
<p>
ZPT-JS first evaluates the expression and them invokes <code>window.document.querySelectorAll</code> to get the results.
</p>
<h2 data-attributes="id 'differences'">Differences with ZPT</h2>
<p>
<em>Query</em> expressions does not exist in ZPT.
</p>
<h2 data-attributes="id 'examples'">Examples</h2>
<p>
Let's define some HTML elements and assign them some IDs:
</p>
<pre class="brush: html">
<div>
<div>value1 = <span id="value1" class="values">10</span></div>
<div>value2 = <span id="value2" class="values">20</span></div>
<div>value3 = <span id="value3" class="values">30</span></div>
</div>
</pre>
<p>
An example using ID selector:
</p>
<pre class="brush: html">
<div>query:'#value1' = 10 = <span id="t1" data-content="query:'#value1'">must be 10</span></div>
</pre>
<p>
Some examples using class selector:
</p>
<pre class="brush: html">
<div>query:'.values' = 10,20,30 = <span id="t2" data-content="query:'.values'">must be 10,20,30</span></div>
<div>+: query:'.values' = 60 = <span id="t3" data-content="+: query:'.values'">must be 10 + 20 + 30</span></div>
<div>+: 100 query:'.values' = 160 = <span id="t4" data-content="+: 100 query:'.values'">must be 100 + 10 + 20 + 30</span></div>
</pre>
<p>
Some examples using ID and class selectors, combining them with vars:
</p>
<pre class="brush: html">
<div>query:myVar = 20 = <span id="t5" data-define="myVar '#value2'" data-content="query:myVar">must be 20</span></div>
<div>+: 200 query:myVar = 260 = <span id="t6" data-define="myVar '.values'"data-content="+: 200 query:myVar">must be 200 + 10 + 20 + 30</span></div>
</pre>
</article>
</div>
</body>
</html>