add mouse events demo
This commit is contained in:
rlx
parent
07be4293a5
commit
4480b3e807
3 changed files with 93 additions and 16 deletions
|
|
@ -922,7 +922,8 @@ requires
|
|||
trigger dragpause
|
||||
mouseup: trigger dragend
|
||||
*/
|
||||
var dragTimeout = 0,
|
||||
var clientX, clientY,
|
||||
dragTimeout = 0,
|
||||
mouseInterval = 0;
|
||||
if (!self.mouseTimeout) {
|
||||
// first mousedown
|
||||
|
|
@ -935,20 +936,18 @@ requires
|
|||
that.triggerEvent('singleclick', e);
|
||||
} else {
|
||||
// mouserepeat, drag
|
||||
that.triggerEvent({
|
||||
mouserepeat: e,
|
||||
dragstart: e
|
||||
});
|
||||
mouseInterval = setInterval(function() {
|
||||
that.triggerEvent('mouserepeat');
|
||||
}, 50);
|
||||
clientX = e.clientX;
|
||||
clientY = e.clientY;
|
||||
that.triggerEvent('dragstart', e);
|
||||
mouserepeat();
|
||||
mouseInterval = setInterval(mouserepeat, 50);
|
||||
Ox.UI.$window.unbind('mouseup', mouseup)
|
||||
.mousemove(mousemove)
|
||||
.one('mouseup', function(e) {
|
||||
clearInterval(mouseInterval);
|
||||
clearTimeout(dragTimeout);
|
||||
Ox.UI.$window.unbind('mousemove', mousemove);
|
||||
that.triggerEvent('dragend', e);
|
||||
that.triggerEvent('dragend', extend(e));
|
||||
});
|
||||
that.one('mouseleave', function() {
|
||||
clearInterval(mouseInterval);
|
||||
|
|
@ -959,20 +958,29 @@ requires
|
|||
// second mousedown
|
||||
clearTimeout(self.mouseTimeout);
|
||||
self.mouseTimeout = 0;
|
||||
that.triggerEvent('doubleclick');
|
||||
that.triggerEvent('doubleclick', e);
|
||||
}
|
||||
Ox.UI.$window.one('mouseup', mouseup);
|
||||
function extend(e) {
|
||||
return Ox.extend({
|
||||
clientDX: e.clientX - clientX,
|
||||
clientDY: e.clientY - clientY
|
||||
}, e);
|
||||
}
|
||||
function mousemove(e) {
|
||||
e = extend(e);
|
||||
clearTimeout(dragTimeout);
|
||||
dragTimeout = setTimeout(function() {
|
||||
that.triggerEvent({
|
||||
dragpause: e
|
||||
});
|
||||
that.triggerEvent('dragpause', e);
|
||||
}, 250);
|
||||
that.triggerEvent('drag', e);
|
||||
}
|
||||
function mouserepeat() {
|
||||
that.triggerEvent('mouserepeat');
|
||||
}
|
||||
function mouseup(e) {
|
||||
if (!self.mouseup) { // fixme: shouldn't be necessary, bound only once
|
||||
// only trigger on firse mouseup
|
||||
if (!self.mouseup) {
|
||||
that.triggerEvent('anyclick', e);
|
||||
self.mouseup = true;
|
||||
}
|
||||
|
|
@ -1115,13 +1123,13 @@ requires
|
|||
***/
|
||||
if (Ox.isObject(arguments[0])) {
|
||||
Ox.forEach(arguments[0], function(data, event) {
|
||||
if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend', 'playing'].indexOf(event) == -1) {
|
||||
if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragpause', 'dragend', 'playing'].indexOf(event) == -1) {
|
||||
Ox.print(that.id, self.options.id, 'trigger', event, data);
|
||||
}
|
||||
self.$eventHandler.trigger('ox_' + event, data);
|
||||
});
|
||||
} else {
|
||||
if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend', 'playing'].indexOf(arguments[0]) == -1) {
|
||||
if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragpause', 'dragend', 'playing'].indexOf(arguments[0]) == -1) {
|
||||
Ox.print(that.id, self.options ? self.options.id : '', 'trigger', arguments[0], arguments[1] || {});
|
||||
}
|
||||
self.$eventHandler.trigger('ox_' + arguments[0], arguments[1] || {});
|
||||
|
|
|
|||
13
demos/mouse/index.html
Normal file
13
demos/mouse/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>OxJS Mouse Events Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
||||
<script type="text/javascript" src="../../build/js/jquery-1.5.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
||||
<script type="text/javascript" src="js/mouse.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
56
demos/mouse/js/mouse.js
Normal file
56
demos/mouse/js/mouse.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
$(function() {
|
||||
var $target = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
width: '256px',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
background: 'rgb(255, 0, 0)'
|
||||
})
|
||||
.html('Click here')
|
||||
.appendTo(Ox.UI.$body),
|
||||
$clear = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: '256px',
|
||||
right: 0,
|
||||
height: '16px',
|
||||
background: 'rgb(192, 192, 192)'
|
||||
})
|
||||
.html('Clear log')
|
||||
.click(function() {
|
||||
$log.empty();
|
||||
})
|
||||
.appendTo(Ox.UI.$body);
|
||||
$log = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: '256px',
|
||||
right: 0,
|
||||
top: '16px',
|
||||
bottom: 0,
|
||||
overflowY: 'auto'
|
||||
})
|
||||
.appendTo(Ox.UI.$body);
|
||||
[
|
||||
'anyclick', 'singleclick', 'doubleclick', 'mouserepeat',
|
||||
'dragstart', 'drag', 'dragpause', 'dragend'
|
||||
].forEach(function(event) {
|
||||
$target.bindEvent(event, function(foo, e) {
|
||||
var date = new Date();
|
||||
$('<div>')
|
||||
.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
|
||||
} : {}))
|
||||
)
|
||||
.prependTo($log.$element);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue