jQuery LigerUI 플러그인 소개 및 ligerDrag 및 ligerRessible 샘플 코드 사용 Packaging_jquery
- WBOY원래의
- 2016-05-16 18:08:401153검색
ligerDrag()
대상 객체를 드래그 가능하게 만듭니다.
매개변수
핸들러
드래그하는 영역은 이 영역에서만 실행될 수 있습니다. 문자열(jQuery 선택기) 또는 Dom jQuery 객체일 수 있습니다.
onStartDrag
드래그 이벤트 시작
onDrag
드래그 이벤트
onStopDrag
드래그 이벤트 종료 
예시 1: 기본 모드
코드 복사 코드는 다음과 같습니다.
< script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript">
코드 복사 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
제목
코드 복사 코드는 다음과 같습니다:
$(function ()
{
$('#rr1').ligerDrag( { handler: '.header' } ;
코드는 다음과 같습니다:
{
$('#rr1').ligerDrag( { handler: '.header' } ;
코드는 다음과 같습니다:
functionchangeZIndex(obj)
{
$(obj).css(" z-index", 2).siblings("div ").css("z-index", 1); } $(function () { $('#rr1 ,#rr3,#rr2').ligerDrag({ onStartDrag: 함수(현재) {
changeZIndex(current.target[0]); }
}); >});
예제 4: 드래그 시 개체를 반투명하게 만들기
코드 복사
코드는 다음과 같습니다:
.l-draging{filter:alpha(opacity=50);opacity:0.50 } }); >});
예제 4: 드래그 시 개체를 반투명하게 만들기
코드 복사
코드는 다음과 같습니다:
코드는 다음과 같습니다.
$('#rr1,#rr3,#rr2').ligerDrag({
{
current.target.addClass("l-draging") }, onStopDrag: 함수(현재) { current.target .removeClass("l-드래깅") } } 🎜>
>
코드 복사
코드는 다음과 같습니다.
$('#rr1,#rr3,#rr2 ').ligerDrag({
onDrag: 함수(현재)
{ 코드 복사
코드는 다음과 같습니다.
$('#rr1,#rr3,#rr2 ').ligerDrag({
onDrag: 함수(현재)
$("#message").html(
"Object:" current.target.attr("id")
"
X 이동:" current.diffX "
Y 이동: " current.diffY) }, onStopDrag: 함수(현재) { $("#message").html("") }
});X 이동:" current.diffX "
Y 이동: " current.diffY) }, onStopDrag: 함수(현재) { $("#message").html("") }
ligerRessible()
대상 객체의 크기를 조정할 수 있도록 만듭니다.
매개변수
핸들
크기 조정이 실행될 수 있는 크기 조정 영역입니다. 끈. 8개 방향 포함: n, e, s, w, ne, se, sw, nw. 하나 이상을 자유롭게 선택할 수 있습니다. 여러 개일 경우 쉼표로 구분하세요.
onStartResize
크기 조정 이벤트 시작
onResize
Resize 이벤트
onStopResize
End resize 이벤트
예 1: 기본적으로 매개변수가 사용되지 않으며, handler='n, e, s, w, ne, se, sw, nw'
코드 복사 코드는 다음과 같습니다.
id ="rr2" style="width:140px;height:300px;top:40px; left:350px; background:#AFCCF1; z-index:2;position:absolute;">
예시 2: 크기 조정은 오른쪽 하단에서만 가능합니다
$('#rr1').ligerRessible({ handler: 'se' })
예 2: onStartResize, onResize, onStopResize 이벤트 설정
$('#rr1').ligerRessible({
onStartResize: 함수(현재, e)
{
$("#message").html("start")
},
onResize: 함수(현재, e)
{
$("#message" ).html(
"direction:" current.dir
"
width:" current.newWidth
"
height: " current.newHeight);
},
onStopResize: 함수 (현재, e)
{
$("#message").html("stop");
}
});
마지막으로 데모 다운로드가 첨부되었습니다: 다운로드 주소
자세한 내용은 http://demo.jb51.net을 참조하세요. /js/2011/ligerUI/drag01.html
id ="rr3" style="width:200px;height:200px;top:150px; background:#DA9188; z-index:3;position:absolute;">
코드 복사 코드는 다음과 같습니다.
예시 2: 크기 조정은 오른쪽 하단에서만 가능합니다
코드 복사 코드는 다음과 같습니다 :
$('#rr1').ligerRessible({ handler: 'se' })
예 2: onStartResize, onResize, onStopResize 이벤트 설정
코드 복사 코드는 다음과 같습니다.
$('#rr1').ligerRessible({
onStartResize: 함수(현재, e)
{
$("#message").html("start")
},
onResize: 함수(현재, e)
{
$("#message" ).html(
"direction:" current.dir
"
width:" current.newWidth
"
height: " current.newHeight);
},
onStopResize: 함수 (현재, e)
{
$("#message").html("stop");
}
});
마지막으로 데모 다운로드가 첨부되었습니다: 다운로드 주소
자세한 내용은 http://demo.jb51.net을 참조하세요. /js/2011/ligerUI/drag01.html
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.