4 <script src=
"../js/jquery.min.js"></script>
5 <script src=
"../js/jquery.Jcrop.js"></script>
6 <link rel=
"stylesheet" href=
"../css/jquery.Jcrop.css" type=
"text/css" />
7 <link rel=
"stylesheet" href=
"demo_files/demos.css" type=
"text/css" />
9 <script language=
"Javascript">
11 // Remember to invoke within jQuery(window).load(...)
12 // If you don't, Jcrop may not initialize properly
13 jQuery(document
).ready(function(){
15 jQuery('#cropbox').Jcrop({
22 // Our simple event handler, called from onChange and onSelect
23 // event handlers, as per the Jcrop invocation above
24 function showCoords(c
)
26 jQuery('#x').val(c
.x
);
27 jQuery('#y').val(c
.y
);
28 jQuery('#x2').val(c
.x2
);
29 jQuery('#y2').val(c
.y2
);
30 jQuery('#w').val(c
.w
);
31 jQuery('#h').val(c
.h
);
41 <div class=
"jcExample">
44 <h1>Jcrop - Event Handlers
</h1>
46 <!-- This is the image we're attaching Jcrop to -->
47 <img src=
"demo_files/flowers.jpg" id=
"cropbox" />
49 <!-- This is the form that our event handler fills -->
50 <form onsubmit=
"return false;">
51 <label>X1
<input type=
"text" size=
"4" id=
"x" name=
"x" /></label>
52 <label>Y1
<input type=
"text" size=
"4" id=
"y" name=
"y" /></label>
53 <label>X2
<input type=
"text" size=
"4" id=
"x2" name=
"x2" /></label>
54 <label>Y2
<input type=
"text" size=
"4" id=
"y2" name=
"y2" /></label>
55 <label>W
<input type=
"text" size=
"4" id=
"w" name=
"w" /></label>
56 <label>H
<input type=
"text" size=
"4" id=
"h" name=
"h" /></label>
60 <b>An example with a basic event handler.
</b> Here we've tied
61 several form values together with a simple event handler invocation.
62 The result is that the form values are updated in real-time as
63 the selection is changed, thanks to Jcrop's
<em>onChange
</em> event handler.
67 That's how easily Jcrop can be integrated into a traditional web form!
71 <a href=
"http://deepliquid.com/content/Jcrop.html">Jcrop Home
</a> |
72 <a href=
"http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)
</a>