jquery ui - 총 13시간 24분 / 강의당평균 : 40분12초

jquery ui

전체 : 13시간 24분 / 강의당평균 : 40분12초

01 jQuery UI란?

jQuery UI 소개, 라이브러리 다운, CSS프레임워크에 대해 알아봅니다.

40분

책갈피 : [00:10] jQuery란? / [01:14] jQuery UI란? / [02:21] jQuery UI 홈페이지 / [02:48] Download / [04:25] 데모&도큐멘테이션 / [04:42] Themes / [06:06] 폴더 구조 / [06:52] js폴더 / [07:34] development-bundle / [08:14] index.html / [09:35] 준비사항 / [09:49] alzio0.html / [10:50] 제이쿼리 라이브러리 / [11:17] 제이쿼리UI 라이브러리 / [11:54] 구글 라이브러리사용방법 / [12:47] 구글 라이브러리 / [15:16] div 추가 / [15:52] class명 확인 / [16:47] 적용값확인 / [17:04] CSS 링크 / [17:51] 적용값확인 / [18:48] CSS 프레임워크 적용 / [19:15] ui-widget 삭제 / [19:42] ui-widget-header 삭제 / [20:32] .ui-widget-header / [20:55] .ui-widget-header 삭제 / [22:38] .ui-widget-content / [23:00] .ui-widget-content 삭제 / [23:53] div 추가 / [25:11] css링크 삭제 / [26:29] .ui-corner-all / [27:13] .ui-corner-all 삭제 / [28:04] .ui-state-active / [28:33] .ui-state-active 삭제 / [29:01] .ui-state-active a / [29:49] .ui-state-default / [30:14] .ui-state-default a / [31:54] script 선언 / [32:05] hover효과 / [34:20] 제이쿼리 라이브러리 추가 / [34:39] 적용값확인 / [35:46] 아이콘추가 / [36:28] 적용값확인 / [37:02] .ui-icon / [37:37] .ui-icon-circle-plus / [38:25] 아이콘 이미지 / [38:57] .ui-icon-help

02 테마 오버라이딩, 포지션 유틸리티

적용된 테마를 쉽고 빠르게 변경하는 방법과, 포지션 유틸리티의 사용법에 대해 알아봅니다.

34분

책갈피 : [00:54] 지난강의내용 / [01:47] jQuery공식사이트 / [02:06] Theme 변경 / [02:54] Trontastic테마 / [03:41] css파일추가 / [04:05] custom2 적용 / [05:52] CSS오버라이딩 / [06:32] alzioOverrides.css파일 / [07:04] alzioOverrides 적용 / [08:19] .ui-widget / [08:59] .ui-corner-all / [09:48] .ui-state-default / [10:32] border / [11:12] .ui-state-active / [12:12] .ui-state-active a / [12:50] .ui-icon / [13:38] .ui-state-hover / [14:37] 적용값확인 / [15:53] 오버라이딩파일 위치 / [16:16] alzio1.html / [16:35] position 유틸리티 / [17:24] position 옵션 / [18:10] div 추가 / [18:53] .alzio1~2 / [19:45] 적용값확인 / [21:15] $(".alzio2").position / [22:29] of: ".alzio1" / [24:31] my, at / [25:50] right / [26:02] right bottom / [27:31] my: "right top" / [28:16] my:"right", at: "left" / [29:10] 적용값확인 / [30:55] collision / [31:26] collision:"none" / [31:52] collision:"fit" / [33:12] offset

03 탭 위젯

기본 탭위젯을 구현하는 방법을 알아보고, 탭 환경설정 옵션에 대해 실습합니다.

34분

책갈피 : [00:41] tab 위젯 / [01:42] css, 라이브러리 파일 / [02:46] div id="alzioTab" / [02:52] HTML구조 / [04:51] li요소의 사용 / [05:36] div요소의 사용 / [06:44] 적용값확인 / [07:09] $("#alzioTab") / [07:26] tabs 메소드 / [08:07] 적용값확인 / [09:13] 탭 환경설정 옵션 / [09:59] 옵션 사용 방법 / [10:15] selected: 1 / [11:35] 적용값확인 / [12:29] selected: null / [13:14] 변수 사용 / [14:34] 적용값확인 / [15:51] disabled: [1] / [16:23] 적용값확인 / [17:21] disabled: [0] / [18:35] selected: 1 추가 / [19:12] 적용값확인 / [19:57] fx / [20:41] 첫번째 인자 / [21:38] 두번째 인자 / [22:23] 적용값확인 / [22:47] null값 추가 / [24:23] 적용값확인 / [25:02] height 수정 / [25:23] width / [25:43] collapsible / [27:37] collapsible: true / [28:10] 적용값확인 / [29:16] event / [29:46] event: "mouseover" / [30:30] 적용값확인 / [31:11] event: "click" / [31:30] event: "dbclick" / [31:54] event: "mouseup"

