<!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="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 label { ความกว้าง: 16em;
#dl_links { ขอบด้านบน: .5em;
</สไตล์>
<script type="text/javascript">
jQuery(ฟังก์ชั่น($){
// ตัวแปร jcrop_api จะเก็บการอ้างอิงถึง
// Jcrop API เมื่อ Jcrop ถูกสร้างอินสแตนซ์
var jcrop_api;
// ในตัวอย่างนี้ เนื่องจาก Jcrop อาจถูกแนบหรือแยกออก
// ตามความตั้งใจของผู้ใช้ ฉันได้รวมการโทรเข้าในฟังก์ชัน
initJcrop();
// ฟังก์ชั่นนี้ค่อนข้างเรียบง่าย
ฟังก์ชั่น initJcrop()//{{{
-
// ซ่อนองค์ประกอบอินเทอร์เฟซใด ๆ ที่ต้องใช้ Jcrop
// (นี่สำหรับส่วนอินเทอร์เฟซผู้ใช้ภายในเครื่อง)
$('.requiresjcrop').ซ่อน();
//เรียกใช้ 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('ตรวจสอบแล้ว',false);
$('.requiresjcrop').show();
-
-
-
// ใช้ API เพื่อค้นหามิติการครอบตัด
// จากนั้นสร้างการเลือกแบบสุ่ม
// ฟังก์ชั่นนี้ใช้โดยปุ่ม setSelect และ animateTo
// มีวัตถุประสงค์เพื่อการสาธิตเป็นหลัก
ฟังก์ชั่น getRandom() {
var dim = jcrop_api.getBounds();
กลับ [
Math.round(Math.random() * สลัว[0]),
Math.round(Math.random() * dim[1]),
Math.round(Math.random() * สลัว[0]),
Math.round(Math.random() * สลัว[1])
-
-
// ฟังก์ชั่นนี้เชื่อมโยงกับตัวจัดการ onRelease...
// ในบางสถานการณ์ (เช่น หากคุณตั้งค่า minSize
// และอัตราส่วนภาพร่วมกัน) คุณอาจสูญเสียโดยไม่ตั้งใจได้
// การเลือก การเรียกกลับนี้จะเปิดใช้งานการสร้างการเลือกอีกครั้ง
// ในกรณีเช่นนี้ แม้ว่าความจำเป็นในการดำเนินการนี้จะขึ้นอยู่กับ
// พฤติกรรมบั๊กกี้ ขอแนะนำให้คุณดักจับในทางใดทางหนึ่ง
// การเรียกกลับ onRelease หากคุณใช้ AllowSelect: false
ฟังก์ชั่น releaseCheck()
-
jcrop_api.setOptions ({ อนุญาตเลือก: จริง });
$('#can_click').attr('ตรวจสอบแล้ว',false);
-
// แนบปุ่มอินเทอร์เฟซ
// อาจจะดูเหมือนโค้ดเยอะแต่ก็ง่ายๆ นะ
$('#setSelect').คลิก(ฟังก์ชั่น(e) {
// ตั้งค่าการเลือกแบบสุ่ม
jcrop_api.setSelect(getRandom());
-
$('#animateTo').คลิก(ฟังก์ชั่น(e) {
// เคลื่อนไหวเป็นการเลือกแบบสุ่ม
jcrop_api.animateTo(getRandom());
-
$('#release').คลิก(ฟังก์ชั่น(e) {
// Release method จะล้างส่วนที่เลือก
jcrop_api.release();
-
$('#disable').คลิก(ฟังก์ชั่น(e) {
// ปิดการใช้งานอินสแตนซ์ Jcrop
jcrop_api.disable();
// อัปเดตอินเทอร์เฟซเพื่อแสดงสถานะที่ถูกปิดใช้งาน
$('#enable').show();
$('.requiresjcrop').hide();
-
$('#enable').คลิก(ฟังก์ชั่น(e) {
// เปิดใช้งานอินสแตนซ์ Jcrop อีกครั้ง
jcrop_api.enable();
// อัปเดตอินเทอร์เฟซเพื่อแสดงสถานะที่เปิดใช้งาน
$('#enable').hide();
$('.requiresjcrop').show();
-
$('#rehook').คลิก(ฟังก์ชั่น(e) {
// ปุ่มนี้จะมองเห็นได้เมื่อ Jcrop ถูกทำลาย
// ทำการแนบไฟล์ใหม่และอัปเดต UI
$('#ขอใหม่,#enable').hide();
initJcrop();
$('#ปลดตะขอ,.requiresjcrop').show();
กลับเท็จ;
-
$('#unhook').click(function(e) {
// ทำลายวิดเจ็ต Jcrop คืนค่าสถานะดั้งเดิม
jcrop_api.destroy();
// อัปเดตอินเทอร์เฟซเพื่อแสดงสถานะที่ไม่ได้แนบ
$('#ปลดตะขอ,#enable,.requiresjcrop').hide();
$('#ขอเกี่ยว').show();
กลับเท็จ;
-
// เชื่อมต่อปุ่มสลับรูปภาพสามปุ่ม
$('#img1').คลิก(ฟังก์ชั่น(e) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
กลับเท็จ;
-
$('#img2').คลิก(ฟังก์ชั่น(e) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
กลับเท็จ;
-
$('#img3').คลิก(ฟังก์ชั่น(e) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
this.setOptions({
ความทึบแสง: 1,
ภาพด้านนอก: 'demo_files/sagomod.jpg'
-
this.animateTo(getRandom());
-
กลับเท็จ;
-
// ช่องทำเครื่องหมายเพียงตั้งค่าตัวเลือกตามค่าที่เลือก
// ตัวเลือกมีการเปลี่ยนแปลงโดยการส่งวัตถุตัวเลือกใหม่
// นอกจากนี้ เพื่อป้องกันพฤติกรรมแปลก ๆ พวกเขาจะถูกตรวจสอบในขั้นต้น
// สิ่งนี้ตรงกับสถานะเริ่มต้นเริ่มต้นของ Jcrop
$('#can_click').change(ฟังก์ชั่น(e) {
jcrop_api.setOptions({ AllowSelect: !!this.checked });
jcrop_api.โฟกัส();
-
$('#can_move').change(ฟังก์ชั่น(e) {
jcrop_api.setOptions({ AllowMove: !!this.checked });
jcrop_api.โฟกัส();
-
$('#can_size').change(ฟังก์ชั่น(e) {
jcrop_api.setOptions({ AllowResize: !!this.checked });
jcrop_api.โฟกัส();
-
$('#ar_lock').change(ฟังก์ชั่น(e) {
jcrop_api.setOptions (ตรวจสอบสิ่งนี้แล้ว?
{ อัตราส่วนกว้างยาว: 4/3 }: { อัตราส่วนกว้างยาว: 0 });
jcrop_api.โฟกัส();
-
$('#size_lock').change(ฟังก์ชั่น(e) {
jcrop_api.setOptions (this.checked? {
ขนาดขั้นต่ำ: [80, 80],
ขนาดสูงสุด: [350, 350]
-
ขนาดขั้นต่ำ: [0, 0],
ขนาดสูงสุด: [0, 0]
-
jcrop_api.โฟกัส();
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div id="ด้านนอก">
<div>
<div>
<h1>Jcrop - การสาธิต API</h1>
<img src="demo_files/sago.jpg" id="target" />
<div style="margin: .8em 0 .5em;">
<ช่วง>
<button id="setSelect">setSelect</button>
<button id="animateTo">animateTo</button>
<button id="release">ปล่อย</button>
<button id="disable">ปิดการใช้งาน</button>
</span>
<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">สาคูพร้อมรูปภาพภายนอก</button>
</span>
</ฟิลด์เซต>
<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>
</ร่างกาย>
</html>
