공부/JS , HTML , CSS (5) 썸네일형 리스트형 [javascript/jqeury] 세로메뉴, 메뉴 클릭시 서브메뉴 열기 1. html 코드 menu1 submenu1 submenu2 submenu3 menu2 submenu1 submenu2 submenu3 menu3 submenu1 submenu2 submenu3 div 태그 안에 3개의 menu를 만들고 그안에 또 3개의 submenu를 만들었다 2. JS 코드 $("li").click(function () { if ($(this).hasClass("active")) { $(this).children().css("display", "none"); $(this).removeClass(); } else { $(this).addClass("active"); $(this).children().css("display", "block"); } }); hasClass()함수를 사용.. [javascript] table tr 복사(clone()), tr의 td삭제하기, 버튼 클릭 시 테이블 합치기(rowspan), 삭제버튼, class 이름바꿔서 추가하기 클릭해서 실행해 보세요 - 옵션추가 : 옵션 목록 추가 - 항목추가 : 옵션칸의 크기 늘려 항목 줄 추가 (옵션 rowspan) - 삭제 : 항목 삭제 (rowspan된 칸을 유지하면서 항목 줄만 삭제하기) 옵션명 항목명 필수항목 가격 재고 옵션추가 개발 순서 1) 옵션을 추가할 때마다 늘어나는 행이름을 다르게 하여 추가하였다 2) 항목을 추가할 때는 기존의 행과 이름이 같게 해주기 위해 기존 행을 기능을 포함해 복사clone(true)하고 복사된 행의 첫 번째 열을 삭제하였다 3) rowspanNum 함수는 옵션의 rowspan할 열 수를 지정해준다 html code 옵션명 항목명 필수항목 가격 재고 옵션추가 javascript code 전체 코드 옵션명 항목명 필수항목 가격 재고 옵션추가 [javascript] select 옵션 선택마다 다른 사진 출력 1. 이미지 경로를 배열로 두고 한 방법 펜션예약사항 비수기 세일입니다. 펜션의 모든 방을 10만원에 단, 모든 방은 2인용입니다.!! 객실명 : 루비 에메랄드 스카이1호 별님실 바베큐시설이용 : 이불추가 : 인원수 : 금액 : 부과세 : 총금액 : 2. 이미지 이름 자체를 this로 받아서 이미지를 바꿀 수 있도록 함 펜션예약사항 비수기 세일입니다. 펜션의 모든 방을 10만원에 단, 모든 방은 2인용입니다.!! 객실명 : 방선택 루비 에메랄드 스카이1호 별님실 바베큐시설이용 : 이불추가 : 인원수 : 금액 : 부과세 : 총금액 : 수정된 부분이 보이시나요?? 2번 방법이 확실히 깔끔하고 편한 방법인 것 같요 실용적이고! 1번 방법에선 event구문도 html이랑 script에 섞여있어서 아무래도 보기 .. [javascript] 사칙연산 계산기 만들기 ( javascript calculator) 계산기 활용 예 완성된 계산기 입니다 사용해 보세요 전체 코드 계산기 활용 예 디자인을 전혀 신경 안쓰고 만들었더니 결과물이 보기가 안좋네요 ㅎㅎㅎ 꽤나 오랜 시간 걸려 만든 계산기 ㅜㅜ switch 반복문을 활용해 구현해 보았습니다 [javascript, jquery] 달력 만들기 (윤년적용, 오늘 날짜 표시, 이전달 다음달 버튼 구현) 자바스크립트, 제이쿼리 활용하여 달력 만들기 윤년 적용 오늘 날짜 색 다르게 이전달, 다음달 버튼 구현하기 html code 일 월 화 수 목 금 토 javascript code css code 전체 코드 일 월 화 수 목 금 토 공부하기 시작한 초반엔 만들지도 못했던 달력,,,, 그 떄 한 삼 일 동안 만들다가 포기했었다 ㅎㅎ 공부하기 두 달차 제이쿼리를 활용해 만들었더니 손쉽게(?) 완성 그래도 반나절 걸리긴 했지만 그래도 했다는 것에 다행으로 생각하며 뿌듯하게 마무리! 이전 1 다음
