2015-08-17 17:00:26 -07:00
<!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 first" type = "text" value = "" / >
< input class = "input second" type = "text" value = "" / >
< input class = "input third" 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() {
2015-10-08 11:40:12 -07:00
var $clicker = $('#clicker');
$clicker.click(function() {
2015-08-17 17:00:26 -07:00
$(this).text('single clicked');
});
2015-10-08 11:40:12 -07:00
$clicker.dblclick(function() {
2015-08-17 17:00:26 -07:00
$(this).text('double clicked');
});
2015-10-08 11:40:12 -07:00
$clicker.bind('contextmenu', function() {
2015-08-17 17:00:26 -07:00
$(this).text('right clicked');
});
2015-10-08 11:40:12 -07:00
var $focusDetector = $('#focus-blur-detector');
$focusDetector.focus(function() {
2015-08-17 17:00:26 -07:00
$(this).val('focused');
});
2015-10-08 11:40:12 -07:00
$focusDetector.blur(function() {
2015-08-17 17:00:26 -07:00
$(this).val('blured');
});
$('#mouseover-detector').mouseover(function() {
$(this).text('mouse overed');
});
$('.elements input.input.first').keydown(function(ev) {
$('.text-event').text('key downed:' + ev.altKey * 1 + ' / ' + ev.ctrlKey * 1 + ' / ' + ev.shiftKey * 1 + ' / ' + ev.metaKey * 1);
});
$('.elements input.input.second').keypress(function(ev) {
$('.text-event').text('key pressed:' + ev.which + ' / ' + ev.altKey * 1 + ' / ' + ev.ctrlKey * 1 + ' / ' + ev.shiftKey * 1 + ' / ' + ev.metaKey * 1);
});
$('.elements input.input.third').keyup(function(ev) {
$('.text-event').text('key upped:' + ev.which + ' / ' + ev.altKey * 1 + ' / ' + ev.ctrlKey * 1 + ' / ' + ev.shiftKey * 1 + ' / ' + ev.metaKey * 1);
});
$( "#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 >
