'Front-End/jQueryUI' 카테고리의 글 목록 (8 Page)

[jQueryUI] 이미지 크기 드래그로 조절 - resizable()

Front-End/jQueryUI 2017. 1. 12. 14:41

이미지 크기 드래그로 조절 - resizable()

1. 정의

- 이미지 혹은 텍스트 박스를 드래그를 이용하여 크기를 조절한다

- resizable()

2. 구문

- $(대상 요소).resizable({매개변수명: 값})

3. 주요 매개변수

1) aspectRatio

- 크기 조정시 종횡비 지정

- aspectRatio:2/3 이면 가로 세로 비율이 2:3을 유지하여 크기 지정

2) ghost/helper

- ghost : 투명 크기 조정 이미지 우효화

- helper : 크기 조정 시 표시할 대체 요소에 적용되는 스타일 클래스 지정

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .helper{ border : 2px dotted red; } </style> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> </head> <img src="big.png" class="pic"/> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('.pic').resizable({ helper : "helper" }); }); </script>

3) grid

- 기본은 연속적으로 사이즈를 조절하지만 grid를 지정함으로 지정된 단위의 요소 크기를 조절

- grid:[40,30] 가로 40px, 세로30px의 단위로 조정

2. 예

1) 이미지

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> </head> <img src="big.png" class="pic"/> <img src="small.png" class="pic"/> <img src="medium.png" class="pic"/> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('.pic').resizable({ minHeight : 50, minWidth:70, autoHide: true, ghost : true }); }); </script>

- resizable() 제대로 작동을 안한다면 ?

: <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

위 부분을 추가

2) 텍스트

- 이미지와 비슷하다

- 그러나 텍스트는 콘텐츠가 영역에 벗어나지 않도록 'overflow:hidden' 처리한다

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 드래그 드랍 정렬요소 제한하기 - sortable()[items, cancel] (0)	2017.01.12
[jQueryUI] 드래그를 이용한 데이터 정렬 - sortable() (0)	2017.01.12
[jQueryUI] 에니메이션 무효화 - $.fx.off() (0)	2017.01.12
[jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings (0)	2017.01.11
[jQueryUI] 드래그엔드롭효과 - effect(), transfer (0)	2017.01.10

리딩리드

,

[jQueryUI] 에니메이션 무효화 - $.fx.off()

Front-End/jQueryUI 2017. 1. 12. 14:31

에니메이션 무효화 - $.fx.off()

1. 정의

- 성능이 낮은 환경에서 에니메이션은 부담이 될 수 있다

- 상황에 따라서 $.fx.off = true 를 적용하여 부담을 줄인다

- 해당 함수를 설정하면 에니메이션이 바로 끝난 후의 상태가 된다

2. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:100px; height:100px; background-color: #ccc; } </style> </head> <div id="box"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $.fx.off = true; $('#box').animate({ marginTop : '300px', marginLeft : '500px' },3000); }); </script>

- 해당 위치에서 에니메이션이 끝난 상태로 바로 이동 함

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 드래그를 이용한 데이터 정렬 - sortable() (0)	2017.01.12
[jQueryUI] 이미지 크기 드래그로 조절 - resizable() (0)	2017.01.12
[jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings (0)	2017.01.11
[jQueryUI] 드래그엔드롭효과 - effect(), transfer (0)	2017.01.10
[jQueryUI] 확장된 표시/ 비표시 함수 - show(), hide() toggle() (0)	2017.01.10

리딩리드

,

[jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings

Front-End/jQueryUI 2017. 1. 11. 18:02

에니메이션 변화를 효과를 주며 지정 - easeInBounce

1. 변화

- 에니메이션 효과를 실행하는 도중에 변화를 준다

- 변화 효과 종류 : http://api.jqueryui.com/easings

2. 예 - easeInBounce

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:100px; height:100px; background-color: #ccc; } </style> </head> <div id="box"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#box').animate({ marginTop : '300px', marginLeft : '500px', backgroundColor : '#F00' },3000,'easeInBounce'); }); </script>

- 처음 위치에서 마진값 까지 왔다갔다 하면서 이동한다

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 이미지 크기 드래그로 조절 - resizable() (0)	2017.01.12
[jQueryUI] 에니메이션 무효화 - $.fx.off() (0)	2017.01.12
[jQueryUI] 드래그엔드롭효과 - effect(), transfer (0)	2017.01.10
[jQueryUI] 확장된 표시/ 비표시 함수 - show(), hide() toggle() (0)	2017.01.10
[jQueryUI] 다른스타일로 서서히 전환 - switchClass() (0)	2017.01.10

리딩리드

,

[jQueryUI] 드래그엔드롭효과 - effect(), transfer

Front-End/jQueryUI 2017. 1. 10. 17:16

드래그엔드롭효과 - effect(), transfer

1. 정의

- effect() : jQueryUI의 Effect확장에서 제공되는 다양한 효과를 표시/비표시 동작에서 분리할 때 사용

- $(대상요소).effect(효과, 옵션, 시간, 콜백함수);

- 'blind', clip, drop, explode, fold, puff 는 hide()와 같은 효과를 가진다

2. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #over{ width:400px; height:400px; background-color: #ccc; } .ui-effect-transfer{ border : 1px dashed #f00; } </style> </head> <input type="button" id="move" value="move"/> <div id="over"><img src="small.png"/></div> <div id="under" class="ui-effect-transfer"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#move').click(function(){ $('#over').effect('transfer',{to : $('#under')}, 2000, function(){ //이동 종료 후에 요소의 내용 이동 $('#under').html($(this).html()); $(this).html(''); }); }); }); </script>

- 이미지가 빨간 선 아래로 이동한다

- { to : $('#under') } : 해당 요소가 이 부분 으로 이동

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 에니메이션 무효화 - $.fx.off() (0)	2017.01.12
[jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings (0)	2017.01.11
[jQueryUI] 확장된 표시/ 비표시 함수 - show(), hide() toggle() (0)	2017.01.10
[jQueryUI] 다른스타일로 서서히 전환 - switchClass() (0)	2017.01.10
[jQueryUI] 스타일클래스 적용/제외 시 에니메이션 - addClass(), removeClass(), toggleClass() (0)	2017.01.09

리딩리드

,

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

'Front-End/jQueryUI'에 해당되는 글 38건

[jQueryUI] 이미지 크기 드래그로 조절 - resizable()

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 에니메이션 무효화 - $.fx.off()

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 드래그엔드롭효과 - effect(), transfer

'Front-End > jQueryUI' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바