更新前端文件
This commit is contained in:
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Dimensions | Jcrop Demos</title>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="../js/Jcrop.js"></script>
|
||||
<script src="/Jcrop/js/jquery.color.js"></script>
|
||||
<script type="text/javascript">
|
||||
var cb, filter;
|
||||
|
||||
jQuery(function($){
|
||||
|
||||
// Create a new Selection object extended from Selection
|
||||
var CoordsSel = function(){ };
|
||||
|
||||
// Set the custom selection's prototype object to be an instance
|
||||
// of the built-in Selection object
|
||||
CoordsSel.prototype = new $.Jcrop.component.Selection;
|
||||
|
||||
// Then we can continue extending it
|
||||
$.extend(CoordsSel.prototype,{
|
||||
attach: function(){
|
||||
// Prepend an element to Selection.element (selection container)
|
||||
this.coords = $('<div> x </div>').addClass('jcrop-coords');
|
||||
this.element.prepend(this.coords);
|
||||
},
|
||||
redraw: function(b){
|
||||
|
||||
// Call original redraw() method first, with arguments
|
||||
$.Jcrop.component.Selection.prototype.redraw.call(this,b);
|
||||
|
||||
// Update coordinates
|
||||
this.coords.html(this.last.w+' × '+this.last.h);
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
// Now set it as the component that is used for new selections
|
||||
$('#target').Jcrop({
|
||||
selectionComponent: CoordsSel,
|
||||
bgColor: 'rgb(145,176,241)',
|
||||
bgOpacity: 0.5
|
||||
},function(){
|
||||
this.container.addClass('jcrop-hl-active');
|
||||
interface_load(this);
|
||||
});
|
||||
|
||||
function interface_load(obj){
|
||||
cb = obj;
|
||||
|
||||
cb.newSelection().update($.Jcrop.wrapFromXywh([ 147, 55, 456, 390 ])).refresh();
|
||||
//cb.ui.selection.removeFilter(cb.filter.shader);
|
||||
cb.ui.selection.refresh();
|
||||
|
||||
function random_coords() {
|
||||
return [
|
||||
Math.random()*300,
|
||||
Math.random()*200,
|
||||
(Math.random()*540)+50,
|
||||
(Math.random()*340)+60
|
||||
];
|
||||
}
|
||||
|
||||
// Animate button event
|
||||
$(document.body).on('click','[data-action]',function(e){
|
||||
var $targ = $(e.target);
|
||||
var action = $targ.data('action');
|
||||
|
||||
switch(action){
|
||||
case 'random-move':
|
||||
cb.ui.selection.animateTo(random_coords());
|
||||
break;
|
||||
}
|
||||
|
||||
cb.ui.selection.refresh();
|
||||
|
||||
}).on('selectstart',function(e){
|
||||
e.preventDefault();
|
||||
}).on('click','a[data-action]',function(e){
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
$.Jcrop.component.CoordsSel = CoordsSel;
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<link rel="stylesheet" href="demo_files/main.css">
|
||||
<link rel="stylesheet" href="demo_files/demos.css">
|
||||
<link rel="stylesheet" href="../css/Jcrop.css">
|
||||
<style type="text/css">
|
||||
.jcrop-border {
|
||||
background: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.jcrop-handle {
|
||||
border-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.jcrop-coords {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -24px;
|
||||
right: 7px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 1px 4px 0;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.jcrop-current .jcrop-coords {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="./basic.html">Demos</a>
|
||||
</li>
|
||||
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
|
||||
</li>
|
||||
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<div class="jc-demo-box">
|
||||
<div class="page-header">
|
||||
<h1>Dimensions</h1>
|
||||
</div>
|
||||
<div class="demo-nav menu-box">
|
||||
<h3>Jcrop Demos</h3>
|
||||
<ul class="links">
|
||||
<li><a href="basic.html">Hello World</a></li>
|
||||
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
|
||||
<li><a href="panel.html">Feature Panel</a></li>
|
||||
<li><b>Dimensions</b></li>
|
||||
<li><a href="circle.html">Circles</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-interface"><img src="http://jcrop-cdn.tapmodo.com/assets/images/sierra-750.jpg" id="target">
|
||||
<div class="btn-toolbar"><a href="#" data-action="random-move" id="moveselection" class="btn btn-small">Move</a></div>
|
||||
</div>
|
||||
<div class="tapmodo-footer"><a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
|
||||
<div class="segment"><b>© 2008-2013 Tapmodo Interactive LLC</b>
|
||||
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user