jQuery LigerUI 플러그인 소개 및 ligerDrag 및 ligerRessible 샘플 코드 사용 Packaging

jQuery LigerUI 플러그인 소개 및 ligerDrag 및 ligerRessible 샘플 코드 사용 Packaging_jquery

WBOY

풀어 주다： 2016-05-16 18:08:40

원래의

1110명이 탐색했습니다.

ligerDrag()
대상 객체를 드래그 가능하게 만듭니다.
매개변수
핸들러
드래그하는 영역은 이 영역에서만 실행될 수 있습니다. 문자열(jQuery 선택기) 또는 Dom jQuery 객체일 수 있습니다.
onStartDrag
드래그 이벤트 시작
onDrag
드래그 이벤트
onStopDrag
드래그 이벤트 종료
jQuery LigerUI 플러그인 소개 및 ligerDrag 및 ligerRessible 샘플 코드 사용 Packaging_jquery
예시 1: 기본 모드

코드 복사 코드는 다음과 같습니다.

< script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript">

코드 복사 코드는 다음과 같습니다.

예 2: 드래그는 패널

코드 복사 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다:

$(function () 
{ 
$('#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 }

코드 복사

코드는 다음과 같습니다.

$('#rr1,#rr3,#rr2').ligerDrag({

onStartDrag: 함수(현재)
{

current.target.addClass("l-draging") }, onStopDrag: 함수(현재) { current.target .removeClass("l-드래깅") } } 🎜>

 >

코드 복사

 코드는 다음과 같습니다. 

$('#rr1,#rr3,#rr2 ').ligerDrag({ 
onDrag: 함수(현재)

{
$("#message").html(
"Object:" current.target.attr("id")

"
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 이벤트
jQuery LigerUI 플러그인 소개 및 ligerDrag 및 ligerRessible 샘플 코드 사용 Packaging_jquery

jQuery LigerUI 플러그인 소개 및 ligerDrag 및 ligerRessible 샘플 코드 사용 Packaging_jquery

예 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;">

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"); 
} 
}); 