SuperX-Kernmodul
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

121 lines
4.5 KiB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Tooltip Widget Test</title>
<script type="text/javascript">
/* since we are loading big images (actually, background-images), need to workaround the mozilla bug */
var djConfig = {isDebug: true, delayMozLoadingFix: true };
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.Tooltip");
</script>
<style>
.tt { border-bottom: 1px dotted black; cursor: pointer; }
/* override tooltip style for this page */
body .dojoTooltip { color: blue; border: solid 2px blue; padding: 4px; }
/* and then have some tooltips that look different than the others (just for testing) */
body .waves { color: red; font-style: italic; background: url(images/2.jpg) top right; border: red 3px dotted;}
body .bridge { color: yellow; background: url(images/1.jpg) bottom right; font-family: cursive; font-size: 14pt; }
</style>
</head>
<body>
<h1>Tooltip test</h1>
<p>Mouse-over the items below to test tooltips:</p>
<p>
<span id="one" class="tt">text</span>
<span dojoType="tooltip" connectId="one">
<b>
<span style="color: blue;">rich formatting</span>
<span style="color: red; font-size: x-large;"><i>!</i></span>
</b>
</span>
<a id="three" href="#bogus">anchor</a>
<span dojoType="tooltip" connectId="three" caption="inline caption w/fade in" toggle="fade"></span>
</p>
<button id="four">button</button>
<span dojoType="tooltip" connectId="four" caption="tooltip on button" toggle="fade"></span>
<img id="five" src="images/question.gif"></img>
<span dojoType="tooltip" connectId="five" toggle="explode" toggleDuration="250" class="waves">
exploding tooltip
</span>
<img id="six" src="images/question.gif"></img>
<span dojoType="tooltip" connectId="six" toggle="explode" toggleDuration="500" class="waves">
slowly exploding tooltip
</span>
<select id="seven">
<option value="alpha">Alpha</option>
<option value="beta">Beta</option>
<option value="gamma">Gamma</option>
<option value="delta">Delta</option>
</select>
<span dojoType="tooltip" connectId="seven" href="doc0.html" toggle="fade"
executeScripts="true" style="width: 300px;" class="bridge"></span>
<p></p>
<form>
<input type="input" id="id1" value="0"/><br>
<input type="input" id="id2" value="1"/><br>
<input type="input" id="id3" value="2"/><br>
<input type="input" id="id4" value="3"/><br>
<input type="input" id="id5" value="4"/><br>
<input type="input" id="id6" value="5"/><br>
</form>
<br>
<div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;">
<span id="s1">text</span><br><br><br>
<span id="s2">text</span><br><br><br>
<span id="s3">text</span><br><br><br>
<span id="s4">text</span><br><br><br>
<span id="s5">text</span><br><br><br>
</div>
<span dojoType="tooltip" connectId="id1" delay="100" toggle="explode">some text 1</span>
<span dojoType="tooltip" connectId="id2" delay="100" toggle="explode">some text 2</span>
<span dojoType="tooltip" connectId="id3" delay="100" toggle="explode">some text 3</span>
<span dojoType="tooltip" connectId="id4" delay="100" toggle="explode">some text 4</span>
<span dojoType="tooltip" connectId="id5" delay="100" toggle="explode">some text 5</span>
<span dojoType="tooltip" connectId="id6" toggle="explode">some text </span>
<span dojoType="tooltip" connectId="s1" delay="100" toggle="explode">some text 6</span>
<span dojoType="tooltip" connectId="s2" delay="100" toggle="explode">some text 7</span>
<span dojoType="tooltip" connectId="s3" delay="100" toggle="explode">some text 8</span>
<span dojoType="tooltip" connectId="s4" delay="100" toggle="explode">some text 9</span>
<span dojoType="tooltip" connectId="s5" delay="100" toggle="explode">some text 10</span>
<div style="position: absolute; bottom: 0">
Test tooltips on stuff on bottom of screen. Should appear above the element.
<span id="b1" class="tt">text</span>
<span dojoType="tooltip" connectId="b1">
<b>
<span style="color: blue;">rich formatting</span>
<span style="color: red; font-size: x-large;"><i>!</i></span>
</b>
</span>
<select id="b2">
<option value="alpha">Alpha</option>
<option value="beta">Beta</option>
<option value="gamma">Gamma</option>
<option value="delta">Delta</option>
</select>
<span dojoType="tooltip" connectId="b2" href="doc0.html" executeScripts="true" style="width: 300px;"></span>
</div>
</body>
</html>