반응형

Web/jquery 29

jquery 이벤트가 익스플로러(ie)에서 실행 안될 때 해결방법

분명 크롬에서는 잘 작동되는 게 익스플로러에서는 작동이 안 할 때가 많죠,, html이나 css같은 경우 익스에서 따로 처리해줘야 되는 게 많아서 항상 작업할 때 신경 써줘야 하죠! 보안 문제 때문에 전 세계적으로 ie를 사용하지 않는 추세이지만 우리나라 점유율은 아직도 높아요.. 얼른 ie가 사라졌으면 좋겠네요 :> 아무튼 본론으로! 익스에서만 JQUERY 이벤트가 안 되는 경험은 처음이라,, 많이 구글에 찾아보고 적용해봤는데 무슨 수를 써도 안되길래 좌절했는데,, 방법은 간단했습니다! swiper slider를 적용한 웹페이지였는데 이게 문제였어요! 최신 버전의 swiper slider는 ie를 지원하지 않아서 생긴 오류였습니다 :) 버전을 4.5.0으로 바꿔주니까 문제없이 실행됩니다! 이제 ie를 ..

Web/jquery 2021.03.30

[JQUERY] slick slider 이미지 슬라이드 플러그인 설치 및 사용법

개인적으로 가장 잘되있다고 생각하는 이미지 슬라이드 플러그인입니다. 플러그인 자체에 사용 예제도 많고 사용법도 간단해서 자주 사용합니다. 또한 반응형까지 지원해줍니다. 우선 kenwheeler.github.io/slick/ 사이트에 가서 플러그인을 다운 받습니다. 상단 메뉴의 get it now > 다운로드에서 다운로드받으시면 됩니다. 01. 추가 사용방법은 가장 먼저, jqurey와 js, css를 추가해줍니다. 혹은 설치하지 않고 사용할때에는 아래 소스를 이용하여 추가해줍니다. CSS JS 그 다음 html에 div이나 ul을 사용하여 마크업해줍니다. 이미지1 이미지2 이미지3 그 다음에는 js를 추가해줍니다. 아래항목은 기본적인 코드입니다 :) $('.slick').slick(); 다음은 slick..

Web/jquery 2021.03.29

웹접근성을 준수한 탭메뉴 jquery

구글에서 치면 바로나오는 소스인데, 웹접근성마크를 획득할 때 참조했던 탭메뉴 소스입니다. 기존의 탭메뉴와 구조가 약간 다른데, 웹접근성 마크가 필요한 프로젝트가 아니여도 사용해도 좋을것 같아서 공유합니다 :) [html] 공지사항 › 이것은 첫 번째 탭의 공지사항 목록 입니다. 2010.12.24 › 이것은 첫 번째 탭의 공지사항 목록 입니다. 2010.12.24 › 이것은 첫 번째 탭의 공지사항 목록 입니다. 2010.12.24 › 공지사항 더보기 보도자료 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › 이것은 두 번째 탭의 보도자료 목록 입니다..

Web/jquery 2021.03.28

탭메뉴 여러개 사용하는 방법

탭메뉴가 한페이지당 여러개가 사용되는 경우가 있다. 그때 클래스를 달리하여 하는 방법도 있지만, 유지보수나 운영측면에서 좋지않은 코드이기 때문에, rel값을 이용해 여러개를 사용하는 방법을 알아보겠다. See the Pen abpNGgW by aldo814 (@aldo814) on CodePen. 상단과 같이 탭메뉴가 되는 영역에 rel값을 주고, 해당 탭메뉴에 id값을 동일하게 해주면 간단하게 페이지내 여러 탭메뉴를 사용할 수 있다.

Web/jquery 2021.03.27

탭메뉴, 레이어 팝업안에 슬라이드 넣기 (slick slider)

팝업 안에 탭 메뉴 안에 슬라이드가 들어가는 작업을 했는데,, 팝업, 탭메뉴 누를 때마다 슬라이드 깨지는 현상 ,,ㅠ 아무리 찾아봐도 해결책을 못 찾다가 드디어 해결! $('.slideshow_container').slick({ arrow: true, slidesToShow: 1, setPosition: 0, //깨짐 방지 infinite:false, }); 슬라이드에 setPosition:0 항목을 넣어준 후, function openModal(modalname) { $('.slideshow_container').resize() // 팝업 열때 슬라이드 깨짐 방지 $('.slideshow_container').slick('refresh'); // 팝업 열때 슬라이드 깨짐 방지 }..

Web/jquery 2021.03.27

[jQuery UI] Datepicker / 날짜 선택, 달력선택기 사용법 및 옵션

오늘은 jquery ui의 datepicker 사용법에 대해 알려드리겠습니다. 1. 가장 먼저 head에 링크를 넣어줍니다. 다운로드하여서 적용할 경우에는 (https://jqueryui.com/download/)로 가서 다운로드하시면 됩니다. 2. datepicker가 될 input을 작성해 줍니다. 3. $(function() { $( "#Date" ).datepicker({ }); }); 가장 기본의 스크립트를 추가해줍니다. 해당 input의 id 혹은 class를 작성하면 됩니다. 실행화면 datepicker 옵션 $("#Date").datepicker({ showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다. buttonImage: "/application/db/jquer..

Web/jquery 2020.02.24

다른 도메인 iframe 높이 자동 조절

A 사이트에서 B사이트의 내용을 iframe으로 불러올 때, 자동으로 iframe 높이를 조절하게 해주는 스크립트입니다. A사이트 html js //browser compatibility: get method for event // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8) var myEventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; // create event listener var myEventListener = window[myEventMethod]; // browser compatibility: attach event uses onmessa..

Web/jquery 2020.02.05

[jqurey]크롬 개발자모드에서 제이쿼리(jQuery) 사용하는 방법

[웹 개발 종사자라면 너무나 유용한 크롬의 개발자 모드! 개발자 모드로 css와 html 자바스크립트는 손쉽게 적용되는데, 자바스크립트보단 제이쿼리가 더 익숙해서 개발자 모드에서 제이쿼리를 사용하는 방법을 찾아보다가 찾아낸 소스! (출처 : kmyh.kr) 사용법은 아주 간단합니다. 아래의 소스를 개발자 콘솔에 입력해주기만 하면 끝이에용 var jq = document.createElement('script'); jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); // ... give time for script to load, the..

Web/jquery 2019.09.17
반응형
Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]