-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathwrap.html
executable file
·110 lines (103 loc) · 4.2 KB
/
wrap.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<title>VX: Cloning, Wrapping and Unwrapping</title>
<style type="text/css">
body { padding: 10px; margin: 0px;
font-family : Arial, Helvetica, sans-serif; }
#main { padding: 20px;
border: solid 2px #ccc;
background-color: #FFFEDF; }
h1 { font: bold 20pt/22pt Calibri, Myriad, Arial, Helvetica, sans-serif;
color: #960; }
h2 { font: bold 16pt Calibri, Myriad, Arial, Helvetica, sans-serif;
color: #C93; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#box div {
line-height: 100px;
text-align: center;
border: 2px solid #ccc;
border-color: #ccc #999 #999 #ccc;
background-color: #E7DF89;
}
.wrapper1 {
border: solid 3px red;
padding: 4px
}
.wrapper2 {
border: double 6px green;
padding: 6px;
}
.wrapper3 {
border: solid 4px blue;
padding: 8px;
}
</style>
<script type="text/javascript" src="scripts/vxPro.js"></script>
<script type="text/javascript">
vx.ready(function() {
var w1 = vx.$("#wrap1");
w1.onclick = function() {
vx.wrap(vx.$("#box"), '<div class="wrapper1"><\/div>');
return false;
};
var w2 = vx.$("#wrap2");
w2.onclick = function() {
vx.wrap(vx.$("#box"), '<div class="wrapper2"><\/div>');
return false;
};
var w3 = vx.$("#wrap3");
w3.onclick = function() {
vx.wrap(vx.$("#box"), '<div class="wrapper3"><\/div>');
return false;
};
var uw = vx.$("#unwrap");
uw.onclick = function() {
// We don't want to remove the page's main div after removing
// the box's wrappers, so we check and return false if
// div #main is the parent of the box.
if (vx.getAttr(vx.$("#box").parentNode, "id") == "main") {
return false;
}
vx.unwrap(vx.$("#box"));
return false;
};
var uwa = vx.$("#unwrapAll");
uwa.onclick = function() {
// Check to see if box is a child of #main.
// If it is, exit or IE will err.
if (vx.getAttr(vx.$("#box").parentNode, "id") == "main") {
return false;
}
do {
vx.unwrap(vx.$("#box"));
} while (vx.getAttr(vx.$("#box").parentNode, "id") != "main");
return false;
};
});
</script>
</head>
<body>
<div id="main">
<h1>
Clone, Wrap and Unwrap
</h1>
<p>The following links will add divs with the following class to the box below:</p>
<pre>.wrapper1 { border: solid 2px red; padding: 4px; }
.wrapper2 { border: double 6px green; padding: 6px; }
.wrapper3 { border: solid 4px blue; padding: 8px; }</pre>
<ul>
<li><a id="wrap1" href="#">Wrap with: <div class="wrapper1"></div> Red</a></li>
<li><a id="wrap2" href="#">Wrap with: <div class="wrapper2"></div> Green</a></li>
<li><a id="wrap3" href="#">Wrap with: <div class="wrapper3"></div> Blue</a></li>
<li><a id="unwrap" href="#">Remove most recent wrapper</a></li>
<li><a id="unwrapAll" href="#">Remove all wrappers</a></li>
</ul>
<h2>Wrap up the Box Below</h2>
<p>You may notice that the wrapper added is always the innermost of possible concentric wrappers. This is the opposite of how a tree adds rings. This is because the wrap method is targeting the box and wrapping it, not the collection of wrappers. Similarly, the unwrap method starts with the wrap that is immediate to the box and works its way out. Normally, the unwrap function will work its way up the DOM, removing any outer nodes, until it reaches the body tag. Unwrap could as well remove that tag, leaving the target node as the next sibling of the head tag, but I doubt anyone would want that. Therefore unwrap will never remove the body tag, even when that is the parent tag of the target element.
<div id="box">
<div>Wrap Me</div>
</div>
</div>
</body>
</html>