탭메뉴 1-1

이벤트 위임을 이용한 탭메뉴 1 - 1 이벤트 위임을 이용한 탭메뉴 1-1 이벤트 위임을 이용한 탭메뉴 Tab 1 Tab 2 Tab 3 Lorem ipsum 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet commodi cupiditate molestias laboriosam sit! Delectus magni esse magnam libero Lorem list 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Yolo 3 Pellentesque h..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2019. 11. 18.
• textsms

jQuery 그래프 [graph] - 수치 적용

그래프 [graph] - 수치를 그래프에 대입 이것이 딱히 그래프라고 하기엔 조금... 뭔가 적당한 용어라던지 그런것이 생각이 안나서 그냥 그래프로 이름을 정하는 걸로.. 일단 구조는 간단합니다. 우선 저는 퍼블리셔이니까 제가 하고자 했던 부분은 그래프우측에 위치하고 있는 수치 아마 이 부분은 "개발자"분들이 값을 던저 주겠죠...? 아닐까나? 아님 뭐 .. 어쩔수 없고 .. 하여 우측에 텍스트의 값을 받아서 그래프[도표] 안에 대입을 시켜줍니다. 하단의 이미지를 참고해주세요. 사용 연차 30% 사용가능 연차 70% .present-area {margin:0 auto; background:#fff; border-radius: 1rem; box-sizing: border-box} .present-area ..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2019. 8. 23.
• textsms

jQuery 수 더하기

jQuery 수 더하기 토탈 수 올려주기 예를들면 음식점이나 영화 티켓 예매등 예약시 성인, 청소년, 어린이등의 인원수를 체크하여 토탈 값을 내려준다. 기타 다른용도로 사용을 해야 한다면 타이틀만 변경 하고 사용 해도 된다. 결과 화면은 다음과 같다. 빼기 0 더하기 빼기 0 더하기 빼기 0 더하기 Total = 0 // 인원 체크 토탈 function countBtn(){ var $wrap = $('.totalFn'), $btnMinus = $wrap.find('.minus'), $btnPlus = $wrap.find('.plus'); $cell = $wrap.find('.cell'); $btnMinus.on('click', function(e){ var $this = $(this); var num =..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2019. 2. 13.
• textsms

jQuery infinite scroll 무한스크롤

제이쿼리 무한스크롤 infiniteScroll 얼마전 컴퓨터를 포멧 이후 아직 포토샵을 설치 하기 전이라.. 이미지는 대충 웹에서 사용하는 포토샵으로 대처.. 나름 쓸만한듯... https://pixlr.com/editor/ 를 클릭하면 이동 스크롤을 내릴때 마다 객체가 생성되는 제이쿼리 무한스크롤 infinite Scroll 이라고도 하고.. 일단 처음 만들어봤는데 여기저기 돌아다니는 소스도 많고... 크게 어렵거나 한것 같지는 않았는데.. 그냥 내 입맛에 맞게 만들어보았다. * {margin:0; padding:0; list-style: none;} .infiniteScroll {border:1px solid #ccc; width:200px; font-size:0;} .infiniteScroll im..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2019. 2. 7.
• textsms

jQuery 이미지 갤러리

jQuery image Gallery jQuery 를 이용한 이미지 갤러리 일단 디자인은 없이 그냥 내키는대로 했다.CSS는 알아서 입히시길 바랍니다.(살짝 디자인을 할것을 그랬나...) 이전 다음 * {margin:0; padding:0; list-style: none;} .slider-wrap {margin:100px auto; width:600px; border:1px solid #ccc;} /* 이미지 */ .img-box {width:400px; margin:20px auto; height:250px; overflow:hidden; font-size:0; border:2px solid orchid;} .img-box img {width:100%; height:100%;} /* 버튼 */ .sma..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2018. 12. 20.
• textsms

setInterval 타이머

setInterval를 이용한 카운트 다운 setInterval을 이용한 카운트 다운은행이나 어떤 특정 사이트에 로그인 이후, 혹은 휴대폰 인증을 받을때 사용이 되는 타이머    // 카운트 다운 var num = 60 * 3; // 몇분을 설정할지의 대한 변수 선언 var myVar; function time(){ myVar = setInterval(alertFunc, 1000); } time(); function alertFunc() { var min = num / 60; min = Math.floor(min); var sec = num - (60 * min); console.log(mi..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2018. 12. 9.
• textsms