04 탭 위젯

탭 이벤트와 탭 메소드를 실습을 통해 학습합니다.

38분

책갈피 : [00:06] 탭 이벤트 / [01:28] $("#alzioTab").tabs / [01:44] select이벤트 / [02:58] 변수 eventSelect / [03:33] select 설명 / [04:13] p태그삽입 / [04:24] appendTo / [05:13] fadeOut / [06:21] text / [06:47] tab.index / [07:28] class: "message" / [07:50] .message / [08:29] 적용값확인 / [09:12] 수식과 문자열 관게 / [10:11] event 옵션 / [11:56] show이벤트 / [12:31] 적용값확인 / [13:05] alzio3.html / [13:25] 탭 메소드 / [14:19] disabled 옵션 / [15:06] button 추가 / [15:33] $("#enable").click / [15:54] enable / [17:13] enable 설명 / [17:40] 적용값확인 / [18:00] $("#disable").click / [18:17] disable / [18:32] 적용값확인 / [19:43] 주석처리 / [20:01] input, button 추가 / [20:22] 적용값확인 / [20:37] $("#add").click / [20:55] add / [21:26] 첫번째 인자 / [21:51] 두번째 인자 / [22:13] 적용값확인 / [22:43] 세번째 인자 / [23:12] 적용값확인 / [23:43] $("#remove").click / [23:57] remove메소드 / [25:09] parseInt($("#index").val()) / [25:41] val() / [26:40] parseInt / [27:14] 적용값확인 / [28:36] select 메소드 / [29:52] 적용값확인 / [30:44] $("#alzioTab").tabs("length")-1 / [30:59] length 메소드 / [32:23] select 메소드 실습 / [34:39] rotate 메소드 / [35:24] 적용값확인 / [35:39] destroy 메소드 / [36:52] 적용값확인

05 탭 위젯, 아코디언 위젯

탭 메소드를 알아보고, 아코디언 위젯에 대해 알아봅니다.

37분

책갈피 : [00:16] option메소드 / [01:14] 메소드 성격 / [02:09] option 인자값 / [02:39] button추가 / [03:07] option의 getting / [03:33] 적용값확인 / [04:05] $("button").click / [04:29] p 내부 text / [04:49] ("option", "selected") / [07:07] class: "message" / [07:27] .message / [07:42] 적용값확인 / [08:39] label, input, button 추가 / [09:12] option의 setting / [10:15] 두번째 인자값 / [11:18] parseInt / [11:40] 적용값확인 / [12:20] disabled / [13:08] 두번째 인자값 수정 / [14:24] Ajax탭 / [15:16] 적용값확인 / [15:38] tab.txt / [16:35] select 추가 / [17:01] $("#select").change / [17:36] url 메소드 / [18:42] 두번째 인자값 / [19:39] tab2.txt / [19:52] 적용값확인 / [21:24] load 메소드 / [22:05] 적용값확인 / [22:26] 아코디언 위젯 / [23:57] html구조 / [25:12] 컨텐트 요소변경 / [26:18] div id="alzioAccordion" / [27:02] accordion메소드 / [28:21] 아코디언 옵션 / [29:11] event 옵션 / [30:28] active 옵션 / [32:57] active: false / [34:06] collapsible옵션

06 아코디언 위젯

아코디언 옵션, 아코디언 이벤트, 아코디언 메소드에 대해 실습합니다.

37분

