donaricano-btn

 jQueryUI 표준 아이콘 세트 이용하기


1. 방법

1) ThemeRoller에서 아이콘 명을 확인

2) 예



블로그 이미지

리딩리드

,
donaricano-btn

jQueryUI 이용 방법


1. jQueryUI 기본 구조

 컴포넌트

개요 

interactions 

드래그&드롭, 크기 조정 등 마우스를 사용한 대화 조작 

widgets 

아코디언 패널, 대화상자, 메뉴 등 

Effects 

jQuery의 효과를 확장 


2. jQueryUI 페이지의 기본 구조


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/>

- 해당 부분은 테마의 이름을 나타낸다(용도에 따라 변함)


3. jQueryUI 실행에 필요한 파일

 파일

개요 

jquery-1.11.0.min.js

jQuery( 별도로 다운로드) 

/js/jquery-ui-1.10.4.custom.min.js

jQueryUI 

 /css/redmond/jquery-ui-1.10.4.custom.min.css

스타일 시트 

 /css/redmond/images  폴더 

이미지 파일들 


4. jQueryUI 표준 테마

-black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, redmond......

- jquery themeroller 라는 어플에서 실행해 볼수 있다


5. jquery themeroller 이용

1)  https://jqueryui.com/themeroller/ 접속

2)  gallery 선택

- 자신이 만들고자 하는 테마에 맞는 것을 선택한다

3) Roll your own  으로 세세한 부분을 작성

- 폰트, 스타일 등...

4) download 버튼을 클릭한다

- download 할시 각종 버전과 테마를 최종적으로 선택

- 패키지가 다운로드 된다





블로그 이미지

리딩리드

,
donaricano-btn

드랍 요소 제어하기 - droppable[accept, scope]


1. accept

- 특정 요소를 지정 할 수 있을 때 사용



2. scope

- 양측의 범위값이 일치하는 것 끼리 드래그 드롭 할 수 있다

 

- revert : true를 이용하여 드랍한 후 제자리로 간다


블로그 이미지

리딩리드

,
donaricano-btn

드래그 드랍 지정하기 - draggable(), droppable()


1. 정의

- DIV 요소에 드랍, 드래그를 할 수 있도록 지정


2. 문법

- $('드래그 요소').draggable({매개변수: 값..})

- $('드랍요소').droppable({매개변수: 값..})


3. 매개변수

1) draggable

a. 기본    

- cusor : 드래그 중인커서

- oppacity : 투명도

- scroll : 드래그 조작중 스크롤

- handler : 드래그 핸들

- helper : 드래그 중의 표시

....

b. 제한 

- axis : 드래그 가능한 방향

- cancel : 선택 할 수 없는 요소

...

c. 리스너 

- start : 드래그 시작 시 

- drag : 드래그 시 호출

- stop : 드래그 종료시 

2) droppable

a. 기본 

-  accept : 드롭 할 수 있는 요소

-  aciveClass, hoverClass

...

b. 리스너

- activate : 드래그 시작시 

- over : 드래그 요소가 영역으로 올때

- out : 요소 나갈 때

- drop : 드롭 시


4. 예제



블로그 이미지

리딩리드

,