oxjs/examples/ui/mouse_events/js/example.js

52 lines
1.7 KiB
JavaScript
Raw Normal View History

2012-04-14 10:23:32 +00:00
/*
This example demonstrates the mouse events that any Ox.Element fires.
*/
2012-04-15 19:56:39 +00:00
Ox.load('UI', function() {
2012-04-14 10:12:09 +00:00
var $target = Ox.Element()
2012-04-15 12:21:15 +00:00
.addClass('OxMonospace')
2012-04-14 10:12:09 +00:00
.attr({id: 'target'})
2012-04-14 11:49:58 +00:00
.html('click/hold/drag')
2012-04-14 10:12:09 +00:00
.appendTo(Ox.$body),
$log = Ox.Element()
.attr({id: 'log'})
.appendTo(Ox.$body),
$clear = Ox.Element()
2012-04-15 12:21:15 +00:00
.addClass('OxMonospace')
2012-04-14 10:12:09 +00:00
.attr({id: 'clear'})
.html('clear log')
.bind({click: function() {
$log.empty();
}})
.appendTo(Ox.$body);
[
'anyclick', 'singleclick', 'doubleclick', 'mousedown', 'mouserepeat',
'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend'
].forEach(function(event) {
$target.bindEvent(event, function(e) {
var date = new Date();
$('<div>')
2012-04-15 12:21:15 +00:00
.addClass('OxMonospace')
2012-04-14 10:12:09 +00:00
.html(
Ox.formatDate(date, '%H:%M:%S')
+ '.' + (Ox.pad(date % 1000, 3))
+ ' <span style="font-weight: bold">' + event + '</span> '
+ JSON.stringify(
Ox.extend(e.clientX ? {
clientX: e.clientX,
clientY: e.clientY,
} : {}, e.clientDX ? {
clientDX: e.clientDX,
clientDY: e.clientDY
} : {})
)
.replace(/"/g, '')
.replace(/,/g, ', ')
.replace(/:/g, ': ')
)
.prependTo($log);
});
});
});