책갈피 : [00:06] autoHeight / [00:24] ALZIO3 수정 / [00:34] 기본Accordion구현 / [01:24] autoHeight: true / [02:34] fillSpace / [03:30] div id="ALL" / [04:04] fillSpace: false / [05:48] animated / [06:37] animated: false / [07:08] 적용값확인 / [07:57] animated: "bounceslide" / [08:40] 제이쿼리 라이브러리 / [09:12] jquery.effects.core / [10:26] easeOutCirc / [10:49] easeInBounce / [11:18] 아코디언 이벤트 / [12:53] 코드 작성 / [13:05] change 이벤트 / [13:38] ui 객체 / [15:05] div text / [16:57] ui.newHeader / [17:23] insertAfter / [17:56] fadeOut / [19:12] changestart 이벤트 / [20:13] 아코디언 메소드 / [22:18] label, input, button 추가 / [23:02] $("#activate").click / [23:37] activate 메소드 / [24:20] val() / [24:37] parseInt / [25:02] 적용값확인 / [26:26] resize / [26:34] alzio6.html / [27:21] 적용값확인 / [27:55] 코드 작성 / [28:08] changestart / [28:26] if문 / [30:32] accordion.txt / [31:01] data / [31:13] 적용값확인 / [31:54] change 이벤트 추가 / [32:18] resize 메소드 / [33:23] 적용값확인 / [34:20] 탭, 아코디언 위젯 결합 / [34:52] 적용값확인 / [35:23] accordion, tabs / [35:49] 적용값확인

07 대화상자 위젯

대화상자 옵션에 대해 알아보고 실습합니다.

36분

책갈피 : [00:05] 대화상자(Dialog) 위젯 / [01:16] 대화상자 마크업 / [01:53] 적용값확인 / [02:22] dialog / [03:03] title 역할 / [03:36] 이동가능 / [03:54] 크기조절가능 / [04:52] 대화상자 옵션 / [06:20] autoOpen: false / [07:39] 기본 대화상자 생성 / [08:11] position 옵션 / [09:50] 적용값확인 / [10:28] position: (100, 100) / [10:53] position: (200, 200) / [11:04] title옵션 / [11:50] title: "알지오" / [12:29] title: a요소 출력 / [13:10] modal옵션 / [14:15] modal: true / [15:18] 아코디언 위젯 추가 / [15:37] 적용값확인 / [16:09] dialog, accordion 구현 / [16:55] modal 적용 / [18:26] buttons 옵션 / [19:16] buttons 인자값 입력 / [20:06] 적용값확인 / [21:29] buttons 복수 지정 / [22:26] close메소드 추가 / [23:19] 적용값확인 / [24:08] show, hide 옵션 / [24:59] 적용값확인 / [26:06] 애니메이션 종류 예 / [26:25] explode, highlight / [27:00] 적용값확인 / [28:37] width, height 옵션 / [29:54] minWidth, minHeight 옵션 / [30:58] maxWidth, maxHeight 옵션 / [31:24] 적용값확인 / [32:34] 대화상자 추가 / [33:16] 적용값확인 / [34:21] stack옵션 / [35:04] 적용값확인

08 대화상자 위젯, 동적 대화상자 제작

대화상자 이벤트, 대화상자 메소드에 대해 학습하고 하고, 실무에서 사용할 수 있는 동적 대화상자를 제작합니다.

38분

책갈피 : [00:06] 대화상자 이벤트 / [01:06] 기본 대화상자적용 / [01:15] div id="massage" / [02:21] 적용값확인 / [03:17] open이벤트 / [04:07] children(":last") / [04:56] 적용값확인 / [05:39] close이벤트 / [06:37] 적용값확인 / [07:09] beforeclose이벤트 / [08:06] 콜백함수 입력 / [09:21] if조건문 / [09:45] width()>300 / [10:08] return false / [11:24] 적용값확인 / [12:01] 대화상자 메소드 / [12:58] button 추가 / [14:16] autoOpen: false / [15:01] $("#button").click / [15:12] if조건문 / [15:31] else문 / [16:02] isOpen메소드 / [18:17] 적용값확인 / [18:51] 설문조사 대화상자 / [19:46] p, label, input 추가 / [20:16] 적용값확인 / [21:09] buttons옵션 추가 / [21:50] var option1 / [22:05] var answer / [24:27] dialog("close") / [24:38] var option2 / [25:06] 적용값확인 / [25:48] value="알지오" 수정 / [27:05] alzioAccordion 추가 / [27:26] 적용값확인 / [27:51] accordion위젯 / [28:23] alzio9.html / [28:41] 동적 대화상자 제작 / [29:27] html 구조 / [31:01] 적용값확인 / [31:27] css프레임워크 적용 / [32:10] css커스터마이징 / [33:06] #ALL / [33:33] .page / [34:42] .page img / [35:08] .page h3 / [35:35] #ALL .page p / [36:17] #ALL .ui-widget-header

09 동적 대화상자 제작, 슬라이더 위젯

