퍼블리셔/jquery14 swiper 우측 걸치는 슬라이드 가끔 쓰다보니 맨날 고민하는 우측에 살짝 걸쳐지는 슬라이드 만들기 slidesPerView : 'auto' 로 설정하고 .swiper-slide{width:40%} 도움이 되셨다면 ❤ 한번만 부탁드립니다. 요즘 도통 일에 보람이 없어서요 주륵 누군가에게 도움이 되었다는 것을 확인받고 싶네요 🙏 2022. 4. 18. 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. 하나의 요소에 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. input[type="file] custom 파일선택 .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .filebox label { display: inline-block; text-align: center; width: 90px; height: 30px; line-height: 30px; background-color: #777; border: none; font-size: 12px; color: #fff; } .filebox .upload-name { display: inline-block; padding: .5em .. 2020. 9. 25. input[type="text"] 숫자만 입력 $("input[type='text']").on("keyup", function() { $(this).val($(this).val().replace(/[^0-9]/g,"")); //다음 input 이동 if (this.value.length == this.maxLength) { $(this).next('input[type="text"]').focus(); } }); 2020. 4. 6. attr과 mouseenter/mouseleave/click 같이 쓰기 attr을 mouseenter/mouseleave/click으로 변경하기 var tabIdx = ''; $('.tab_wrap li').on({ mouseenter:function(){ $(this).children('img').attr('src', $(this).children('img').attr('src').replace('_off', '_on')) }, mouseleave:function(){ $('.tab_wrap li').each(function(){ $(this).children('img').attr('src', $(this).children('img').attr('src').replace('_on', '_off')); }); $('.tab_wrap li:eq('+tabIdx+')').chi.. 2019. 12. 12. animate 다중클릭/중복클릭/다클릭 방지 animate 동작하는 동안 클릭 방지 if($this.is(':animated') == false){ //animate() } 2019. 11. 14. 이전 1 2 다음
