library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Start simulating tests with userAction combined with Richard's animated cursor

Browse Source
This commit is contained in:
Eduardo Lundgren 2008-05-30 04:35:54 +00:00
parent c8297ce04b
commit 3c2a4f57af
2 changed files with 55 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
ui/tests/resizable.html
View File

@ -14,142 +14,28 @@
<script type="text/javascript" src="resizable.js"></script> <script type="text/javascript" src="resizable.js"></script>
<script type="text/javascript" src="jquery.useraction.js"></script> <script type="text/javascript" src="jquery.useraction.js"></script>
</head> </head>
<style>
.ui-fake-cursor {
position: absolute;
background: url(cursors/win/auto.png);
height: 32px; width: 32px;
top: 270px; left: 0px;
}
</style>
<body> <body>
<h1 id="header">jQuery Test Suite</h1> <h1 id="header">jQuery Test Suite</h1>
<h2 id="banner"></h2> <h2 id="banner"></h2>
<h2 id="userAgent"></h2> <h2 id="userAgent"></h2>
<h2 id="log"></h2> <h2 id="log" style="height: 50px;overflow-y:auto;"></h2>
<div id="main" style="border: 1px solid black; padding: 10px; margin: 10px;"> <div id="main" style="border: 1px solid black; padding: 10px; margin: 10px;">
<div id='resizable1' style="background: green; width: 200px; height: 100px;">I'm a resizable.</div> <div id='resizable1' style="background: green; width: 200px; height: 100px;">I'm a resizable.</div>
</div> </div>
<ol id="tests"></ol> <ol id="tests"></ol>
<div class="ui-fake-cursor"/>
<button id="btn">Start user action</button>
<input type="text" id="key">
</body> </body>
</html> </html>
<script>
var animateClick = function(co) {
var img = $("<img src='images/click.png' width='1'>").appendTo("body")
.css({ position: "absolute", zIndex: 1000, left: co.x, top: co.y })
.animate({ width: 80, height: 80, left: co.x-40, top: co.y-40, opacity: 'hide' }, 1000, function() { $(this).remove(); });
};
$(function() {
$('#resizable1').mouseover(function() {
$(this).css('background', 'red');
});
$('#resizable1').mouseout(function() {
$(this).css('background', 'yellow');
});
$('#key').keydown(function() {
console.log('keydown')
});
});
$('#btn').click(function() {
// TODO - works in all browsers, but have to fix a bug on opera
$('#key').userAction("keydown", {
charCode: 67,
keyCode: 67,
after: function(e) {
//console.log(e)
},
before: function(e) {
//console.log(e)
}
});
// mouseover on the center of the target
$('.ui-resizable-e').userAction("mouseover");
$('.ui-resizable-e').userAction("mousedown", {
after: function(e, x, y) {
animateClick({x:x, y:y})
}
});
for (var x = 0; x < 40; x++) {
// offset the center(x,y) in [dx, dy]
$('.ui-resizable-e').userAction("mousemove", [x++, 0]);
// pre defined x, y
//$('.ui-resizable-e').userAction("mousemove", 200, 0);
// with extended options
/*$('.ui-resizable-e').userAction("mousemove", {
center: [x++, 0]
});*/
}
$('.ui-resizable-e').userAction("mouseup", {
after: function(e, x, y) {
animateClick({x:x, y:y})
}
});
$('#main').userAction("mouseout", {
target: '.ui-resizable-e',
relatedTarget: '#resizable1',
//x: $('#resizable1').offset().left,
//y: $('#resizable1').offset().top,
//bubbles: true,
//cancelable: false,
//view: window,
//ctrlKey: false,
//altKey: false,
//shiftKey: false,
//relatedTarget: null,
//screenX: 0,
//screenY: 0,
//metaKey: false,
//button: 0,
//center: false,
//center: [100, 100],
before: function(e, x, y) {
console.log(e)
},
after: function(e, x, y) {
console.log(e)
}
});
});
</script>

65
ui/tests/resizable.js
View File

@ -1,45 +1,64 @@
var console = console || { var console = console || {
log: function(l) { log: function(l) {
$('#log').append(l + '<br/>'); $('#log').append(l + '<br/>').get(0).scrollTop = 10000;
} }
}; };
var animateClick = function(co) {
var img = $("<img src='images/click.png' width='1'>").appendTo("body")
.css({ position: "absolute", zIndex: 1000, left: co.x, top: co.y })
.animate({ width: 80, height: 80, left: co.x-40, top: co.y-40, opacity: 'hide' }, 1000, function() { $(this).remove(); });
};
var num = function(i) { var num = function(i) {
return parseInt(i, 10); return parseInt(i, 10);
}; };
$(document).ready(function() { $(document).ready(function() {
$("#resizable1").resizable({
$('#resizable1').resizable({
//maxHeight: 200, resize: function() {
//console.log('resize')
start: function(e, ui) {
//console.log('start: [' + e.pageX + ', ' + e.pageY + ']' )
//console.log(ui.instance.size, ui.instance.position)
},
stop: function(e, ui) {
//console.log('stop: [' + e.pageX + ', ' + e.pageY + ']' )
//console.log(ui.instance.size, ui.instance.position)
},
resize: function(e) {
//console.log(e);
} }
}); });
$('.ui-resizable-se').userAction("drag", 100);
$('.ui-resizable-se').userAction("drag", 200, 50);
$('.ui-resizable-se').userAction("drag", 400);
$('.ui-resizable-se').userAction("drag", -600, -30);
return; return;
module("resizable: simple resize"); module("resizable: simple resize");
test("simple drag", function() { test("simple resize x", function() {
expect(1); $('#resizable1').resizable({
ok(true, "Resize element on the same position"); resize: function() {
console.log('resize')
}
});
$('.ui-resizable-e').userAction("drag", 100);
$('.ui-resizable-e').userAction("drag", 200);
$('.ui-resizable-e').userAction("drag", 200);
//expect(2);
//ok(false, "Resize element on the same position");
}); });
/*test("autoheight", function() {
$('#navigation').accordion({ header: '.head', autoheight: false });
equals( 90, $('#navigation ul:first').height() );
equals( 126, $('#navigation ul:eq(1)').height() );
equals( 54, $('#navigation ul:last').height() );
$('#navigation').accordion("destroy").accordion({ header: '.head',autoheight: true });
equals( 126, $('#navigation ul:first').height() );
equals( 126, $('#navigation ul:eq(1)').height() );
equals( 126, $('#navigation ul:last').height() );
});*/
}); });