lenn
/
angular-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
							<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Testing Javascript</title>
    <script type="text/javascript">
        var seen = {};

        function updateContent(input) {
            document.getElementById('resultParagraph').innerHTML = input.value;
        }

        function displayMessage(message) {
            document.getElementById('resultParagraph').innerHTML = message;
        }

        function appendMessage(message) {
            document.getElementById('resultParagraph').innerHTML += message + " ";
        }

        function register(message) {
          if (!seen[message]) {
            appendMessage(message);
            seen[message] = true;
          }
        }

        function delayedShowHide(delay, show) {
          var blackBox = document.getElementById('clickToHide');
          window.setTimeout(function() {
            blackBox.style.display = show ? '' : 'none';
          }, delay);
        }
    </script>
    <script type="text/javascript">
        var startList = function() {
            // Ugh. Let's hope no-one is faking their user agent when running the tests
            if (navigator.userAgent.indexOf("MSIE") != -1) {
                var navRoot = document.getElementById("nav");
                for (var i = 0; i < navRoot.childNodes.length; i++) {
                    var node = navRoot.childNodes[i];
                    if (node.nodeName == "LI") {
                        node.onmouseover = function() {
                            this.className += " over";
                        };
                        node.onmouseout = function() {
                            this.className = this.className.replace(" over", "");
                        };
                    }
                }
            }
        };
        window.onload=startList;
    </script>
    <style type="text/css">
        #nav {
            padding: 0; margin: 0; list-style: none;
        }
        #nav li {
            float: left; position: relative; width: 10em;
        }
        #nav li ul {
            display: none; position: absolute; top: 1em; left: 0;
        }
        #nav li > ul { top: auto; left: auto; }
        #nav li:hover ul, #nav li.over ul{ display: block; background: white; }
    </style>
</head>
<body>
<h1>Type Stuff</h1>

<div>
    <ul id="nav">
        <li id="menu1">Menu 1
            <ul>
                <li id="item1" onclick="displayMessage('item 1');">Item 1</li>
                <li>Item 2</li>
            </ul>
        </li>
    </ul>
</div>

<div id="resultContainer" height="30">&nbsp;
  <div id="result" style="width:300;height:60">
    <p id="resultParagraph">&nbsp;</p>
  </div>

</div>
                                                                                         
<div id="formageddon">
    <form action="#">
        Key Up: <input type="text" id="keyUp" onkeyup="javascript:updateContent(this)"/><br/>
        Key Down: <input type="text" id="keyDown" onkeydown="javascript:updateContent(this)"/><br/>
        Key Press: <input type="text" id="keyPress" onkeypress="javascript:updateContent(this)"/><br/>
        Change: <input type="text" id="change" onkeypress="javascript:displayMessage('change')"/><br/>
        <textarea id="keyDownArea" onkeydown="javascript:updateContent(this)" rows="2" cols="15"></textarea>
        <textarea id="keyPressArea" onkeypress="javascript:updateContent(this)" rows="2" cols="15"></textarea>
        <textarea id="keyUpArea" onkeyup="javascript:updateContent(this)" rows="2" cols="15"></textarea>
        <select id="selector" onchange="javascript:updateContent(this)">
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
        </select>
        <select id="selector2" onclick="javascript:updateContent(this)">
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
        </select>
        <input type="checkbox" id="checkbox" value="checkbox thing" onchange="javascript:updateContent(this)"/>
        <input id="clickField" type="text" onclick="document.getElementById('clickField').value='Clicked';" value="Hello"/>
        <input id="doubleClickField" type="text" onclick="document.getElementById('doubleClickField').value='Clicked';" ondblclick="document.getElementById('doubleClickField').value='DoubleClicked';" oncontextmenu="document.getElementById('doubleClickField').value='ContextClicked'; return false;" value="DoubleHello"/>
        <input id="clearMe" value="Something" onchange="displayMessage('Cleared')"/>
    </form>
</div>

<div>
    <p><a href="#" onclick="javascript:document.title='Changed'">Change the page title!</a></p>

    <p><a onclick="javascript:document.title='Changed'" id="nohref">No href</a></p>

    <p><a id="updatediv" href="#" onclick="javascript:document.getElementById('dynamo').innerHTML = 'Fish and chips!';">Update a
        div</a></p>
</div>

<div id="dynamo">What's for dinner?</div>

<div id="mousedown" onmousedown="javascript:displayMessage('mouse down');">
    <p>Click for the mouse down event</p>
    <span><p id="child">Here's some text</p></span>
</div>

<div id="mouseup" onmouseup="javascript:displayMessage('mouse up');">
    <p>Click for the mouse up event</p>
</div>

<div id="mouseclick" onclick="javascript:displayMessage('mouse click');">
    <p>Click for the mouse click event</p>
</div>

<div id="error" onclick="document.getElementById('doesnotexist').innerHTML = 'cheese';">
    Clicking this causes a JS exception in the click handler
</div>

