Edit D:\AVAWeike\AVAWeike\AVA.ResourcesPlatform.AdminUI\Tools\Jcrop\demos\tutorial2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Basic Handler | Jcrop Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

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="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>

<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />

<form id="coords"
    class="coords"
    onsubmit="return false;"
    action="http://example.com/post.php">

<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>&copy; 2008-2014 Tapmodo Interactive LLC</b><br />
    Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
  </div>
</div>

</div>
</div>
</div>
</div>

</body>
</html>

Ms-Dos/Windows Unix Write backup

jsp File Browser version 1.2 by www.vonloesch.de