동적 대화상자 제작을 위한 코드를 작성하고, 슬라이더 위젯에 대해 알아봅니다.

42분

책갈피 : [00:01] 진행상황 / [00:29] dialog위젯구현 / [00:48] 적용값확인 / [01:09] width, height 옵션 설정 / [01:27] modal: true / [01:42] autoOpen: false / [02:33] click이벤트 / [02:52] preventDefault / [03:28] fileName, titleText / [04:45] dialog("open") / [06:08] open이벤트 / [06:26] empty() / [06:51] img 생성 / [07:39] dialog("option", "title", titleText) / [09:20] 적용값확인 / [10:49] 슬러이더 위젯 / [12:31] HTML 마크업 / [13:01] slider 구현 / [13:31] a요소 자동생성 / [15:07] 슬라이더 옵션 / [15:56] orientation옵션 / [17:41] min, max 옵션 / [19:57] value 옵션 / [21:04] step 옵션기본설정 / [21:34] step: 50 / [23:04] animate 옵션 / [24:40] animate: "slow" / [24:53] animate: 3000 / [25:48] values 옵션 / [26:40] values 옵션값추가 / [27:47] range 옵션 / [28:16] range: "min" / [28:52] range: "max" / [29:13] 복수핸들일때의 range / [30:21] 슬라이더 이벤트 / [31:39] 이벤트의 순서 / [33:22] 기본 슬라이더 구현 / [33:26] change이벤트 / [34:26] div생성 / [35:42] 적용값확인 / [36:25] css커스터마이징 / [36:54] #alzioSlider / [37:06] #percent / [38:45] left: e.pageX - 35 / [39:16] 적용값확인 / [39:51] start이벤트 / [40:31] fadeOut() / [41:06] stop이벤트

10 슬라이더 위젯, RGB컬러 슬라이더 제작

슬라이더 메소드를 학습하고, 실무에서 사용할 수 있는 컬러 슬라이더를 구현합니다.

32분

책갈피 : [00:07] 슬라이더 메소드 / [01:10] value, values 옵션 / [01:29] button 추가 / [01:53] $("#set1").click() / [02:18] var max / [02:34] slider("option", "max") / [03:59] slider("value", max) / [04:40] 적용값확인 / [05:30] button 추가 / [06:04] 복수핸들설정 / [06:20] $(".button").click() / [06:52] if조건문 / [07:55] else문 / [08:06] 적용값확인 / [09:37] 주석처리 / [10:00] 이번실습완성본 / [10:51] Slider, Tab HTML 추가 / [11:28] tabs, slider 메소드구현 / [12:10] style="width:270px" / [12:42] min, max 옵션 / [13:46] 적용값확인 / [13:58] slide 이벤트 / [14:10] tabs("select", ui.value) / [15:04] 적용값확인 / [15:39] select 이벤트 / [15:56] slider("value", ui.index) / [16:28] 적용값확인 / [17:10] alzio11.html / [17:43] 이번실습완성본 / [18:25] HTML구성 / [19:27] 프레임워크 클래스 / [20:03] 적용값확인 / [20:22] $("#R, #G, #B").slider() / [20:46] css커스터마이징 / [21:07] #ALL / [21:54] #ALL label / [22:28] .ui-slider / [23:11] #colorShow / [23:55] #ALL #RGBcolorLabel / [24:09] #RGBcolor / [24:41] min,max,value 옵션설정 / [25:48] 적용값확인 / [26:08] slide 이벤트 / [26:27] var r, g, b / [27:05] var rgbText / [28:27] $("#colorShow").css / [29:00] background-color값 사용예 / [29:30] $("#RGBcolor").val / [31:03] 에러수정 / [31:14] 적용값확인

11 데이트픽커 위젯

데이트 픽커 위젯에 대해 알아보고, 환경 설정 옵션에 대해 실습합니다.

46분

