<!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">
<頭>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » チュートリアル » API デモ</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 { 位置: 相対 }
.optdual .offset { 位置: 左: 18em;
.optlist ラベル { 幅: 16em; }
#dl_links {マージントップ: .5em;
</スタイル>
<script type="text/javascript">
jQuery(関数($){
// 変数 jcrop_api は、
// Jcrop がインスタンス化された後の Jcrop API。
var jcrop_api;
// この例では、Jcrop はアタッチまたはデタッチされる可能性があるため、
// ユーザーの気まぐれに応じて、呼び出しを関数にラップしました
initJcrop();
// 関数は非常に単純です
関数 initJcrop()//{{{
{
// Jcrop を必要とするインターフェイス要素を非表示にします
// (これはローカル ユーザー インターフェイス部分用です。)
$('.requiresjcrop').hide();
//典型的な方法で Jcrop を呼び出します
$('#target').Jcrop({
onRelease: releaseCheck
}、関数（）{
jcrop_api = これ;
jcrop_api.animateTo([100,100,400,300]);
// インターフェイスを「有効」に設定して表示します
$('#can_click,#can_move,#can_size').attr('チェック済み','チェック済み');
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
$('.requiresjcrop').show();
});
};
//}}}
// API を使用してトリミング寸法を検索します
// その後、ランダムな選択を生成します
// この関数は setSelect ボタンと animateTo ボタンで使用されます
// 主にデモ用
関数 getRandom() {
var dim = jcrop_api.getBounds();
戻る [
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1]),
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1])
];
};
// この関数は onRelease ハンドラーにバインドされています...
// 特定の状況 (minSize を設定した場合など)
// と aspectRatio を一緒にすると)、うっかり失う可能性があります
// このコールバックにより、選択範囲の作成が再度有効になります。
// このような場合、これを行う必要があることに基づいています。
// バグのある動作なので、何らかの方法でトラップすることをお勧めします
//allowSelect を使用する場合の onRelease コールバック: false
関数 releaseCheck()
{
jcrop_api.setOptions({allowSelect: true });
$('#can_click').attr('チェック済み',false);
};
//インターフェースボタンをアタッチします
// これは大量のコードのように見えるかもしれませんが、簡単なことです
$('#setSelect').click(function(e) {
// ランダムな選択を設定します
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// ランダムに選択したものをアニメーション化します
jcrop_api.animateTo(getRandom());
});
$('#release').click(function(e) {
// Release メソッドは選択をクリアします
jcrop_api.release();
});
$('#disable').click(function(e) {
// Jcrop インスタンスを無効にする
jcrop_api.disable();
// 無効な状態を反映するようにインターフェースを更新します
$('#enable').show();
$('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
// Jcrop インスタンスを再度有効にする
jcrop_api.enable();
// 有効な状態を反映するようにインターフェースを更新します
$('#enable').hide();
$('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
// このボタンは、Jcrop が破棄されたときに表示されます
// 再アタッチを実行し、UI を更新します
$('#rehook,#enable').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
false を返します。
});
$('#unhook').click(function(e) {
// Jcrop ウィジェットを破棄し、元の状態に戻します
jcrop_api.destroy();
// アタッチされていない状態を反映するようにインターフェースを更新します
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
false を返します。
});
// 3 つの画像切り替えボタンを接続します
$('#img1').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
false を返します。
});
$('#img2').click(function(e) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
false を返します。
});
$('#img3').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
this.setOptions({
bg不透明度: 1、
外側の画像: 'demo_files/sagomod.jpg'
});
this.animateTo(getRandom());
});
false を返します。
});
// チェックボックスはチェックされた値に基づいてオプションを設定するだけです
// 新しいオプション オブジェクトを渡すことでオプションが変更されます
// また、おかしな動作を防ぐために、最初にチェックされます。
// これは 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?
{ アスペクト比: 4/3 }: { アスペクト比: 0 });
jcrop_api.focus();
});
$('#size_lock').change(function(e) {
jcrop_api.setOptions(this.checked? {
最小サイズ: [80, 80]、
最大サイズ: [350, 350]
}: {
minSize: [0, 0],
maxSize: [0, 0]
});
jcrop_api.focus();
});
});
</script>
</head>
<本文>
<div id="アウター">
<div>
<div>
<h1>Jcrop - API デモ</h1>
<img src="demo_files/sago.jpg" id="ターゲット" />
<div style="マージン: .8em 0 .5em;">
<スパン>
<button id="setSelect">setSelect</button>
<button id="animateTo">animateTo</button>
<button id="release">リリース</button>
<button id="disable">無効にする</button>
</スパン>
<button id="enable" style="display:none;">再度有効にする</button>
<button id="unhook">破壊してください!</button>
<button id="rehook" style="display:none;">Jcrop をアタッチ</button>
</div>
<フィールドセット>
<legend>オプションの切り替え</legend>
<div>
<label><input type="checkbox" id="ar_lock" />アスペクト比</label>
<label><input type="checkbox" id="size_lock" />minSize/maxSize の設定</label>
</div>
<div>
<label><input type="checkbox" id="can_click" />新しい選択を許可する</label>
<label><input type="checkbox" id="can_move" />選択範囲は移動できます</label>
<label><input type="checkbox" id="can_size" />サイズ変更可能な選択範囲</label>
</div>
</フィールドセット>
<fieldset style="margin: .5em 0;">
<legend>画像の変更</legend>
<スパン>
<button id="img2">プール</button>
<button id="img1">サゴ</button>
<button id="img3">Sago とアウターイメージ</button>
</スパン>
</フィールドセット>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop ホーム</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">マニュアル (ドキュメント)</a>
</div>
</div>
</div>
</div>
</body>
</html>
