jquery12 custom select trigger css로 해결 기본 select style을 못견디는 디자이너를 위해 평소에는 ul과 li로 select의 멋을 지켜왔지만 등록 폼과 같은 엄청난 select의 향연인 페이지에선 부득이하게 기본 select와 option을 사용해야 할 때가 있다. 이럴 경우 select에서라도 최선을 다했음을 어필하기 위해 성별 남 여 .selectInputDiv:after{ content:''; display: inline-block; width: 10px; height: 10px; border-right: 2px solid #CECECE; border-bottom: 2px solid #CECECE; transform: rotate(45deg); position: absolute; top: 13px; right: 17px; } :a.. 2023. 11. 14. class를 활용해 popup 여러개 컨트롤하기 코드를 짜다보면 팝업을 한 페이지 안에서 여러개를 운용해야 하는 경우가 생긴다. 팝업 버튼과 팝업창을 공통 클래스와 팝업별 클래스 2개를 사용해 각각의 버튼과 팝업을 짝지어보자. hellow 팝업을 여는 button bye 팝업을 여는 button $(function(){ var btnClass=""; var popClass=""; $('.popBtn').on('click', function(){ btnClass = $(this).attr('class'); popClass = btnClass.split(/\s+/); $('.popWrap.'+popClass[1]).show(); $('.html, body').css('overflow', 'hidden'); }) $('.popX').on('click', f.. 2022. 1. 27. 이미지 파일 업로드/프리뷰/삭제/드래그로 위치변경 밍구몬님의 코드 활용 ming9mon.tistory.com/94 jQuery 파일 업로드 미리보기(preview) 이 예제에서는 multiple 속성을 이용하였다. multiple 속성은 한번에 파일을 여러개 올릴 수 있도록 해주는 속성이다. multiple 속성은 크롬은 6.0 이상 IE는 10.0 이상부터 지원한다고 한다. ming9mon.tistory.com html + css(filebox는 글 참고) .inputFile, #Preview, #Preview li{ float:left } .inputFile{ margin-bottom: 10px; } .addImgBtn{ width: 80px !important; height: 80px !important; line-height: 71px !impo.. 2021. 5. 12. checkbox 전체선택/해제 체크박스 전체선택/해제 개별 체크박스 선택 시, check all 해제 var chkBox = $('input[name=Member]'); var checked = ''; $('#ChkAll').on('click', function(){ if($(this).prop('checked')){ chkBox.prop('checked', true); }else{ chkBox.prop('checked', false); } }) chkBox.on('change', function(){ checked = $('input[name=Member]:checked').length; if(chkBox.length == checked){ $('#ChkAll').prop('checked', true); }else{ $('#ChkA.. 2021. 5. 11. 하나의 요소에 removeClass와 toggleClass 사용하기 select 모양의 div menu 작업 시 사용 select를 클릭하면 해당 옵션 외 다른 옵션창 닫힘 해당 select 한번 더 클릭하면 해당 옵션도 닫힘 not($(this))로 제어가능 $('.on').on('click, touchstart', function(){ $('.on').not($(this)).removeClass('on'); $(this).toggleClass('on') }) 2020. 12. 3. touchmove로 touchstart 제어하기 스크롤(touchmove)과 클릭(touchstart)의 구분을 할 때 유용한 코드 특히 상세검색 모바일 작업 시 꼭 필요. var touchmove; $('#on').find('li').on({//터치대상 touchend:function(){ if(touchmove != true){ //touch시 액션 } }, touchmove:function(){ touchmove = true }, touchstart:function(){ touchmove = false } }) 2020. 12. 3. animate 다중클릭/중복클릭/다클릭 방지 animate 동작하는 동안 클릭 방지 if($this.is(':animated') == false){ //animate() } 2019. 11. 14. <a href="#id">로 이동 부드럽게 하기 $('a').on('click', function(e){ e.preventDefault(); $('html, body').animate({scrollTop:$(this.hash).offset().top}, 500) }) 도움이 되셨다면 ❤ 한번만 부탁드립니다. 요즘 도통 일에 보람이 없어서요 주륵 누군가에게 도움이 되었다는 것을 확인받고 싶네요 🙏 2019. 11. 12. :empty 사용하기 DB로 내용을 뿌리다보면 동일한 위치에 내용이 들어가는 것과 들어가지 않는 것이 발생. 대상(#on)이 빈 것이 있다면(:empty) 보이지 않게(display:none) if ($('#on:empty')) { $('#on:empty').css({ display: 'none' }); } 2019. 10. 22. 이전 1 2 다음
