• WebDevelop/jQuery'에 해당되는 글 5건
  1. 2016.06.28 영역내에서 마우스 휠되도록...
  2. 2015.04.27 jQuery .attr() vs .prop()

영역내에서 마우스 휠되도록...

div같은곳에 내용을 출력할때 style을 overflow: scroll 로 해두고...

내용이 많을때 스크롤이 생길테고 마우스 휠을 내릴때 스크롤이 하단에 위치하게 되면 이때부터 해당 영역 밖의 스크롤이 동작하게 된다.

때론 이런 기능이 불편할때가 있는데...

이런때를 위한 기능을 jQuery로 만들었다...



?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.fn.extend({
    mouse_wheel: function() {
        $(this).on('mousewheel', function(e) {
            if (e.originalEvent.wheelDelta >= 120) {
                this.scrollTop -= 50;
            } else if (e.originalEvent.wheelDelta <= -120) {
                this.scrollTop += 50;
            }
            return false;
        });
    }
});
 
$('div').mouse_wheel();

이렇게 사용하면 된다..

저작자표시

'WebDevelop > jQuery' 카테고리의 다른 글

jQuery .attr() vs .prop()  (0) 2015.04.27
jQuery와 prototype의 충돌 해결방법  (0) 2013.05.13
jQuery selector시 좋은 습관  (0) 2009.10.13
  • ,

jQuery .attr() vs .prop()

jQuery에서 .attr()과 .prop()은 사용시 몇가지 차이점이 있다.


.attr()의 경우 이름 그대로 attribute를 컨트롤 하기위함이고, .prop()의 경우 property를 컨트롤할때 사용한다.


간단한 예를 들어서..


?
1
2
<input type="checkbox" id="check" checked="checked" />
<label for="check">Check Me...</label>
?
1
2
3
4
5
6
$('#check').change(function() {
    var $input = $(this);
    console.log(".attr('checked'): " + $input.attr('checked'));
    console.log(".prop('checked'): " + $input.prop('checked'));
    console.log(".is('checked'): " + $input.is('checked'));
}).change();


위 체크박스를 클릭시..


.attr()의 경우 체크여부와 상관없이 항상 'checked'만을 리턴하고..

.prop()의 경우 체크여부에 따라 true, false를 리턴한다.


단, jquery 1.6 이전 버전엔 .prop()이 없으니 버전을 확인하고 사용해야한다.

저작자표시

'WebDevelop > jQuery' 카테고리의 다른 글

영역내에서 마우스 휠되도록...  (0) 2016.06.28
jQuery와 prototype의 충돌 해결방법  (0) 2013.05.13
jQuery selector시 좋은 습관  (0) 2009.10.13
  • ,
Return top
 

티스토리툴바