-
Notifications
You must be signed in to change notification settings - Fork 0
/
navod.html
58 lines (49 loc) · 2.97 KB
/
navod.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Navod pro DOM Inspektora</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h1>Dokumentace pro WAP projekt: DOM inspektor</h1>
<p>DOM inspektor slouží pro zobrazování DOM stromu dané html stránky. Zobrazuji se pouze uzly typu Document, Element a Text.
Dále umožňuje při kliknutí na element ve stránce barevně vyznačit jeho odpovídající ekvivalent ve seznamu uzlu. Podobně
při kliknutí do stromu se vyznačí element ve html stránce. Projekt také umožňuje měnit elementům atributy class a id.
</p>
<h2>Použití v dokumentu</h2>
<p>
Pro správnou funkčnost inspektoru se musí splnit 2 podmínky: <br/><br/>
1. Do hlavičky html dokumentu se musí vložit odkaz na script s inpektorem: <br/>
<code> <script type="text/javascript" src="domInspektor.js"></script> </code> <br/><br/>
2. Na konec body elementu se musí vložit část skriptu pro inicializaci inspektoru: <br/>
<code> <script>createInspektor();</script> </code>
</p>
<p>
Součástí je i css soubor - inspektor.css, který obsahuje definici stylu pro všechny prvky DOM inspektora.
Soubor je opatřen komentáří k jednotlím definicím.
</p>
<h2>Použití</h2>
<p>
DOM strom se zobrazuje jako neočíslovaný seznam. Obsah textových uzlu se zobrazuje pouze jako řetězec Text. Při pohybu myší nad
tímto řetězcem se pak zobrazí Tooltip se skutečným obsahem textového uzlu.
</p>
<p>
Při kliknutí na element se jeho ekvivalentnímu prvku DOM Inspektoru nastaví třída <code>coloring</code>. Podobně i
při kliknutí na položku v seznamu DOM prvků.Třída <code>coloring</code> má nastaveno barvení pozadí. Při kliknutí
na jiný prvek se třída odebere a tím se zruší zabarvení prvku. Funkce: <strong>elemIndexBody(node), elemIndexInspektor(node),
setColor(newTarget)</strong>
</p>
<p>
Při dvojkliku na prvek v inspektoru se otevře zadávací "dialog", pomocí kterého lze měnit atributy class a id.
Funkce: <strong>modalWindow()</strong> a vnitřní funkce v <strong>setEventDialog()</strong>. Pokud se klikne mimo dialog nebo na k
</p>
</div>
</body>
</html>