2013-12-24 06:38:37 +04:00
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<!--link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css"-->
|
|
|
|
|
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui.css">
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
.single-resize {
|
|
|
|
|
position: absolute;
|
|
|
|
|
border: dotted 5px red;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
|
|
|
|
|
top: 100px;
|
|
|
|
|
left: 300px;
|
|
|
|
|
|
|
|
|
|
cursor: move;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.remark {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 5px;
|
|
|
|
|
height: 5px;
|
|
|
|
|
|
2013-12-24 08:03:07 +04:00
|
|
|
/* XXX attr does not work here... */
|
|
|
|
|
/*border: solid 2px attr(color);*/
|
2013-12-24 06:38:37 +04:00
|
|
|
border: solid 2px red;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
.remark:hover:before {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
content: attr(note);
|
|
|
|
|
|
|
|
|
|
overflow: visible;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
|
|
|
|
|
left: -10px;
|
|
|
|
|
bottom: 15px;
|
|
|
|
|
|
|
|
|
|
background: yellow;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
|
|
|
|
box-shadow: 0px 5px 30px -2px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
}
|
|
|
|
|
.remark:hover:after {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
content: "";
|
|
|
|
|
|
|
|
|
|
width: 0px;
|
|
|
|
|
height: 0px;
|
|
|
|
|
bottom: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
|
|
|
|
border-left: solid 30px yellow;
|
|
|
|
|
border-bottom: solid 15px transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.single-resize {
|
|
|
|
|
top: 100px;
|
|
|
|
|
left: 300px;
|
|
|
|
|
}
|
|
|
|
|
.remark {
|
|
|
|
|
top: 100px;
|
|
|
|
|
left: 100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-12-24 08:03:07 +04:00
|
|
|
.bg-crop {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
top: 300px;
|
|
|
|
|
left: 100px;
|
|
|
|
|
|
|
|
|
|
border: solid 5px blue;
|
|
|
|
|
|
|
|
|
|
/* XXX fragments do not yet work... */
|
|
|
|
|
/*background: image('image.jpg#xywh=10,30,60,20');*/
|
|
|
|
|
background: url('image.jpg#xywh=10,30,60,20');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-12-24 06:38:37 +04:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="../ext-lib/jquery.js"></script>
|
|
|
|
|
<script src="../ext-lib/jquery-ui.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(function(){
|
|
|
|
|
$('.single-resize')
|
|
|
|
|
.resizable({
|
|
|
|
|
containment: 'parent',
|
|
|
|
|
handles: 'n, e, s, w, ne, se, sw, nw',
|
|
|
|
|
})
|
|
|
|
|
.draggable({
|
|
|
|
|
containment: 'parent',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$('.remark')
|
|
|
|
|
.draggable({
|
|
|
|
|
containment: 'parent',
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="single-resize" title="Crop"></div>
|
2013-12-24 08:03:07 +04:00
|
|
|
<div class="remark" color="red" note="note text..."></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--div class="bg-crop"></div-->
|
2013-12-24 06:38:37 +04:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
