mirror of
https://github.com/owncloudarchive/contacts.git
synced 2025-02-11 05:54:27 +01:00
8c3d7ccdba
Remove old combobox user bower for onfontresize Add jcrop + md5 Add files to scrutinizer ignore list Remove misplaced text Selected the right MultiSelect library via bower Move bower dependencies to correct location
124 lines
3.2 KiB
HTML
124 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Basic Handler | Jcrop Demo</title>
|
|
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
|
|
|
<script src="../js/jquery.min.js"></script>
|
|
<script src="../js/jquery.Jcrop.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
jQuery(function($){
|
|
|
|
var jcrop_api;
|
|
|
|
$('#target').Jcrop({
|
|
onChange: showCoords,
|
|
onSelect: showCoords,
|
|
onRelease: clearCoords
|
|
},function(){
|
|
jcrop_api = this;
|
|
});
|
|
|
|
$('#coords').on('change','input',function(e){
|
|
var x1 = $('#x1').val(),
|
|
x2 = $('#x2').val(),
|
|
y1 = $('#y1').val(),
|
|
y2 = $('#y2').val();
|
|
jcrop_api.setSelect([x1,y1,x2,y2]);
|
|
});
|
|
|
|
});
|
|
|
|
// Simple event handler, called from onChange and onSelect
|
|
// event handlers, as per the Jcrop invocation above
|
|
function showCoords(c)
|
|
{
|
|
$('#x1').val(c.x);
|
|
$('#y1').val(c.y);
|
|
$('#x2').val(c.x2);
|
|
$('#y2').val(c.y2);
|
|
$('#w').val(c.w);
|
|
$('#h').val(c.h);
|
|
};
|
|
|
|
function clearCoords()
|
|
{
|
|
$('#coords input').val('');
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
|
|
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
|
|
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="span12">
|
|
<div class="jc-demo-box">
|
|
|
|
<div class="page-header">
|
|
<ul class="breadcrumb first">
|
|
<li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
|
|
<li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
|
|
<li class="active">Basic Handler</li>
|
|
</ul>
|
|
<h1>Basic Handler</h1>
|
|
</div>
|
|
|
|
<!-- This is the image we're attaching Jcrop to -->
|
|
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
|
|
|
|
<!-- This is the form that our event handler fills -->
|
|
<form id="coords"
|
|
class="coords"
|
|
onsubmit="return false;"
|
|
action="http://example.com/post.php">
|
|
|
|
<div class="inline-labels">
|
|
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
|
|
<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
|
|
<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
|
|
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
|
|
<label>W <input type="text" size="4" id="w" name="w" /></label>
|
|
<label>H <input type="text" size="4" id="h" name="h" /></label>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="description">
|
|
<p>
|
|
<b>An example with a basic event handler.</b> Here we've tied
|
|
several form values together with a simple event handler invocation.
|
|
The result is that the form values are updated in real-time as
|
|
the selection is changed using Jcrop's <em>onChange</em> handler.
|
|
</p>
|
|
|
|
<p>
|
|
That's how easily Jcrop can be integrated into a traditional web form!
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<div class="tapmodo-footer">
|
|
<a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
|
|
<div class="segment"><b>© 2008-2013 Tapmodo Interactive LLC</b><br />
|
|
Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|