<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 엄격//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" />
<스타일 유형="텍스트/css">
.optdual { 위치: 상대 }
.optdual .offset { 위치: 왼쪽: 18em }
.optlist 라벨 { 너비: 16em; 블록 }
#dl_links { 여백 상단: .5em }
</style>
<스크립트 유형="텍스트/자바스크립트">
jQuery(함수($){
// jcrop_api 변수는 다음에 대한 참조를 보유합니다.
// Jcrop이 인스턴스화되면 Jcrop API입니다.
var jcrop_api;
// 이 예에서는 Jcrop이 부착되거나 분리될 수 있으므로
// 사용자의 변덕에 따라 호출을 함수로 래핑했습니다.
initJcrop();
// 함수는 매우 간단합니다.
함수 initJcrop()//{{{
{
// Jcrop이 필요한 인터페이스 요소를 숨깁니다.
// (로컬 사용자 인터페이스 부분을 위한 것입니다.)
$('.requiresjcrop').hide();
//일반적인 방식으로 Jcrop을 호출합니다.
$('#target').Jcrop({
onRelease: 릴리스 확인
},기능(){
jcrop_api = 이것;
jcrop_api.animateTo([100,100,400,300]);
// "활성화"에 대한 인터페이스를 설정하고 표시합니다.
$('#can_click,#can_move,#can_size').attr('checked','checked');
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
$('.requiresjcrop').show();
});
};
//}}}
// API를 사용하여 자르기 크기 찾기
// 그런 다음 무작위 선택을 생성합니다.
// 이 함수는 setSelect 및 animateTo 버튼에서 사용됩니다.
// 주로 데모 목적으로 사용됨
함수 getRandom() {
var 희미 = jcrop_api.getBounds();
반품 [
Math.round(Math.random() * 희미[0]),
Math.round(Math.random() * 희미[1]),
Math.round(Math.random() * 희미[0]),
Math.round(Math.random() * 희미[1])
];
};
// 이 함수는 onRelease 핸들러에 바인딩됩니다...
// 특정 상황(예: minSize를 설정한 경우)
// 및 AspectRatio를 함께 사용하면 실수로 손실될 수 있습니다.
// 선택 항목 생성을 다시 활성화하는 콜백입니다.
// 그런 경우에 이 작업을 수행해야 하는 이유는 다음과 같습니다.
// 버그가 있는 동작이므로 어떤 방식으로든 트랩하는 것이 좋습니다.
//allowSelect를 사용하는 경우 onRelease 콜백: false
함수 releaseCheck()
{
jcrop_api.setOptions({allowSelect: true });
$('#can_click').attr('checked',false);
};
//인터페이스 버튼 연결
// 코드가 많아 보이지만 간단합니다.
$('#setSelect').click(함수(e) {
// 무작위 선택을 설정합니다.
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// 무작위 선택 항목에 애니메이션 적용
jcrop_api.animateTo(getRandom());
});
$('#release').click(함수(e) {
// 해제 방법으로 선택 항목을 지웁니다.
jcrop_api.release();
});
$('#disable').click(function(e) {
// Jcrop 인스턴스 비활성화
jcrop_api.disable();
// 비활성화된 상태를 반영하도록 인터페이스를 업데이트합니다.
$('#활성화').show();
$('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
// Jcrop 인스턴스를 다시 활성화합니다.
jcrop_api.enable();
// 활성화된 상태를 반영하도록 인터페이스를 업데이트합니다.
$('#활성화').hide();
$('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
// 이 버튼은 Jcrop이 파괴되었을 때 표시됩니다.
// 재부착을 수행하고 UI를 업데이트합니다.
$('#rehook,#enable').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
거짓을 반환;
});
$('#unhook').click(function(e) {
// Jcrop 위젯을 삭제하고 원래 상태로 복원합니다.
jcrop_api.destroy();
// 연결되지 않은 상태를 반영하도록 인터페이스를 업데이트합니다.
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
거짓을 반환;
});
// 세 개의 이미지 교환 버튼을 연결합니다.
$('#img1').click(함수(e) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
거짓을 반환;
});
$('#img2').click(함수(e) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
거짓을 반환;
});
$('#img3').click(함수(e) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
this.setOptions({
bg불투명도: 1,
외부 이미지: 'demo_files/sagomod.jpg'
});
this.animateTo(getRandom());
});
거짓을 반환;
});
// 체크박스는 체크된 값에 따라 옵션을 설정합니다.
// 새 옵션 객체를 전달하여 옵션이 변경됩니다.
// 또한 이상한 동작을 방지하기 위해 초기에 검사합니다.
// 이는 Jcrop의 기본 초기 상태와 일치합니다.
$('#can_click').change(함수(e) {
jcrop_api.setOptions({allowSelect: !!this.checked });
jcrop_api.focus();
});
$('#can_move').change(함수(e) {
jcrop_api.setOptions({allowMove: !!this.checked });
jcrop_api.focus();
});
$('#can_size').change(함수(e) {
jcrop_api.setOptions({allowResize: !!this.checked });
jcrop_api.focus();
});
$('#ar_lock').change(함수(e) {
jcrop_api.setOptions(this.checked?
{ 양상비율: 4/3 }: { 양상비율: 0 });
jcrop_api.focus();
});
$('#size_lock').change(함수(e) {
jcrop_api.setOptions(this.checked? {
최소 크기: [80, 80],
최대 크기: [350, 350]
}: {
최소 크기: [0, 0],
최대 크기: [0, 0]
});
jcrop_api.focus();
});
});
</script>
</head>
<본문>
<div id="외부">
<div>
<div>
<h1>Jcrop - API 데모</h1>
<img src="demo_files/sago.jpg" id="target" />
<div 스타일="마진: .8em 0 .5em;">
<스팬>
<button id="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>
<fieldset 스타일="마진: .5em 0;">
<legend>이미지 변경</legend>
<스팬>
<button id="img2">풀</button>
<button id="img1">사고</button>
<button id="img3">외부 이미지가 포함된 Sago</button>
</span>
</fieldset>
<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>