책갈피 : [00:06] 데이트픽커 위젯 / [00:38] 데이트픽커 출력 / [01:32] 데이트픽커 구성 / [02:21] HTML 구성 / [02:53] 적용값확인 / [03:17] $("#alzioDate").datepicker() / [04:20] 키보드이동 / [05:21] 데이트픽커 옵션 / [05:57] appendText / [06:29] 적용값확인 / [07:13] defaultDate / [08:55] defaultDate 적용가능값 / [10:34] defaultDate 복수값 / [11:06] showOtherMonths: true / [11:57] showOtherMonths: false / [12:09] minDate / [13:40] maxDate / [14:45] changeMonth / [15:06] changeYear / [17:20] yearRange / [19:20] showButtonPanel / [20:37] closeText / [22:19] showOn / [24:09] buttonText / [24:54] buttonImage / [27:15] buttonImageOnly / [29:11] duration / [30:21] showAnim / [31:25] showAnim 적용가능값 / [31:58] showAnim: "explode" / [32:33] numberOfMonths / [34:31] numberOfMonths: 2 / [35:20] stepMonths / [36:36] showCurrentAtPos / [39:31] dateFormat / [39:59] 날짜 포맷 참조 / [40:35] yy mm dd / [41:19] y m d / [41:56] y m d DD / [42:19] yy년 mm월 dd일 / [43:11] yy 'y' mm 'y' dd 'y' / [44:29] 미리 정의된 날짜 포맷 / [44:49] $.datepicker.ATOM

12 데이트픽커 위젯 이벤트, 메소드

데이트 픽커 위젯에 대한 이벤트와 메소드를 실습을 통해 학습합니다.

40분

책갈피 : [00:07] alzio12.html / [01:04] showButtonPanel / [02:08] nextText, prevText / [03:18] nextText, prevText 삭제 / [03:39] monthNames / [04:51] monthNames 값입력 / [05:58] 적용값확인 / [06:44] monthNamesShort / [07:42] monthNamesShort 지정이유 / [08:44] dayNamesMin / [09:15] 적용값확인 / [09:55] dayNamesMin 값수정 / [10:31] dayNames, dayNamesShort / [11:27] dateFormat / [11:55] 적용값확인 / [12:23] yy/mm/dd - M/D / [13:23] firstDay / [14:17] firstDay: 1 / [14:57] isRTL: true / [15:24] 데이트픽커 이벤트 / [16:15] onSelect / [17:46] 적용값확인 / [18:23] beforeShow / [18:59] select 추가 / [19:23] 적용값확인 / [20:00] jquery-ui-i18n.js / [21:46] var lang / [22:20] $.datepicker.setDefaults / [23:53] 괄호추가 / [24:06] 적용값확인 / [25:52] 데이트픽커 메소드 / [27:07] button 추가 / [27:33] $("button").click / [27:48] setDate 메소드 / [28:14] 적용값확인 / [29:54] "setDate", "+1m +1d" / [30:38] "setDate", "10/27/2012" / [31:26] "setDate", "2012/10/27" / [32:50] $("#alzioDate").focus / [33:11] dialog 메소드 / [34:32] 첫번째인자-초기값 / [35:59] 두번째인자-콜백함수 / [36:15] function selectDate / [37:14] 적용값확인 / [38:15] 세번째인자-버튼 / [39:43] 네번째인자-위치

13 프로그레스바 위젯, 실용 프로그레스바 제작

프로그레스바에 대해 알아보고, 사용자와 상호작용하는 프로그레스바를 제작합니다.

45분

책갈피 : [00:09] 프로그레스바 위젯 / [00:56] alzio14.html / [01:10] HTML 구성 / [01:26] ("#alzioProgressbar").progressbar / [03:09] 프로그레스바 옵션 / [04:09] value 옵션 / [05:11] 프로그레스바 이벤트 / [05:53] button추가 / [06:34] $("#up").click / [06:52] var currentValue / [07:34] var newValue / [07:57] ("option", "value", newValue) / [08:41] 적용값확인 / [10:20] change 이벤트 / [10:32] var val / [10:53] if문 생성 / [12:14] appendTo / [12:25] 적용값확인 / [13:21] else문 생성 / [13:50] 적용값확인 / [15:33] 주석처리 / [16:17] 프로그레스바 메소드 / [16:42] var progress / [17:08] $("#up").click / [17:30] value 메소드의 사용 / [18:43] ("value", newVal) / [19:24] 적용값확인 / [19:43] if, else문 생성 / [20:52] 실용 프로그레스바 제작 / [21:20] 실습완성본 / [21:56] HTML 구성 / [22:51] fieldset / [25:01] 적용값확인 / [25:31] ui-helper-hidden / [26:28] progressbar구현 / [26:51] alzioprogress.css / [27:16] h1, h2 / [27:45] p / [28:50] form / [29:20] .form-container / [30:02] .page / [30:45] fieldset / [31:36] label, input, textarea / [32:14] button / [33:02] var pro, option / [33:22] change이벤트 / [34:55] $("#next, #back").click / [35:04] $("button").attr / [35:41] if (this.id==="next") / [37:00] fadeOut() / [38:33] $("#back").attr / [39:05] 적용값확인 / [39:40] if문 추가 / [40:39] 적용값확인 / [41:47] else문 추가 / [42:35] prev().fadeIn / [43:33] 적용값확인 / [44:40] 프로그레스바의 활용

