<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Tutorials » API-Demo</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<style type="text/css">
.optdual { Position: relativ }
.optdual .offset { position: absolute left: 18em }
.optlist label { width: 16em; display: block }
#dl_links { margin-top: .5em }
</style>
<script type="text/javascript">
jQuery(function($){
// Die Variable jcrop_api enthält einen Verweis auf
// Jcrop-API, sobald Jcrop instanziiert ist.
var jcrop_api;
// In diesem Beispiel, da Jcrop angehängt oder getrennt werden kann
// Nach Lust und Laune des Benutzers habe ich den Aufruf in eine Funktion verpackt
initJcrop();
// Die Funktion ist ziemlich einfach
Funktion initJcrop()//{{{
{
// Alle Schnittstellenelemente ausblenden, die Jcrop erfordern
// (Dies ist für den Teil der lokalen Benutzeroberfläche.)
$('.requiresjcrop').hide();
//Jcrop auf typische Weise aufrufen
$('#target').Jcrop({
onRelease: ReleaseCheck
},Funktion(){
jcrop_api = this;
jcrop_api.animateTo([100,100,400,300]);
// Einrichten und Anzeigen der Schnittstelle für „aktiviert“
$('#can_click,#can_move,#can_size').attr('checked','checked');
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
$('.requiresjcrop').show();
});
};
//}}}
// Verwenden Sie die API, um Zuschneidemaße zu finden
// Dann eine zufällige Auswahl generieren
// Diese Funktion wird von den Schaltflächen setSelect und animateTo verwendet
// Hauptsächlich zu Demonstrationszwecken
Funktion getRandom() {
var dim = jcrop_api.getBounds();
zurückkehren [
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1]),
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1])
];
};
// Diese Funktion ist an den onRelease-Handler gebunden ...
// Unter bestimmten Umständen (z. B. wenn Sie minSize festlegen
// und AspectRatio zusammen), können Sie versehentlich verlieren
// die Auswahl. Dieser Rückruf ermöglicht erneut das Erstellen von Auswahlen
// in einem solchen Fall basiert die Notwendigkeit, dies zu tun, auf a
// fehlerhaftes Verhalten, es wird empfohlen, dass Sie es irgendwie einfangen
// der onRelease-Rückruf, wenn Sie AllowSelect verwenden: false
Funktion releaseCheck()
{
jcrop_api.setOptions({allowSelect: true });
$('#can_click').attr('checked',false);
};
//Schnittstellenschaltflächen anhängen
// Das scheint viel Code zu sein, aber es ist eine einfache Sache
$('#setSelect').click(function(e) {
// Legt eine zufällige Auswahl fest
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// Animiert zu einer zufälligen Auswahl
jcrop_api.animateTo(getRandom());
});
$('#release').click(function(e) {
// Release-Methode löscht die Auswahl
jcrop_api.release();
});
$('#disable').click(function(e) {
// Jcrop-Instanz deaktivieren
jcrop_api.disable();
// Aktualisieren Sie die Schnittstelle, um den deaktivierten Status widerzuspiegeln
$('#enable').show();
$('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
// Jcrop-Instanz erneut aktivieren
jcrop_api.enable();
// Aktualisieren Sie die Schnittstelle, um den aktivierten Status widerzuspiegeln
$('#enable').hide();
$('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
// Diese Schaltfläche ist sichtbar, wenn Jcrop zerstört wurde
// Es führt das erneute Anhängen durch und aktualisiert die Benutzeroberfläche
$('#rehook,#enable').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
return false;
});
$('#unhook').click(function(e) {
// Jcrop-Widget zerstören, Originalzustand wiederherstellen
jcrop_api.destroy();
// Aktualisieren Sie die Schnittstelle, um den nicht angehängten Status widerzuspiegeln
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
return false;
});
// Schließen Sie die drei Schaltflächen zum Bildaustausch an
$('#img1').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
return false;
});
$('#img2').click(function(e) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
return false;
});
$('#img3').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
this.setOptions({
bgOpacity: 1,
äußeres Bild: 'demo_files/sagomod.jpg'
});
this.animateTo(getRandom());
});
return false;
});
// Die Kontrollkästchen legen einfach Optionen basierend auf dem aktivierten Wert fest
// Optionen werden durch Übergabe eines neuen Optionsobjekts geändert
// Um seltsames Verhalten zu verhindern, werden sie außerdem zunächst überprüft
// Dies entspricht dem Standardanfangszustand von Jcrop
$('#can_click').change(function(e) {
jcrop_api.setOptions({allowSelect: !!this.checked });
jcrop_api.focus();
});
$('#can_move').change(function(e) {
jcrop_api.setOptions({allowMove: !!this.checked });
jcrop_api.focus();
});
$('#can_size').change(function(e) {
jcrop_api.setOptions({allowResize: !!this.checked });
jcrop_api.focus();
});
$('#ar_lock').change(function(e) {
jcrop_api.setOptions(this.checked?
{ AspectRatio: 4/3 }: { AspectRatio: 0 });
jcrop_api.focus();
});
$('#size_lock').change(function(e) {
jcrop_api.setOptions(this.checked? {
Mindestgröße: [80, 80],
maxSize: [350, 350]
}: {
minSize: [0, 0],
maxSize: [0, 0]
});
jcrop_api.focus();
});
});
</script>
</head>
<Körper>
<div id="outer">
<div>
<div>
<h1>Jcrop – API-Demo</h1>
<img src="demo_files/sago.jpg" id="target" />
<div style="margin: .8em 0 .5em;">
<span>
<button id="setSelect">setSelect</button>
<button id="animateTo">animateTo</button>
<button id="release">Freigabe</button>
<button id="disable">Deaktivieren</button>
</span>
<button id="enable" style="display:none;">Erneut aktivieren</button>
<button id="unhook">Zerstören!</button>
<button id="rehook" style="display:none;">Jcrop anhängen</button>
</div>
<fieldset>
<legend>Option schaltet um</legend>
<div>
<label><input type="checkbox" id="ar_lock" />Seitenverhältnis</label>
<label><input type="checkbox" id="size_lock" />minSize/maxSize-Einstellung</label>
</div>
<div>
<label><input type="checkbox" id="can_click" />Neue Auswahl zulassen</label>
<label><input type="checkbox" id="can_move" />Auswahl kann verschoben werden</label>
<label><input type="checkbox" id="can_size" />Skalierbare Auswahl</label>
</div>
</fieldset>
<fieldset style="margin: .5em 0;">
<legend>Bild ändern</legend>
<span>
<button id="img2">Pool</button>
<button id="img1">Sago</button>
<button id="img3">Sago mit äußerem Bild</button>
</span>
</fieldset>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop-Startseite</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Handbuch (Dokumente)</a>
</div>
</div>
</div>
</div>
</body>
</html>
