2012-01-26 19:04:01 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > jQuery UI Interaction - Box< / title >
< link rel = "stylesheet" href = "../../themes/base/jquery.ui.all.css" >
2012-07-06 19:19:47 +00:00
< script src = "../../jquery-1.7.2.js" > < / script >
2012-01-26 19:04:01 +00:00
< script src = "../../ui/jquery.ui.core.js" > < / script >
< script src = "../../ui/jquery.ui.widget.js" > < / script >
< script src = "../../ui/jquery.ui.interaction.js" > < / script >
< link rel = "stylesheet" href = "../demos.css" >
< style >
#canvas { width: 300px; height: 200px; border: 1px solid black; }
2012-01-28 02:11:22 +00:00
.demo-box { border: 1px dotted black; width: 0; height: 0; }
.demo-box-complete { border-color: gray; background: lightBlue; }
2012-01-26 19:04:01 +00:00
< / style >
< script >
$(function() {
2012-01-28 02:11:22 +00:00
$.widget( "demo.box", $.ui.interaction, {
_start: function( event, pointerPosition ) {
this.startPosition = pointerPosition;
2012-01-26 19:04:01 +00:00
2012-01-28 02:11:22 +00:00
this.box = $( "< div > " )
2012-01-26 19:04:01 +00:00
.appendTo( this.element.empty() )
2012-01-28 02:11:22 +00:00
.addClass( "demo-box" )
2012-01-26 19:04:01 +00:00
.offset({
2012-01-28 02:11:22 +00:00
left: pointerPosition.x,
top: pointerPosition.y
2012-01-26 19:04:01 +00:00
});
},
2012-01-28 02:11:22 +00:00
_move: function( event, pointerPosition ) {
var x1 = this.startPosition.x,
y1 = this.startPosition.y,
x2 = pointerPosition.x,
y2 = pointerPosition.y;
this.box
.offset({
left: Math.min( x1, x2 ),
top: Math.min( y1, y2 )
})
.css({
width: x1 > x2 ? x1 - x2 : x2 - x1,
height: y1 > y2 ? y1 - y2 : y2 - y1
});
2012-01-26 19:04:01 +00:00
},
2012-01-28 02:11:22 +00:00
2012-01-26 19:04:01 +00:00
_stop: function() {
2012-01-28 02:11:22 +00:00
this.box.addClass( "demo-box-complete" );
2012-01-26 19:04:01 +00:00
}
});
$( "#canvas" ).box();
});
< / script >
< / head >
< body >
< div class = "demo" >
< div id = "canvas" > < / div >
< / div > <!-- End demo -->
< div class = "demo-description" >
< p > This demo shows how you can create a simple box-drawing (aka lasso) interaction built on top of the interaction utility (jquery.ui.interaction.js).< / p >
< p > Draw a box by starting in the box above using the mouse or a touch input device.< / p >
< / div > <!-- End demo - description -->
< / body >
< / html >
