본문 바로가기

jQuery

Study/ETC 2019. 1. 8. [개발이슈]bxSlider height 0 이슈 bxSlider height 0 이슈 이번 포스팅은 내가 개발을 하면서 겪었던 이슈에 대해 소개할 것 이다. jsFiddle 오류가 있는 것 같아 아래 소스를 첨부 시켜 놓았다. 소스코드 바로가기 codePen 으로 변경하였다. 문제 bxSlider 라는 슬라이더 라이브러리를 쓰던 중 특정 슬라이더의 height 가 0으로 설정되는 것을 확인하였다. See the Pen dayGBX by PAPICO (@joseongryun) on CodePen. 원인 $(selector).bxSlider({}); 로 생성한 슬라이더는 display:none;을 하면 height가 0이 된다. 해결 방법 탭을 변경할때 마다 해당 slider 를 다시 reload 해서 그려야 한다. slider.reloadSlider()..
Side Project 2018. 10. 21. [PROJECT] jQuery-UI를 이용한 Trello clone project (6) 마무리 [PROJECT] jQuery-UI를 이용한 Trello clone project (6) 마무리 jQuery-UI를 이용한 Trello clone project (6) - 마무리 지난 시간에 지난 시간까지 Trello 클론 프로젝트를 해 보았다. 이번 시간에는 앞으로 개선할 점을 생각해보자. 끝 (개선할 점) 개선할 점 Datebase 연결 다른 트렐로 기능 구현 설정을 통한 테마 변경 다른 프레임 워크 적용 ( vue, react ) 더 개선해야 할 점이 있다면 댓글로 적어주세요...... 다음 시간에 이번 차시가 마지막.
Side Project 2018. 10. 21. [PROJECT] jQuery-UI를 이용한 Trello clone project (5) jQuery UI 스크립트 작성 jQuery-UI를 이용한 Trello clone project (5) jQuery UI 스크립트 작성 지난 시간에 DOM을 제어하는 스크립트를 작성해 보았다. 이번 시간에는 jQuery UI 를 이용하여 엘리먼트들을 이동 및 정렬해 보겠다. jQuery UI 스크립트 작성 굉장히 간단하다. 생각하여야 할 것은 두가지이다. 리스트간의 정렬 및 이동 리스트간의 카드 이동 이제 하나하나씩 해결해 보자 리스트간의 정렬 및 이동 $("#listWrap").sortable({ placeholder: "list-placeholder", handle: ".listTitleWrap", }); placeholder 속성은 해당 엘리먼트가 놓일 자리에 마크가 생기는 것인데 밑에서 설명하겠다. handle속성은 해당 엘리먼..
Side Project 2018. 10. 16. [PROJECT] jQuery-UI를 이용한 Trello clone project (4) Trello 웹 스크립트 작성 [PROJECT] jQuery-UI를 이용한 Trello clone project (4) Trello 웹 스크립트 작성 jQuery-UI를 이용한 Trello clone project (4) - 웹 스크립트 작성 지난 시간에 스타일을 입혀서 UI 작업을 마무리 했다. 이번 시간에는 수정이나 추가등에 필요한 스크립트를 작성해 보자. 스크립트 작성 지난 시간에 기능을 명세했던 사진이 있었다. 순서대로 기능을 구현해 보자 project name 관련 스크립트 우선 프로젝트 네임을 더블 클릭 하면 수정할 수 있는 폼이 나온다. 그리고 수정을 다하고 enter 를 누르면 프로젝트 네임이 변경 된다. $(document).ready(function () { var pjTitle = $("#title"); var p..
Side Project 2018. 10. 16. [PROJECT] jQuery-UI를 이용한 Trello clone project (3) Trello 웹 스타일 입히기 [PROJECT] jQuery-UI를 이용한 Trello clone project (3) Trello 웹 스타일 입히기 jQuery-UI를 이용한 Trello clone project (3) - 웹 스타일 입히기 지난 시간에 Trello 클론 프로젝트의 html 업을 작성해 보았다. 오늘은 퍼블리싱의 꽃인 스타일 입히기를 해보자. Style 입히기 이번에는 scss 를 사용한다. 하지만 내가 scss 를 잘 모르고 사용한 것을 프로젝트를 완성한 다음에야 깨달았다. 그래서 물론 사용은 해보겠지만 이번 프로젝트와 같이 사용하는 것은 추천하지 않는다. 다음 프로젝트에서는 좀더 체계적으로 사용하는 모습을 보여주겠다. 자 그럼 스타일을 입혀보자. 저번 첫 차시에서 sass --watch scss/style.scs..
Side Project 2018. 10. 11. [PROJECT] jQuery-UI를 이용한 Trello clone project (2) - 웹 마크업 작성 [PROJECT] jQuery-UI를 이용한 Trello clone project (2) Trello 웹 퍼블리싱 jQuery-UI를 이용한 Trello clone project (2) - 웹 마크업 작성 지난 시간에 설계와 기획을 했다. 오늘은 지난번에 나온 디자인을 가지고 마크업을 작성해보자. mark up 작성 정말 심플하게 갈 것 이다. 기존 Trello 는 수정같은 것을 할때는 수정 버튼을 누르고 카드의 상세 보기 모달을 띄우는 일과 같은 복잡한 동작은 모두 없애고 jQuery UI 를 이용해 아주 간단하게 작성해보겠다. 아래 그림은 기능을 명세한 것이다. 전체 코드 PAPICO Trello Project test list test test1 test2 test3 + Add another car..
Side Project 2018. 10. 8. [PROJECT] jQuery-UI를 이용한 Trello clone project (1) - 설계 및 기획 [PROJECT] jQuery-UI를 이용한 Trello clone project (1) 설계 및 기획 jQuery-UI를 이용한 Trello clone project (1) - 설계 및 기획 jQuery-UI 를 이용하여 Trello를 만들어 보자. 기본적으로 준비해야 할 것 jQuery-UI 선행 학습 이번에 사용할 옵션들을 지난 시간에 정리해 두었다. https://pa-pico.tistory.com/12 프로젝트 셋팅 clone_trello |- index.html |- css ||- style.css | |- scss ||- style.scss | |- js |- jquery-ui.min.js |- jquery-3.3.1.min.js |- script.js scss 사용 설치 방법은 다른 블로그..
Study/ETC 2018. 10. 8. [개념잡기] jQuery-UI jQuery-ui jquery 의 기반의 사용자 인터페이스를 좀 더 쉽게 만들 수 있게 도와준다. 시작하기전에 선행 준비jQuery-ui 다운로드 ( https://code.jquery.com/ui/1.12.1/jquery-ui.min.js ) jQuery 다운로드 ( https://code.jquery.com/jquery-3.3.1.min.js ) 파일 구조 # jqeryui-pratice - index.html - js -- jquery-3.3.1.min.js -- jquery-ui.min.js index.html Interaction 총 5가지의 Interaction 이 있다. Draggable Droppable Resizable Selectable Sortable 이 중에서 다음 프로젝트 ( Tr..

티스토리툴바