web-fixtures/js_test.html

<!DOCTYPE html>
<html>
<head>
    <title>JS elements test</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <style>
        #draggable {
            width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;
            background:#ccc;
            opacity:0.5;
        }
        #droppable {
            width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;
            background:#eee;
        }
        #waitable {
            width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="elements">
        <div id="clicker">not clicked</div>
        <div id="mouseover-detector">no mouse action detected</div>
        <div id="invisible" style="display: none">invisible man</div>
        <input id="focus-blur-detector" type="text" value="no action detected"/>
        <input class="input" type="text" value="" />
        <div class="text-event"></div>
    </div>

    <div id="draggable" class="ui-widget-content"></div>

    <div id="droppable" class="ui-widget-header">
        <p>Drop here</p>
    </div>

    <div id="waitable"></div>

    <script src="js/jquery-1.6.2-min.js"></script>
    <script src="js/jquery-ui-1.8.14.custom.min.js"></script>
	<script>
		$(document).ready(function() {
            var $clicker = $('#clicker');

            $clicker.click(function() {
                $(this).text('single clicked');
            });

            $clicker.dblclick(function() {
                $(this).text('double clicked');
            });

            $clicker.bind('contextmenu', function() {
                $(this).text('right clicked');
            });

            var $focusDetector = $('#focus-blur-detector');

            $focusDetector.focus(function() {
                $(this).val('focused');
            });

            $focusDetector.blur(function() {
                $(this).val('blured');
            });

            $('#mouseover-detector').mouseover(function() {
                $(this).text('mouse overed');
            });

            $('.elements input.input').bind('keydown keypress keyup', function(ev) {
                console.log('event=%s keyCode=%s altKey=%s ctrlKey=%s shiftKey=%s metaKey=%s', ev.type, ev.keyCode, ev.altKey, ev.ctrlKey, ev.shiftKey, ev.metaKey);
                $('.text-event').append([
                    'event=' + ev.type,
                    // chrome and firefox are returning different values on keypress
                    'keyCode=' + (ev.keyCode || ev.charCode),
                    'modifier=' + ((ev.altKey * 1) + ' / ' + (ev.ctrlKey * 1) + ' / ' + (ev.shiftKey * 1) + ' / ' + (ev.metaKey * 1)),
                    null
                ].join(';') + "<br/>\n");
            });

            $( "#draggable" ).draggable();
            $( "#droppable" ).droppable({
                drop: function( event, ui ) {
                    $( this ).find( "p" ).html( "Dropped!" );
                }
            });

            var t1, t2;

            $('#waitable').click(function() {
                var el = $(this);

                el.html('');
                clearTimeout(t1);
                clearTimeout(t2);

                t1 = setTimeout(function() {
                    el.html('<div>arrived</div>');
                }, 1000);

                t2 = setTimeout(function() {
                    el.html('<div>timeout</div>');
                }, 2000);
            });
		});
	</script>
</body>
</html>