0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

move examples

Browse source
This commit is contained in:
rolux 2012-06-21 23:14:38 +02:00
commit c3047a1586
47 changed files with 52 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

52
examples/ui/mouse_events/css/example.css Normal file
View file

@ -0,0 +1,52 @@
#clear {
position: absolute;
left: 256px;
right: 0px;
height: 14px;
padding: 2px 0 0 2px;
cursor: pointer;
}
#log {
position: absolute;
left: 256px;
top: 16px;
right: 0;
bottom: 0;
border-width: 0;
overflow-y: auto;
}
#target {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 253px;
padding: 2px 0 0 2px;
border-width: 0;
font-weight: bold;
cursor: crosshair;
}
.OxThemeClassic #clear {
background: rgb(240, 240, 240);
}
.OxThemeClassic #log {
border-top: 1px solid rgb(208, 208, 208);
background: rgb(255, 255, 255);
}
.OxThemeClassic #target {
border-right: 1px solid rgb(208, 208, 208);
background: rgb(224, 224, 224);
}
.OxThemeModern #clear {
background: rgb(16, 16, 16);
}
.OxThemeModern #log {
border-top: 1px solid rgb(48, 48, 48);
background: rgb(0, 0, 0)
}
.OxThemeModern #target {
border-right: 1px solid rgb(48, 48, 48);
background: rgb(32, 32, 32);
}

13
examples/ui/mouse_events/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" type="image/png" href="../../../source/Ox.UI/themes/classic/png/icon16.png"/>
<link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { e.origin == window.location.origin && eval(e.data); });</script>
</head>
<body></body>
</html>

51
examples/ui/mouse_events/js/example.js Normal file
View file

@ -0,0 +1,51 @@
/*
This example demonstrates the mouse events that any Ox.Element fires.
*/
Ox.load('UI', function() {
var $target = Ox.Element()
.addClass('OxMonospace')
.attr({id: 'target'})
.html('click/hold/drag')
.appendTo(Ox.$body),
$log = Ox.Element()
.attr({id: 'log'})
.appendTo(Ox.$body),
$clear = Ox.Element()
.addClass('OxMonospace')
.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>')
.addClass('OxMonospace')
.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);
});
});
});