14 버튼 위젯, 자동완성 위젯

버튼위젯에 대해 알아보고 나아가 자동완성 위젯을 구현해봅니다.

42분

책갈피 : [00:07] 버튼위젯 / [01:24] HTML구성-a / [01:55] $("#alzioButton1").button / [03:28] HTML구성-button / [03:57] $("#alzioButton2").button / [04:38] HTML구성-input / [05:54] $("#alzioButton3").button / [06:01] 적용값확인 / [08:27] 버튼 옵션 / [09:07] label 옵션 / [10:16] #alzioButton2, #alzioButton3 적용 / [10:30] 적용값확인 / [11:29] icons 옵션 / [12:35] ui-icon 불러오기 / [13:20] 적용값확인 / [15:10] text 옵션 / [15:51] #alzioButton2, #alzioButton3 적용 / [16:55] input요소의 아이콘 / [18:09] 버튼 이벤트 / [19:16] create 이벤트 / [20:21] "visibility", "hidden" / [21:55] buttonset / [22:37] checkbox 타입버튼 / [23:22] $("#alzioButton1").buttonset / [25:02] 체크박스 속성 상속 / [25:47] radio 타입버튼 / [26:12] name="alzio" / [26:59] $("#alzioButton1,#alzioButton2").buttonset / [27:57] 버튼 메소드 / [28:47] html요소추가 / [29:20] 적용값확인 / [29:40] buttonset 구현 / [30:27] #ALL 버튼 / [30:44] #refresh 버튼 / [31:02] 적용값확인 / [31:51] $("#alzioButtons").buttonset 삭제 / [33:33] refresh 메소드추가 / [33:55] 적용값확인 / [34:15] 자동완성 위젯 / [35:42] HTML구성 / [36:14] $("#alzio").autocomplete / [36:47] 자동완성 옵션 / [37:19] source : 문자열 / [38:44] 적용값확인 / [40:21] source : 배열객체

15 자동완성 위젯, 드래그 인터렉션

자동완성 위젯에 대해 자세히 알아보고, 드래그 인터렉션을 알아봅니다.

44분

책갈피 : [00:49] 자동완성 기본 구현 / [01:19] minLength 옵션 / [03:26] delay 옵션 / [04:59] autoFocus 옵션 / [06:07] position 옵션 / [06:47] my, at / [08:28] 적용값확인 / [09:00] my, at 값변경 / [09:30] 자동완성 이벤트 / [10:12] 위젯 구현 / [10:39] price 속성 / [10:58] 적용값확인 / [11:19] select 이벤트 / [11:42] if, else문 / [14:30] 적용값확인 / [15:21] 드래그 기능 / [17:53] HTML구성 / [18:16] 적용값확인 / [18:32] #alzioDrag / [19:41] $("#alzioDrag").draggable / [20:36] 드래그 옵션 / [21:31] cursor:move / [22:15] cursor 옵션 / [22:47] 적용값확인 / [24:03] axis 옵션 / [24:58] distance 옵션 / [25:58] distance: "500" / [26:34] cursorAt 옵션 / [28:32] delay 옵션 / [29:28] grid 옵션 / [30:39] revert 옵션 / [31:55] revertDuration 옵션 / [33:38] div id="alzio" 추가 / [34:03] #alzio / [34:52] handle 옵션 / [36:26] alzio19.html / [37:32] #container / [38:09] containment 옵션 / [39:46] div id="alzioDrag" 추가 / [40:39] stop 옵션 / [41:51] snapMode / [43:04] snapTolerance

16 드래그 이벤트와 메소드, 드롭 인터렉션

드래그 이벤트와 메소드에 대해 실습하고, 드롭 인터렉션을 알아봅니다.

44분