<div>
  <form action="resultPage.html" id="on-form">
    <input id="theworks"
           onfocus="appendMessage('focus')"
           onkeydown="appendMessage('keydown')"
           onkeypress="appendMessage('keypress')"
           onkeyup="appendMessage('keyup')"
           onblur="appendMessage('blur')"
           onchange="appendMessage('change')"
           />

    <input id="changeable" name="changeable" onfocus="appendMessage('focus')" onchange="appendMessage('change')" onblur="appendMessage('blur')"/>
           
    <button type="button" id="plainButton" 
    		onfocus="appendMessage('focus')"
           	onkeydown="appendMessage('keydown')"
           	onkeypress="appendMessage('keypress')"
           	onkeyup="appendMessage('keyup')"
           	onblur="appendMessage('blur')"
           	onclick="appendMessage('click')"
           	onmousedown="appendMessage('mousedown ')" 
           	onmouseup="appendMessage('mouseup ')"
            onmouseover="register('mouseover ')"
            onmousemove="register('mousemove ')"
    >
        <b>Go somewhere</b>
    </button>
    <button type="submit" id="submittingButton"><emph>submit</emph></button>
    <button type="button" id="jsSubmitButton" onclick="javascript:document.getElementById('on-form').submit();">Submitomatic</button>

    <button type="button" id="switchFocus" onclick="document.getElementById('theworks').focus();">Switch focus</button>
    <button type="button" onclick="var element = document.getElementById('switchFocus'); var clickEvent = document.createEvent('MouseEvents'); clickEvent.initMouseEvent('click', true, true, null, 0, 0, 0, 0, 0,false, false, false, false, 0, element);element.dispatchEvent(clickEvent);">Do magic</button><br/>
    <label id="labelForCheckbox" for="labeledCheckbox" onclick="appendMessage('labelclick')">Toggle checkbox</label><input type="checkbox" id="labeledCheckbox" onclick="appendMessage('chboxclick')"/>
  </form>
  
  <form action="javascriptPage.html" id="submitListeningForm" onsubmit="appendMessage('form-onsubmit '); return false;">
    <p>
      <input id="submitListeningForm-text" type="text" onsubmit="appendMessage('text-onsubmit ')" onclick="appendMessage('text-onclick ');" />
      <input id="submitListeningForm-submit" type="submit" onsubmit="appendMessage('submit-onsubmit ')" onclick="appendMessage('submit-onclick ');" />
    </p>
  </form>
</div>

<p id="suppressedParagraph" style="display: none">A paragraph suppressed using CSS display=none</p>

<div>
    <p id="displayed">Displayed</p>

    <form action="#"><input type="hidden" name="hidden" /> </form>

    <p id="none" style="display: none;">Display set to none</p>

    <p id="hidden" style="visibility: hidden;">Hidden</p>

    <div id="hiddenparent" style="height: 2em; display: none;">
      <div id="hiddenchild">
        <a href="#" id="hiddenlink">ok</a>
      </div>
    </div>
    
    <div style="visibility: hidden;">
      <span>
        <input id="unclickable" />
        <input type="checkbox" id="untogglable" checked="checked" />Check box you can't see
      </span>
    </div>

    <p id="outer" style="visibility: hidden">A <b id="visibleSubElement" style="visibility: visible">sub-element that is explicitly visible</b> using CSS visibility=visible</p>
</div>

<div>
    <form>
        <input type="text" id="keyReporter" size="80"
               onkeyup="appendMessage('up: ' + event.keyCode)"
               onkeypress="appendMessage('press: ' + event.keyCode)"
               onkeydown="displayMessage(''); appendMessage('down: ' + event.keyCode)" />
        <input name="suppress" onkeydown="if (event.preventDefault) event.preventDefault(); event.returnValue = false; return false;" onkeypress="appendMessage('press');"/>
    </form>
</div>

<!-- Used for testing styles -->
<div style="background-color: green;" id="green-parent">
  <p id="style1">This should be greenish</p>
    <ul>
      <li id="green-item">So should this</li>
      <li id="red-item" style="background-color: red;">But this is red</li>
    </ul>
</div>

<a href="#" id="close" onclick="window.close();">Close window</a>

<div id="delete" onclick="var d = document.getElementById('deleted'); this.removeChild(d);">
    <p id="deleted">I should be deleted when you click my containing div</p>
    <p>Whereas, I should not</p>
</div>

<div>
    <span id="hideMe" onclick="this.style.display = 'none';">Click to hide me.</span>
</div>

<div id="hideOnBlur" tabindex="0"
     style="width: 100px; height: 100px; border: 1px solid red"
     onblur="appendMessage('blur'); this.style.display = 'none';">
  <div id="hideOnBlurChild"
       style="width: 30px; height: 30px; border: 1px solid blue">
    x
  </div>
  Focusable. Will hide when focus is lost.
</div>

<div style="margin-top: 10px;">
  Click actions delayed by 3000ms:
  <div id="clickToShow" onclick="delayedShowHide(3000, true);"
       style="float: left;width: 100px;height:100px;border: 1px solid black;">
    Click to show black box
  </div>
  <div id="clickToHide" onclick="delayedShowHide(3000, false);"
       style="float: left;width: 100px;height:100px;border: 1px solid black;
              background-color: black; color: white; display: none;">
    Click to hide black box
  </div>
  <div style="clear: both"></div>
</div>

<a id="new_window" onmouseup="window.open('closeable_window.html', 'close_me')" href="#">Click me to open a new window</a>

<a id="throwing-mouseover" onmouseover="throw new Error()" href="#throwing-mouseover">Mouse over me will throw a JS error</a>

<div id="parent">
    <span id="movable" onmouseover="var p = document.getElementById('movable'); displayMessage('parent matches? ' + (p != event.relatedTarget));">
        Click on me to show the related target
    </span>
</div>

<div id="zero" style="width:0;height:0">
  <div>
    <img src="map.png">
  </div>
</div>

</body>
</html>