102 lines
2.7 KiB
HTML
102 lines
2.7 KiB
HTML
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Context Menu demo</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main>
|
||
|
|
<h1>Context Menu Demo</h1>
|
||
|
|
<div id="container">
|
||
|
|
<div id="parent">
|
||
|
|
<div id="context"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="options">
|
||
|
|
<h2>Explanation</h2>
|
||
|
|
<p>Drag the blue box to see how the red box will be aligned.</p>
|
||
|
|
<h2>Options</h2>
|
||
|
|
<h3>Alignments</h3>
|
||
|
|
<form>
|
||
|
|
<label
|
||
|
|
><span>parentH</span>
|
||
|
|
<select id="parentH">
|
||
|
|
<option>left</option>
|
||
|
|
<option>right</option>
|
||
|
|
</select></label
|
||
|
|
>
|
||
|
|
<label
|
||
|
|
><span>parentV</span>
|
||
|
|
<select id="parentV">
|
||
|
|
<option>bottom</option>
|
||
|
|
<option>top</option>
|
||
|
|
</select></label
|
||
|
|
>
|
||
|
|
<label
|
||
|
|
><span>childH</span>
|
||
|
|
<select id="childH">
|
||
|
|
<option>left</option>
|
||
|
|
<option>right</option>
|
||
|
|
</select></label
|
||
|
|
>
|
||
|
|
<label
|
||
|
|
><span>childV</span>
|
||
|
|
<select id="childV">
|
||
|
|
<option>top</option>
|
||
|
|
<option>bottom</option>
|
||
|
|
</select></label
|
||
|
|
>
|
||
|
|
<h3>Box sizes</h3>
|
||
|
|
<label
|
||
|
|
><span>parentWidth</span>
|
||
|
|
<input
|
||
|
|
id="parentWidth"
|
||
|
|
type="range"
|
||
|
|
min="100"
|
||
|
|
max="500"
|
||
|
|
value="300" /></label
|
||
|
|
><label
|
||
|
|
><span>parentHeight</span>
|
||
|
|
<input
|
||
|
|
id="parentHeight"
|
||
|
|
type="range"
|
||
|
|
min="100"
|
||
|
|
max="500"
|
||
|
|
value="300" /></label
|
||
|
|
><label
|
||
|
|
><span>contextWidth</span>
|
||
|
|
<input
|
||
|
|
id="contextWidth"
|
||
|
|
type="range"
|
||
|
|
min="100"
|
||
|
|
max="500"
|
||
|
|
value="100" /></label
|
||
|
|
><label
|
||
|
|
><span>contextHeight</span>
|
||
|
|
<input
|
||
|
|
id="contextHeight"
|
||
|
|
type="range"
|
||
|
|
min="100"
|
||
|
|
max="500"
|
||
|
|
value="100"
|
||
|
|
/></label>
|
||
|
|
<h3>Containment</h3>
|
||
|
|
<label
|
||
|
|
><span>InvertH</span><input id="invertH" type="checkbox" checked
|
||
|
|
/></label>
|
||
|
|
<label
|
||
|
|
><span>InvertV</span><input id="invertV" type="checkbox" checked
|
||
|
|
/></label>
|
||
|
|
<label
|
||
|
|
><span>Contain into</span
|
||
|
|
><input id="containInto" type="checkbox" checked
|
||
|
|
/></label>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<script type="module" src="src/index.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|