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

[jQueryUI] 드래그로 여러항목 선택 - selectable()

Front-End/jQueryUI 2017. 1. 12. 16:21

드래그로 여러항목 선택 - selectable()

1. selectable()

- 해당 함수를 이용하여 여러개를 선택할 수 있다

2. 문법

$('리스트').selectable({매개변수명:값})

3. 매개변수와 스타일

1) 매개변수

- cancel : 선택할 수 없는 요소

- delay : 선택까지의 지연시간

- tolerance : 선택되었다고 판정하는 기준

- start : 선택 시작시 처리

- stop : 선택 종료 처리

..

2) 스타일

- ui-selectable : 선택 가능한 목록

- ui-selectee : 선택 가능한 요소

- ui-selecting : 선택 중인 항목

- ui-unselecting : 선택이 해제

- ui-selected : 선택된 항목

4. 예

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #list{ list-style-type: none; margin : 5px; width:150px; } #list li{ border: 1px solid #000; color: #000; margin : 5px; padding : 5px; } .ui-selectee{ background-color : #ffd; } .ui-selected{ background-color : #f7f; } .ui-selecting{ background-color : #fef; } </style> </head> <ul id="list"> <li id="1">English</li> <li id="2">Math</li> <li id="3">Art</li> <li id="4">Music</li> <li id="5">Science</li> </ul> <div id="result"></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(){ $('#list').selectable({ stop:function(){ $('#result').text($('.ui-selected').text() + '선택함'); } }); }); </script>

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

[jQueryUI] 드랍 요소 제어하기 - droppable[accept, scope] (0)	2017.01.12
[jQueryUI] 드래그 드랍 지정하기 - draggable(), droppable() (0)	2017.01.12
[jQueryUI] 드래그 드랍으로 정렬시 드랍 위치 표시 - sortable()[placeholder] (0)	2017.01.12
[jQueryUI] 드래그 드랍 정렬요소 제한하기 - sortable()[items, cancel] (0)	2017.01.12
[jQueryUI] 드래그를 이용한 데이터 정렬 - sortable() (0)	2017.01.12

리딩리드

,

[jQueryUI] 드래그 드랍으로 정렬시 드랍 위치 표시 - sortable()[placeholder]

Front-End/jQueryUI 2017. 1. 12. 15:58

드래그 드랍으로 정렬시 드랍 위치 표시 - sortable()[placeholder]

1. placeholder

- 위 매개변수로 드랍되는 곳의 위치를 표시 할 수 있다

2. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> li{ list-style-type: none; } .ph{ border: 1px solid red; } </style> </head> <ul id="list"> <li id="1">English</li> <li id="2">Math</li> <li id="3">Art</li> <li id="4">Music</li> </ul> <div id="result"></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(){ $('#list').sortable({ forcePlaceholderSize : true, placeholder : 'ph' }); }); </script> <textarea> <br /></span></b></p><p style="margin-left: 4em;"><b><span style="font-size: 24pt;"><br /></span></b></p><p style="margin-left: 2em;"><b><span style="font-size: 24pt;"><br /></span></b></p>

- forcePlaceholderSize : true

- 위 매개변수를 추가하여 빨간 박스 형태를 만들 수 있다

- 없다면 선만 보임

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

[jQueryUI] 드래그 드랍 지정하기 - draggable(), droppable() (0)	2017.01.12
[jQueryUI] 드래그로 여러항목 선택 - selectable() (0)	2017.01.12
[jQueryUI] 드래그 드랍 정렬요소 제한하기 - sortable()[items, cancel] (0)	2017.01.12
[jQueryUI] 드래그를 이용한 데이터 정렬 - sortable() (0)	2017.01.12
[jQueryUI] 이미지 크기 드래그로 조절 - resizable() (0)	2017.01.12

리딩리드

,

[jQueryUI] 드래그 드랍 정렬요소 제한하기 - sortable()[items, cancel]

Front-End/jQueryUI 2017. 1. 12. 15:43

드래그 드랍 정렬요소 제한하기 - sortable()[items, cancel]

1. 매개변수 items vs cancel

- items : 해당 요소의 드래그 드롭이 불가능하다

- cancel : 드래그만 할 수 없다

2. 예

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .helper{ border : 2px dotted red; } </style> </head> <table border="1px solid"> <thead> <th>No.</th><th>List</th> </thead> <tbody id="list"> <tr id="1"> <th>1</th><th>English</th> </tr> <tr id="2"> <th>2</th><th>Math</th> </tr> <tr id="3"> <th>3</th><th>Art</th> </tr> <tr id="4" class="nosort"> <th>4</th><th>HR</th> </tr> </tbody> </table> <div id="result"></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(){ $('#list').sortable({ // items: '> tr:not(.nosort)' cancel: '.nosort' }); }); </script>

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

[jQueryUI] 드래그로 여러항목 선택 - selectable() (0)	2017.01.12
[jQueryUI] 드래그 드랍으로 정렬시 드랍 위치 표시 - sortable()[placeholder] (0)	2017.01.12
[jQueryUI] 드래그를 이용한 데이터 정렬 - sortable() (0)	2017.01.12
[jQueryUI] 이미지 크기 드래그로 조절 - resizable() (0)	2017.01.12
[jQueryUI] 에니메이션 무효화 - $.fx.off() (0)	2017.01.12

리딩리드

,

[jQueryUI] 드래그를 이용한 데이터 정렬 - sortable()

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

드래그를 이용한 데이터 정렬 - sortable()

1. 정의

- sortable()응 이용하여 정렬 기능 설정

- 지정된 요소 아래의 자식 요소 정렬

- 많은 매개변수가 존재한다

2. 구문

- $('리스트/테이블 등..').sortable(매개변수명 : 값)

3. 예

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .helper{ border : 2px dotted red; } </style> </head> <table border="1px solid"> <thead> <th>No.</th><th>List</th> </thead> <tbody id="list"> <tr id="1"> <th>1</th><th>English</th> </tr> <tr id="2"> <th>2</th><th>Math</th> </tr> <tr id="3"> <th>3</th><th>Art</th> </tr> </tbody> </table> <div id="result"></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(){ $('#list').sortable({ cusor : 'move', //아이콘형태 opacity : 0.5, update : function(e, ui){ $('#result').text($('#list').sortable('toArray')); }// 드래그시 동작 }); }); </script>

- <tbody> 요소를 이용하여 데이터 행을 분명히 지정한다

- update 매개변수로 결과를 화면에 표시한다

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

[jQueryUI] 드래그 드랍으로 정렬시 드랍 위치 표시 - sortable()[placeholder] (0)	2017.01.12
[jQueryUI] 드래그 드랍 정렬요소 제한하기 - sortable()[items, cancel] (0)	2017.01.12
[jQueryUI] 이미지 크기 드래그로 조절 - resizable() (0)	2017.01.12
[jQueryUI] 에니메이션 무효화 - $.fx.off() (0)	2017.01.12
[jQueryUI] 에니메이션 변화를 효과를 주며 지정 - Easings (0)	2017.01.11

리딩리드

,

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

[jQueryUI] 드래그로 여러항목 선택 - selectable()

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

[jQueryUI] 드래그 드랍으로 정렬시 드랍 위치 표시 - sortable()[placeholder]

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

[jQueryUI] 드래그 드랍 정렬요소 제한하기 - sortable()[items, cancel]

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

[jQueryUI] 드래그를 이용한 데이터 정렬 - sortable()

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					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