책갈피 : [00:10] 드래그 이벤트 / [01:13] var option / [01:29] ui.helper / [02:10] helper요소 / [03:05] addClass("up") / [03:39] .up / [03:58] 적용값확인 / [04:39] div id="result" / [05:16] stop 이벤트 / [05:51] var offset / [06:33] P생성 / [07:50] 적용값확인 / [09:06] 드롭 / [09:51] html구성 / [10:15] #alzioDrag, #alzioDrop / [10:34] 적용값확인 / [10:54] draggable, droppable 메소드 / [12:26] 드롭옵션 / [12:57] 드래그요소 추가 / [13:33] .alzioDrag / [14:37] accept 옵션 / [15:11] accept: "#alzioDrag1" / [16:03] 적용값확인 / [16:26] activeClass 옵션 / [17:01] .active / [17:26] 적용값확인 / [19:28] accept 옵션삭제 / [20:55] accept: drag / [21:35] 삼항연산자 / [23:19] 적용값확인 / [24:10] 기본기능구현 / [24:37] hoverClass 옵션 / [25:52] .over / [26:54] tolerance 옵션 / [27:30] tolerance 옵션값 / [29:41] alzio21.html / [30:26] 실습완성작 / [31:01] html구성 / [32:02] #drop_a_container, #drop_b_container, #drag_a_container, #drag_b_container / [33:21] .drag_a, .drag_b / [33:57] .drag_b / [35:45] droppable, draggable 구현 / [37:19] dropOption_a, dragOption_a 생성 / [37:36] scope: "a" / [38:36] 적용값확인 / [38:50] hoverClass: "over" / [40:33] scope: "b" / [41:17] 적용값확인 / [42:53] dropOption_a 삭제 / [43:18] 적용값확인

17 드롭 이벤트, 드래그앤드롭 게임 제작

드롭이벤트에 대해 알아보고, 드래그앤드롭 게임을 제작하며 완벽하게 이해합니다.

37분

책갈피 : [00:25] 드롭 이벤트 / [01:05] HTML구성 / [01:38] CSS정의 / [02:07] 적용값확인 / [02:30] droppable, draggable 적용 / [02:57] accept: "#alzioDrag" / [03:21] 이벤트구현 / [04:39] eventMessages 정의 / [05:40] function Callback / [06:56] empty() / [07:11] 적용값확인 / [08:44] drop 이벤트의 구현 / [10:07] deactivate이벤트 삭제 / [10:40] HTML구성 / [11:54] CSS정의 / [13:27] droppable, draggable 적용 / [13:50] drop: Callback / [14:09] function Callback / [15:29] 적용값확인 / [16:23] 이벤트 중복적용 / [17:01] greedy: true / [17:57] 드래그&드롭 게임 / [19:24] HTML구성 / [20:48] alziodrag.css / [21:25] #maze / [21:55] #start, #end / [22:22] #drag / [23:25] .wall / [25:03] droppable, draggable 적용 / [25:23] 적용값확인 / [25:53] for (var x=1; x<47; x++) / [27:49] 생성될 벽 구조 / [28:13] 적용값확인 / [28:33] $(".wall").droppable / [29:35] containment: "#maze" / [30:30] endOption / [31:15] 적용값확인 / [31:40] alert 생성 / [32:26] wallOption / [33:03] over 이벤트 / [33:36] 적용값확인 / [34:06] 드래그요소 div 재생성 / [35:05] 적용값확인 / [35:39] left: 15

18 resize 인터렉션, 크기조절기능

크기를 조절할 수 있는 resize 기능에 대해 알아봅니다.

40분

책갈피 : [00:12] resize / [01:20] HTML구성 / [01:42] CSS정의 / [02:12] $("#resize").resizable / [05:03] .ui-resizable-xx / [05:58] 크기조절 옵션 / [06:43] handles 옵션 / [07:45] handles 옵션가능값 / [09:32] 핸들이미지생성 / [10:33] .ui-resizable-sw / [11:45] 적용값확인 / [12:22] autoHide 옵션 / [13:36] maxWidth, minWidth 옵션 / [14:48] p 요소 추가 / [15:53] overflow:hidden / [16:33] ghost 옵션 / [17:28] background:#FFCC66 / [18:24] helper 옵션 / [19:14] .myhelper / [20:17] HTML구성 / [21:03] 적용값확인 / [21:51] aspectRatio 옵션 / [23:00] aspectRatio:1 / [23:33] animate 옵션 / [25:24] ghost 옵션 / [25:58] animateDuration 옵션 / [26:32] img id="resize2" / [27:27] alsoResize 옵션 / [28:01] 적용값확인 / [28:18] img id="resize3" / [29:34] 크기조절 이벤트 / [30:56] stop: NewSize / [31:20] function NewSize / [32:06] Math.round / [33:23] div생성 / [34:27] 적용값확인 / [35:12] $(".text").empty / [35:54] .text / [36:32] 적용값확인 / [36:56] 탭위젯과 결합 / [37:28] div id="alzioTab" / [38:05] #alzioTab / [39:13] autoHide, minHeight, minWidth

