<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis konten" content="teks/html;charset=UTF-8" />
<title>Jcrop » Tutorial » Demo API</title>
<skrip src="../js/jquery.min.js" type="text/javascript"></script>
<skrip 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" />
<gaya tipe="teks/css">
.optdual { posisi: relatif; }
.optdual .offset { posisi: absolut; kiri: 18em;
.optlist label { lebar: 16em; tampilan: blok }
#dl_links { margin-atas: .5em;
</gaya>
<skrip tipe="teks/javascript">
jQuery(fungsi($){
// Variabel jcrop_api akan menyimpan referensi ke
// Jcrop API setelah Jcrop dibuat.
var jcrop_api;
// Dalam contoh ini, karena Jcrop dapat dilampirkan atau dilepas
// sesuai keinginan pengguna, saya telah menggabungkan panggilan tersebut ke dalam sebuah fungsi
initJcrop();
// Fungsinya cukup sederhana
fungsi initJcrop()//{{{
{
// Sembunyikan elemen antarmuka apa pun yang memerlukan Jcrop
// (Ini untuk bagian antarmuka pengguna lokal.)
$('.requiresjcrop').hide();
//Panggil Jcrop dengan cara yang khas
$('#target').Jcrop({
onRelease: rilisPeriksa
},fungsi(){
jcrop_api = ini;
jcrop_api.animateTo([100,100,400,300]);
// Siapkan dan tampilkan antarmuka untuk "diaktifkan"
$('#can_click,#can_move,#can_size').attr('dicentang','dicentang');
$('#ar_lock,#size_lock,#bg_swap').attr('dicentang',false);
$('.requiresjcrop').show();
});
};
//}}}
// Gunakan API untuk menemukan dimensi pemangkasan
// Kemudian buat pilihan acak
// Fungsi ini digunakan oleh tombol setSelect dan animateTo
// Terutama untuk tujuan demonstrasi
fungsi getRandom() {
var redup = jcrop_api.getBounds();
kembali [
Matematika.bulat(Matematika.acak() * redup[0]),
Matematika.bulat(Matematika.acak() * redup[1]),
Matematika.bulat(Matematika.acak() * redup[0]),
Matematika.bulat(Matematika.acak() * redup[1])
];
};
// Fungsi ini terikat pada pengendali onRelease...
// Dalam keadaan tertentu (misalnya jika Anda menyetel minSize
// dan aspekRatio bersama-sama), Anda bisa kalah secara tidak sengaja
// pilihan. Panggilan balik ini mengaktifkan kembali pembuatan pilihan
// dalam kasus seperti itu. Meskipun kebutuhan untuk melakukan ini didasarkan pada a
// perilaku buggy, disarankan agar Anda menjebaknya dengan cara tertentu
// callback onRelease jika Anda menggunakanallowSelect: false
rilis fungsiCheck()
{
jcrop_api.setOptions({ izinkanPilih: benar });
$('#can_click').attr('dicentang',false);
};
//Lampirkan tombol antarmuka
// Ini mungkin tampak seperti kode yang banyak, namun sederhana saja
$('#setSelect').klik(fungsi(e) {
// Menetapkan pilihan acak
jcrop_api.setSelect(getRandom());
});
$('#animateTo').klik(fungsi(e) {
// Bernyawa ke pilihan acak
jcrop_api.animateTo(getRandom());
});
$('#release').klik(fungsi(e) {
// Metode rilis menghapus pilihan
jcrop_api.rilis();
});
$('#disable').klik(fungsi(e) {
// Nonaktifkan instance Jcrop
jcrop_api.disable();
// Perbarui antarmuka untuk mencerminkan status nonaktif
$('#aktifkan').tampilkan();
$('.requiresjcrop').hide();
});
$('#aktifkan').klik(fungsi(e) {
// Aktifkan kembali instance Jcrop
jcrop_api.enable();
// Perbarui antarmuka untuk mencerminkan status yang diaktifkan
$('#aktifkan').sembunyikan();
$('.requiresjcrop').show();
});
$('#rehook').klik(fungsi(e) {
// Tombol ini terlihat ketika Jcrop telah dimusnahkan
// Ia melakukan lampiran ulang dan memperbarui UI
$('#rehook,#aktifkan').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
kembali salah;
});
$('#melepaskan').klik(fungsi(e) {
// Hancurkan widget Jcrop, pulihkan keadaan semula
jcrop_api.hancurkan();
// Perbarui antarmuka untuk mencerminkan keadaan tidak terpasang
$('#lepas kaitan,#aktifkan,.memerlukanjcrop').hide();
$('#rehook').tampilkan();
kembali salah;
});
// Hubungkan ketiga tombol pertukaran gambar
$('#img1').klik(fungsi(e) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
kembali salah;
});
$('#img2').klik(fungsi(e) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
kembali salah;
});
$('#img3').klik(fungsi(e) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
ini.setOptions({
bgOpasitas: 1,
gambar luar: 'demo_files/sagomod.jpg'
});
ini.animateTo(getRandom());
});
kembali salah;
});
// Kotak centang hanya mengatur opsi berdasarkan nilai yang dicentang
// Opsi diubah dengan meneruskan objek opsi baru
// Selain itu, untuk mencegah perilaku aneh, mereka diperiksa terlebih dahulu
// Ini cocok dengan keadaan awal default Jcrop
$('#can_click').change(fungsi(e) {
jcrop_api.setOptions({allowSelect:!!this.checked });
jcrop_api.fokus();
});
$('#can_move').change(fungsi(e) {
jcrop_api.setOptions({allowMove:!!this.checked });
jcrop_api.fokus();
});
$('#can_size').change(fungsi(e) {
jcrop_api.setOptions({allowResize:!!this.checked });
jcrop_api.fokus();
});
$('#ar_lock').change(fungsi(e) {
jcrop_api.setOptions(ini.diperiksa?
{ Rasio aspek: 4/3 }: { Rasio aspek: 0 });
jcrop_api.fokus();
});
$('#size_lock').change(fungsi(e) {
jcrop_api.setOptions(ini.diperiksa? {
Ukuran minimal: [80, 80],
Ukuran maksimal: [350, 350]
}: {
Ukuran minimal: [0, 0],
Ukuran maksimal: [0, 0]
});
jcrop_api.fokus();
});
});
</skrip>
</kepala>
<tubuh>
<div id="luar">
<div>
<div>
<h1>Jcrop - Demo API</h1>
<img src="demo_files/sago.jpg" id="target" />
<div style="margin: .8em 0 .5em;">
<rentang>
<button id="setSelect">setSelect</button>
<button id="animateTo">animateTo</button>
<button id="release">Lepaskan</button>
<button id="disable">Nonaktifkan</button>
</span>
<button id="enable" style="display:none;">Aktifkan kembali</button>
<button id="unhook">Hancurkan!</button>
<button id="rehook" style="display:none;">Lampirkan Jcrop</button>
</div>
<kumpulan bidang>
<legend>Tombol Opsi</legend>
<div>
<label><input type="checkbox" id="ar_lock" />Rasio aspek</label>
<label><input type="checkbox" id="size_lock" />setelan minSize/maxSize</label>
</div>
<div>
<label><input type="checkbox" id="can_click" />Izinkan pilihan baru</label>
<label><input type="checkbox" id="can_move" />Pilihan dapat dipindahkan</label>
<label><input type="checkbox" id="can_size" />Pilihan yang dapat diubah ukurannya</label>
</div>
</set bidang>
<fieldset style="margin: .5em 0;">
<legend>Ubah Gambar</legend>
<rentang>
<button id="img2">Kolam</button>
<button id="img1">Sagu</button>
<button id="img3">Sagu dengan gambar luar</button>
</span>
</set bidang>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Beranda Jcrop</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Dokumen)</a>
</div>
</div>
</div>
</div>
</tubuh>
</html>
