javascript – rootbox.co.kr

Home » javascript

[js/jQuery] Ripple animation as seen google material design

Posted on: March 12, 2017 | By: Kiwoong Jang – 2 Comments

Google Material design 의 물결 애니메이션 jQuery Plugin 구글 Material design 에서 볼 수 있는 클릭 이벤트 피드백 에니메이션(물결)을 구현해봤습니다. 역시 업무에 필요해서.. jQuery plugin 형태로 만들었기 때문에 적용하고 싶은 element 에 jQuery 함수를 입히면 됩니다. 언제나 그랬듯이 별거 없는 코드입니다. Demo & Source codes …

[js] Internet explorer 브라우저 버전 추출하기

Posted on: August 27, 2016 | By: Kiwoong Jang – Leave a Comment

다른 포스트([js/jQuery] Customized checkbox/radio button)에서 사용했던 코드인데 다시 정리합니다.

function getIEVersion() {
	var ua = window.navigator.userAgent,
		msie = ua.indexOf("MSIE ");
	if(msie > 0) {
		return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));
	} else {
		return 0;
	}
}

function getIEVersion() {

var ua = window.navigator.userAgent,

msie = ua.indexOf("MSIE ");

if(msie > 0) {

return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)));

} else {

return 0;

}

구현 방법은 매우 단순합니다. navigator 객체의 userAgent 프로퍼티에서 버전 부분만 추출하는 방식입니다. 아래는 Internet explorer 10 의 userAgent 정보입니다. 이를 기준으로 코드를 설명하면,

"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"

1	"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"

“MSIE “가 몇번째 위치에 있는지 indexOf 로 받아오고 // Line 3 …

$.fn.draggable = function() {
    return $.each(this, function() {
        var $el = $(this);
        var move = function(e) {
            if(!$el.data("_isMove")) return;

            var pos = $el.data("pos"),
                pos = { x: parseInt($el.css("left")) + (e.clientX - pos.x),
                        y: parseInt($el.css("top")) + (e.clientY - pos.y) };

            $el.css({ top: pos.y, left: pos.x });
            $el.data("pos", { x: e.clientX, y: e.clientY });
        };
        $el.on("mousedown", function(e) {
            var $this = $(this);

            $el.data("_isMove", true);
            $el.data("pos", { x: e.clientX, y: e.clientY });
        });
        $el.on("mouseup mouseout", function(e) {
            $el.data("_isMove", false);
        });
        $el.mousemove(move);
    });
};

$("#object1, #object2, #object3").draggable();

$.fn.draggable = function() {

return $.each(this, function() {

var $el = $(this);

var move = function(e) {

if(!$el.data("_isMove")) return;

var pos = $el.data("pos"),

pos = { x: parseInt($el.css("left")) + (e.clientX - pos.x),

y: parseInt($el.css("top")) + (e.clientY - pos.y) };

$el.css({ top: pos.y, left: pos.x });

$el.data("pos", { x: e.clientX, y: e.clientY });

};

$el.on("mousedown", function(e) {

var $this = $(this);

$el.data("_isMove", true);

$el.data("pos", { x: e.clientX, y: e.clientY });

});

$el.on("mouseup mouseout", function(e) {

$el.data("_isMove", false);

});

$el.mousemove(move);

});

};

$("#object1, #object2, #object3").draggable();

Here is test code that editable & testable. http://jsfiddle.net/rootbox/DwYLW/

Tag: javascript

[js/jQuery] Ripple animation as seen google material design

[js] Internet explorer 브라우저 버전 추출하기

[js/jQuery] Customized selectbox

[js/jQuery] Customized checkbox/radio button

[js/jQuery] Draggable object