github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/plugins/jcrop/demos/non-image.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3  <head>
     4    <title>Non-image Cropping | 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    jQuery(function($){
    11  
    12      // I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
    13      var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};
    14  
    15      $('#target').Jcrop({
    16        bgFade: true,
    17        setSelect: [c.x,c.y,c.x2,c.y2]
    18      });
    19  
    20    });
    21  
    22  
    23  </script>
    24  <link rel="stylesheet" href="demo_files/main.css" type="text/css" />
    25  <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
    26  <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
    27  <style type="text/css">
    28    #target {
    29      background-color: #ccc;
    30      width: 500px;
    31      height: 330px;
    32      font-size: 24px;
    33      display: block;
    34    }
    35  
    36  
    37  </style>
    38  
    39  </head>
    40  <body>
    41  
    42  <div class="container">
    43  <div class="row">
    44  <div class="span12">
    45  <div class="jc-demo-box">
    46  
    47  <div class="page-header">
    48  <ul class="breadcrumb first">
    49    <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
    50    <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
    51    <li class="active">Non-image Cropping</li>
    52  </ul>
    53  <h1>Non-image Cropping</h1>
    54  </div>
    55  
    56    <p id="target">
    57      <b style="display:block; padding: .5em 1em;">
    58        This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.
    59      </b>
    60    </p>
    61  
    62    <p>
    63      <h4>Attaching Jcrop to a non-image element.</h4>
    64      This is mostly useful to implement other interfaces, such as <tt>canvas</tt> or over an arbitrary <tt>div</tt>.
    65    </p>
    66  
    67  
    68  <div class="tapmodo-footer">
    69    <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
    70    <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
    71      Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
    72    </div>
    73  </div>
    74  
    75  <div class="clearfix"></div>
    76  
    77  </div>
    78  </div>
    79  </div>
    80  </div>
    81  
    82  </body>
    83  </html>
    84