본문 바로가기

jquery11

[jquery] 부드럽게 화면 상단으로 이동하는 버튼 만들기 코딩/제이쿼리 2024. 9. 2. 웹페이지에서 흔히 볼 수 있는 화면 상단 이동 버튼.본문 내용이 길어 스크롤바가 길 때, 최상단으로 한번에 이동할 수 있어서 매우 편리한 기능.거의 모든 사이트나 앱에서 필수적으로 들어가는 버튼이다.보통은 그냥TOP이렇게 쓸 수도 있지만..이대로 쓰면 갑자기 뿅~ 하고 최상단으로 이동해 버리게 된다. 보기 좋지 않음..그래서 보통은 부드럽게 스크롤이 이동하도록 스크립트를 겸해서 쓴다. jquery$(".btn_top").on('click', function(){ $('body, html').animate({ scrollTop: 0 }, 300 ); return false;});이렇게 하면 스르륵 스크롤 되면서 최상단으로 이동 함. 근데 여기서 한 단계 더 나아가스크롤이 최상단일때는 btn_to..
document.ready(), window.onload() 차이점 코딩 2020. 2. 3. $(document).ready(function(){ // 외부 리소스 및 이미지와 상관 없이 DOM 데이터만 로드가 완료되면 바로 실행. // 가장 먼저 실행됨 }); window.onload = function() { // 페이지 안의 외부 리소스, 이미지까지 로딩이 끝난 후에 실행됨 } ★onload 함수는 동일한 페이지 안에서 하나만 존재해야 하는데 만약 외부 라이브러리에서 onload가 이미 선언 되어 있으면 찾아서 하나로 합치는 것이 어려움. 또한 한 페이지 내에서 onload가 2번 쓰이면 앞에 것은 무시되고 뒤에 함수만 동작함.
[jquery] DOM에 나중에 추가된 항목 접근(이벤트) 코딩/제이쿼리 2017. 2. 6. document가 모두 다 load 되고 난 후, jquery로 인해 DOM에 추가된 요소들은 보통 접근할 수 없다.그것에 접근하기 위해서는 이벤트를 다르게 줘야 하는데삭제 $('.survey_list').on('click', '.btn_del', function() {$(this).parent().remove(); //여기서 this는 .btn_del 이 됨.}) '.btn_del'이 DOM에 새로 추가된 엘리먼트라고 한다면, 그 부모를 이벤트 대상으로 선택하고.on(event, 추가된 elment, function() { }) 로 작성을 하면 된다. 또는 ajax 호출 후에 추가해야하는 이벤트의 경우 아래 방법을 사용하면 잘됨. $(window).bind("load", function() { // i..
클립보드복사 스크립트 (모든 브라우저) 코딩/제이쿼리 2016. 11. 8. clipboard 복사 스크립트. flash를 사용하지 않고 스크립트로만 함. 크롬, 파이어폭스, ie10 테스트 완료 방법은.. input박스를 안보이게 하나 만들고, 그 안에 value값을 집어넣어서 select되게 한후 복사하는 방법. 주의할 점은 input박스를 hidden처리하면 안된다. display:none도 하면 안되고 opacity를 0으로 하거나 position을 absolute로 해서 가려지게 해야함. HTML CODE ns1.euntori.com 211.000.000.000 ns2.euntori.com 211.111.111.111 jQuery CODE $('.clipboardBtn').on('click', function(e) { // a의 텍스트값을 가져옴 var text = $(..
[제이쿼리] Monthpicker 코딩/제이쿼리 2016. 2. 11. Datepicker는 다들 많이 써서 잘 알고있겠지만 가끔 Monthpicker를 써야 할 때가 있다. 월만 선택해서 그 달의 매출량을 표시해야 할 때 유용하다. 괜찮은 Monthpicker를 찾음. Bootstrap datepicker를 변형한 Monthpicker https://github.com/wenzhixin/bootstrap-monthpicker 중국어로 되어있으므로 js파일을 열어서 수정해줘야함.var months = [ '1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월' ]; 이부분은 환경에 맞게 변형시킬 때 쓰는 코드.//실제 보여지는 날짜 정의 $('#month_text').val(new Date().getFullYear() ..
[제이쿼리] 현재 스크롤값 가져오기(scroll) 코딩/제이쿼리 2016. 2. 5. 코딩을 하다가 현재 스크롤 값을 가져오려고 스크립트를 짰는데 실시간이 아닌, 처음에 로딩했을때의 스크롤 값만 가져오고 변화가 없었다. (아래 코드를 사용함) $(document).scrollTop(); 그래서 찾고 찾다가, 실시간으로 가져오려면 .scroll() 함수가 필요하단 것을 알았다. $(window).scroll(function () { var scrollValue = $(document).scrollTop(); console.log(scrollValue); }); 이렇게하면, 실시간으로 현재 스크롤값이 log에 찍힘.
애니메이션 소스들 웹디자인 2015. 12. 9. 디자인은 심플하지만 동적인 효과로 재미를 주는 것이 요즘 트랜드다. 그래서 여러가지 재미있는 오픈소스들을 찾아보았다. 1. 먼저 제이쿼리는 아니지만 css로 간단한 애니메이션을 주는 사이트 http://daneden.github.io/animate.css/ 2. Pricing Table에 살짝 애니메이션 들어간 소스. http://tympanus.net/codrops/2015/11/19/some-inspiration-for-pricing-tables/ 이외에도 다른 오픈소스 많음. 3. Typed.js http://www.mattboldt.com/demos/typed-js/ 텍스트가, 실제로 타이핑되고 있는 것 처럼 구현하는 스크립트파일. 4. Wow.js http://mynameismatthieu.co..
벽돌컨텐츠, 스와이프 배너 코딩/제이쿼리 2015. 11. 30. 벽돌컨텐츠 http://masonry.desandro.com/layout.html 가로사이즈가 유동적인 경우 sizer라는 div를 넣고, columnWidth를 grid-sizer로 넣는다. ... /* fluid 5 columns */ .grid-sizer, .grid-item { width: 20%; } /* 2 columns */ .grid-item--width2 { width: 40%; } $('.grid').masonry({ // set itemSelector so .grid-sizer is not used in layout itemSelector: '.grid-item', // use element for option columnWidth: '.grid-sizer', percentPositi..
[제이쿼리] 제이쿼리 모바일 참고 사이트 코딩/제이쿼리 2014. 9. 3. 제이쿼리 모바일 기본 ui 테마 변경할 수 있는 사이트. 다운로드도 가능하고 직접 쉽게 바꿀 수 있다. http://themeroller.jquerymobile.com/ 제이쿼리 기본 ui 아이콘을 볼 수 있고 사용하는 방법도 나와있다. http://demos.jquerymobile.com/1.4.3/icons/ 메뉴를 보면 버튼스타일이라든지 체크박스, 그리드 잡는 법 등등 기본적인 공부하기에 유용함.
[제이쿼리] 드롭다운메뉴 코딩/제이쿼리 2014. 8. 13. 가로형 메뉴인 드롭다운메뉴입니다. 마우스 오버시 액션이 작동되고 3뎁스까지 구현이 가능합니다. css3 기능이 들어가있어서 ie8 이하에서는 화살표 표현이 안됩니다. 참고 해 주세요. 출처 : http://cssmenumaker.com/

Designed by 티스토리

© Kakao Corp.

티스토리툴바