Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1 
<!DOCTYPE html>
2 
<html lang="en">
3 
<head>
4 
  <title>Basic Handler | Jcrop Demo</title>
5 
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
6 
 
7 
<script src="../js/jquery.min.js"></script>
8 
<script src="../js/jquery.Jcrop.js"></script>
9 
<script type="text/javascript">
10 
 
11 
  jQuery(function($){
12 
 
13 
    var jcrop_api;
14 
 
15 
    $('#target').Jcrop({
16 
      onChange:   showCoords,
17 
      onSelect:   showCoords,
18 
      onRelease:  clearCoords
19 
    },function(){
20 
      jcrop_api = this;
21 
    });
22 
 
23 
    $('#coords').on('change','input',function(e){
24 
      var x1 = $('#x1').val(),
25 
          x2 = $('#x2').val(),
26 
          y1 = $('#y1').val(),
27 
          y2 = $('#y2').val();
28 
      jcrop_api.setSelect([x1,y1,x2,y2]);
29 
    });
30 
 
31 
  });
32 
 
33 
  // Simple event handler, called from onChange and onSelect
34 
  // event handlers, as per the Jcrop invocation above
35 
  function showCoords(c)
36 
  {
37 
    $('#x1').val(c.x);
38 
    $('#y1').val(c.y);
39 
    $('#x2').val(c.x2);
40 
    $('#y2').val(c.y2);
41 
    $('#w').val(c.w);
42 
    $('#h').val(c.h);
43 
  };
44 
 
45 
  function clearCoords()
46 
  {
47 
    $('#coords input').val('');
48 
  };
49 
 
50 
 
51 
 
52 
</script>
53 
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
54 
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
55 
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
56 
 
57 
</head>
58 
<body>
59 
 
60 
<div class="container">
61 
<div class="row">
62 
<div class="span12">
63 
<div class="jc-demo-box">
64 
 
65 
<div class="page-header">
66 
<ul class="breadcrumb first">
67 
  <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
68 
  <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
69 
  <li class="active">Basic Handler</li>
70 
</ul>
71 
<h1>Basic Handler</h1>
72 
</div>
73 
 
74 
  <!-- This is the image we're attaching Jcrop to -->
75 
  <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
76 
 
77 
  <!-- This is the form that our event handler fills -->
78 
  <form id="coords"
79 
    class="coords"
80 
    onsubmit="return false;"
81 
    action="http://example.com/post.php">
82 
 
83 
    <div class="inline-labels">
84 
    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
85 
    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
86 
    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
87 
    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
88 
    <label>W <input type="text" size="4" id="w" name="w" /></label>
89 
    <label>H <input type="text" size="4" id="h" name="h" /></label>
90 
    </div>
91 
  </form>
92 
 
93 
  <div class="description">
94 
  <p>
95 
    <b>An example with a basic event handler.</b> Here we've tied
96 
    several form values together with a simple event handler invocation.
97 
    The result is that the form values are updated in real-time as
98 
    the selection is changed using Jcrop's <em>onChange</em> handler.
99 
  </p>
100 
 
101 
  <p>
102 
    That's how easily Jcrop can be integrated into a traditional web form!
103 
  </p>
104 
  </div>
105 
 
106 
 
107 
<div class="tapmodo-footer">
108 
  <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
109 
  <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
110 
    Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
111 
  </div>
112 
</div>
113 
 
114 
<div class="clearfix"></div>
115 
 
116 
</div>
117 
</div>
118 
</div>
119 
</div>
120 
 
121 
</body>
122 
</html>
123