19 select 인터렉션, 선택기능 이미지뷰어

아이템을 선택할 수 있는 select 기능에 대해 알아보고, 선택기능이 부여된 이미지 뷰어를 제작합니다.

59분

책갈피 : [00:10] 선택기능 / [01:28] HTML구성 / [02:16] CSS정의 / [02:31] selectable 메소드 / [04:06] 자동생성 클래스 / [04:54] .ui-selecting, .ui-selected / [07:01] 선택 기능 옵션 / [07:24] filter 옵션 / [08:15] select 클래스추가 / [09:17] cancel 옵션 / [10:31] 선택 기능 이벤트 / [11:36] selected 이벤트 / [13:08] 적용값확인 / [13:57] unselected 이벤트 / [14:47] 적용값확인 / [16:04] start 이벤트 / [16:47] if (!$("#tip").length) / [17:17] class / [18:36] fadeIn() / [18:45] 적용값확인 / [19:48] stop 이벤트 / [20:43] 적용값확인 / [21:29] 선택 기능 메소드 / [21:54] refresh 메소드 / [22:36] HTML구성 / [23:07] CSS정의 / [23:43] $("#ALL").selectable / [24:03] 적용값확인 / [24:16] $("#ALL div").draggable / [24:57] autoRefresh: false / [25:51] 적용값확인 / [27:50] 선택기능 이미지뷰어 / [29:20] HTML구성 / [30:20] 적용값확인 / [31:26] alzioselect.css / [31:43] #imageView / [32:16] #name / [33:41] #view / [34:44] #image / [35:17] #image img / [36:12] #image img.right / [36:39] #image img.ui-selected / [38:07] #tabs / [38:35] $("#image").selectable / [39:39] stop 이벤트 / [40:36] 적용값확인 / [40:56] 이미지 틀 재구성 / [41:47] 적용값확인 / [42:07] 선택방법정의 / [43:33] function select1() / [44:29] 상단 name 재구성 / [46:11] 뷰어이미지 재구성 / [47:45] 적용값확인 / [48:23] function select2() / [49:00] var tabList / [49:36] 탭 기본구성 / [51:20] each 함수 설정 / [52:29] var tabA / [54:06] var tabPanel / [54:32] 탭패널내부 뷰어이미지 구성 / [56:05] $("#view").appendTo("#tabs"); / [56:29] $("#tabs").tabs / [57:54] 적용값확인

20 sort 인터렉션, 정렬기능

요소를 정렬시킬 수 있는 sort 기능에 대해 알아보고 실습합니다.

39분

책갈피 : [00:17] 정렬기능 / [00:51] HTML구성 / [01:30] 적용값확인 / [01:43] CSS정의 / [02:13] sortable 메소드 / [03:52] 정렬기능 옵션 / [04:16] axis 옵션 / [05:17] containment 옵션 / [05:32] div id="container" / [05:56] 적용값확인 / [06:24] cursor 옵션 / [07:19] distance 옵션 / [08:52] items 옵션 / [10:03] items: ".sort" / [11:31] items: ":not(.unsort)" / [12:03] 적용값확인 / [12:16] span 추가 / [13:10] #alzioSort span / [13:37] revert 옵션 / [14:54] handle 옵션 / [16:09] placeholder 옵션 / [18:07] .place / [18:30] 적용값확인 / [19:13] forcePlaceholderSize / [20:04] helper 옵션 / [21:05] helper: helperOption / [22:23] 적용값확인 / [22:53] alzio31.html / [23:02] 연결 리스트의 정렬 / [23:26] HTML구성 / [23:50] 적용값확인 / [24:13] $("#alzioSort1, #alzioSort2").sortable / [25:08] connectWith 옵션 / [26:20] 적용값확인 / [26:54] connectWith: ("#alzioSort1") / [27:45] 정렬기능 이벤트 / [28:59] start 이벤트 / [29:38] 적용값확인 / [30:14] stop 이벤트 / [30:40] 적용값확인 / [31:43] beforeStop, receive 이벤트 / [33:07] var position / [33:15] var Message / [34:30] $("#text").remove() / [37:42] 적용값확인

샘플확인 : 알지오 검색후 -> 강의검색란 -> jquery ui