종이 한장 차이...

보통 텝기능을 만들 때 1번, 2번, 3번 같이 미리 정해진 텝과 해당 텝의 콘텐츠를 같은 화면에 다 작성해 두고 선택한 텝 만 보여주고 나머진 숨기는 방식을 많이 사용한다. 하지만 텝이 많아지고 텝내의 콘텐츠가 많아지면 화면로딩 시 부하가 발생할 수밖에 없다. 화면로딩 부하를 조금이라도 줄여 보겠다는 생각으로 텝을 클릭 시 ajax로 데이터를 호출하고 해당 데이터를 사용하여 동적으로 텝내의 콘텐츠를 append 하는 방식으로 구현을 하려다 좀 더 쉽고 심플한 방법이 없을까 알아보니 다음과 같은 기능이 있어 정리한다. 해당 기능은 jquery의. tabs과. load 기능을 사용해 텝을 클릭 시 해당 텝의 href에 명시된 url을 호출하여 해당 텝의 콘텐츠에 바로 보여주는 방식의 기능이다. #출처: h..

modal popup 창을 print 해야 하는 경우 참고. 현재창에서 프린트 미리 보기가 출력되도록 할 경우 프린트 후 또는 프린트 미리 보기 취소 후 UI상의 버튼들의 click 이벤트가 사라지는 현상이 발생하여, 새로운 Tab 창에서 프린트 미리 보기가 열리도록 수정을 하여 문제를 해결했다. HTML 삽입 미리보기할 수 없는 소스

기존 swiper 슬라이더는 콘텐츠를 2개씩 보여주고 1개씩 이동시킬 경우 총 콘텐츠 수가 3개이면 루프가 동작을 안 하는 버그(?)가 있었다. 총콘텐츠의 수가 홀수일 때만 루프가 안 먹히는 건가 했는데 또 그건 아니었다 5개부터는 또 잘 돈다... 암튼 그래서 좀 더 잘 동작하는 slick-slider라는 플러그인을 찾아서 테스트해 본 걸 정리해 본다. HTML 삽입 미리보기할 수 없는 소스

브라우저 자체에서 제공되는 alert(), confirm() 대신 jquery를 활용한 LayerPopUp으로 처리하기. 알림 확인 알림 확인 취소 알림

# +,- 버튼에 의한 jquery progressbar 예제. 예를 들어 특정 숫자까지 합을 구하는 데 있어 버튼 클릭 시 합의 기준값까지의 계산 상태를 가시화 할 때 사용. - + # 결과 화면:

업무 공백 중 머리를 놀리기 싫어서 간단하게 실무에서 종종 사용하는 기능을 정리도 할 겸 연습해 보았다... 상단의 라디오 버튼에 의해 다중 리스트의 체크박스를 컨트롤 하는 방법이다. -결과 화면: https://graykang.w3spaces.com/chkbox-select-by-radio-button.html JS Bin graykang.w3spaces.com - html 소스 parent와 children 체크박스 소스에 data 속성 값으로 parent 와 children 간의 연간 관계 값이 세팅되어있고 children 체크 박스는 2종류로 구분 되는 값을 data 속성 값으로 추가로 가지고 있다. parent와 children 간의 연관 관계 및 상단의 라디오 버튼 클릭에 해당되는 parent..