본문 바로가기

웹관련/Jquery plugin6

[Jquery] Bx Slider 옵션 Bx슬라이더는 무료슬라이더중 정말로 자주사용하는 슬라이더중 하나입니다. 옵션도 풍부하여 커스터마이징을 하여 사용하면 정말 많은 작업들을 할수 있습니다. 그런데 문제는 Bx슬라이드 홈페이지가 언제 리뉴얼이 될지 모르고,리뉴얼시 기존에 테스트문서라든지, api 문서가 남아 있을지 알수가 없습니다. 얼마전 bxslider 홈페이지가 리뉴얼이 되면서 기존 예제들이 전부 사라졌죠.... 아래 문서도 사라지기 전에 따로 기록을 해두는것이 좋을꺼 같아서 기록을 해둡니다. General Name Default Description mode 'horizontal', 'vertical', 'fade' 'horizontal' Type of transition between slides speed integer 500 Sli.. 2019. 3. 12.
[Jquery] 원형 그래프 플러그인 그래프를 사용할일이 종종 있다, 수많은 그래프가 많이 있지만 쉽고 간단하게 사용할수 있는 그래프가 있어서 기록을 합니다. 파일명은 circle-progress.js 라는 파일로써 생각보다 기능도 많고 괜찮게 쓸수 있는 플러그 인이네요. 해당 플러그인 Github 주소입니다. https://github.com/kottenator/jquery-circle-progress 플러그인 파일은 위에 주소에서 받으면 됩니다. See the Pen circle-progress by DeokHwan (@deokhwan) on CodePen. 예제로 만들어본 부분이니 참고하면 좋을것 같습니다. 아래 내용은 옵션입니다. Option Description value This is the only required option... 2019. 2. 22.
[Jquery UI] jquery datapicker 한글화 달력의 경우 제이쿼리UI 에서 제공하는 datepicker 를 많이 사용합니다. 하지만 영문으로 되어있어서, 한글화 셋팅이 필요하게 되죠. 아래 예제처럼 간단하게 적용할수 있으니 참고하세요~~ HTML부분 JS부분 $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', prevText: '이전 달', nextText: '다음 달', monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames.. 2018. 11. 8.
[Jquery] Bx슬라이더 좌우 버튼을 클릭후 오토슬라이드가 멈출때 방법 Bx 슬라이더의 경우 슬라이드를 자동으로 돌리도록 설정을 해놓은뒤에 직접 좌우 버튼을 눌러서 슬라이드를 조작할경우 자동으로 돌아가는게 멈추고 다시 자동으로 돌아가지 않는 버그같은것이 있습니다. 이부분은 다시 돌아가도록 해줘야 하는데 저는 아래의 방법을 자주사용합니다. HTML부분 JS부분var mainSl = $(".mainSl").bxSlider({auto:true,controls:true,onSlideAfter: function($slideElement, oldIndex, newIndex){mainSl.startAuto();}}); 기본적으로 bx슬라이더를 돌릴때 변수를 하나 선언해서 그 변수에 넣어줍니다. 그리고 나서 onSlideArter 함수를 이용하여 슬라이드가 돌아간뒤에 다시 오토스타트를 넣.. 2017. 9. 8.
[Jquery] Bx Slider display:none 이였다가 display:block 으로 변경시 height 값 0이 되는문제 웹코딩을 하다... bx슬라이더를 사용하게 되었습니다. 웹작업중 bx슬라이더가 display:none 이였다가... 버튼을 클릭을 하면 보여야 하는 부분이 있었습니다... 그런데 display:none으로 되어있으면 처음에 슬라이더가 보여지지 않으니, 높이값을 0으로 잡는 오류가 있더라구요....물론 bxslider 개발자는 이런상황까지 생각해서 만든게 아니기 때문에 오류가 아니겠죠... ㅎㅎㅎ 해당문제를 해결하기 위해서.... 고민을 했습니다.반응형이라서.. height 값을 강제로 잡아줄수 없고 예매한상황 됬죠....해외 사이트중에 bx슬라이드를 reload 하는 방법이 있다는걸 알고리로드를 하면 되겠구나 하여 아래와 같은 코드를 작성해보았습니다. 이와 같이 하면 버튼을 클릭하는 순간 bx슬라이더가 .. 2017. 7. 19.
[Jquery] 패럴랙스 보통 백그라운드 이미지를 고정시키고 싶을때 사용하는 CSS는 아래와 같습니다. background-image: url('w3css.gif');background-repeat: no-repeat; background-attachment: fixed; 그런데 뒤에 고정된 백그라운드가 마우스 드래그할떄 미묘하게 움직이고 싶다면 별도의 플러그인이 필요합니다. 그럴때 사용하기 유용한 플러그인입니다. 사용방법은 간단합니다.아래와 같이 제이쿼리 및 플러그인을 추가하고난뒤 제이쿼리로 선택자를 선택한뒤 원하는 값을 주면 됩니다. 자세한건 첨부파일 index.html 파일과 css를 열어서 확인하면 좋을꺼 같습니다. 플러그인을 사용하는 방법도 있지만 제가 직접 작성한 부분도 있습니다.해당 부분을 보고 싶으시면 아래 링크를.. 2016. 11. 23.

티스토리툴바