js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial2.html

   1 <html>
   2         <head>
   3
   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" />
   8
   9                 <script language="Javascript">
  10
  11                         // Remember to invoke within jQuery(window).load(...)
  12                         // If you don't, Jcrop may not initialize properly
  13                         jQuery(document).ready(function(){
  14
  15                                 jQuery('#cropbox').Jcrop({
  16                                         onChange: showCoords,
  17                                         onSelect: showCoords
  18                                 });
  19
  20                         });
  21
  22                         // Our simple event handler, called from onChange and onSelect
  23                         // event handlers, as per the Jcrop invocation above
  24                         function showCoords(c)
  25                         {
  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);
  32                         };
  33
  34                 </script>
  35
  36         </head>
  37
  38         <body>
  39
  40         <div id="outer">
  41         <div class="jcExample">
  42         <div class="article">
  43
  44                 <h1>Jcrop - Event Handlers</h1>
  45
  46                 <!-- This is the image we're attaching Jcrop to -->
  47                 <img src="demo_files/flowers.jpg" id="cropbox" />
  48
  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>
  57                 </form>
  58
  59                 <p>
  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.
  64                 </p>
  65
  66                 <p>
  67                         That's how easily Jcrop can be integrated into a traditional web form!
  68                 </p>
  69
  70                 <div id="dl_links">
  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>
  73                 </div>
  74
  75
  76         </div>
  77         </div>
  78         </div>
  79         </body>
  80
  81 </html>