jquery – rootbox.co.kr

Home » jquery

[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/jQuery] Customized selectbox

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

역시 Customized checkbox/radio button 과 같은 이유로 만든 스크립트입니다. selectbox는 단순히 CSS 핸들만으로 디자인을 입힐 수 없기 때문에 <selectbox> 태그를 사용하지 않고 디자인은 ul/li 와 CSS로 적용하고, 기능은 javascript 로 핸들했습니다. 간단한 기능만 필요해 selectbox 기본 기능만 구현했을 뿐, keyboard 관련 이벤트는 처리하지 않았습니다. 역시 …

[js/jQuery] Customized checkbox/radio button

Posted on: August 6, 2016 | By: Kiwoong Jang – 1 Comment

오랫만에 업데이트 합니다. Checkbox 나 Radio button 에 디자인을 입힐 수 있도록 하는 코드입니다. 요즘에 누가 구구구구구구 버전 브라우저(IE7, 8, 9) 따위를 지원하겠냐 싶으시겠지만 대응 해야 하는 곳이 있습니다. ㅎㅎ 덕분에 CSS3 로 간단하게 해결할 수 있는 것을 구버전도 지원할 수 있도록 jQuery로 만들었습니다. IE9 …

[js/jQuery] Draggable object

Posted on: January 13, 2014 | By: Kiwoong Jang – 2 Comments

오브젝트를 드래그&드랍할 수 있도록 하는 javascript(jQuery) 코드입니다. 여기에 쿠키나 로컬 스토리지등을 활용해서 widget 형태로 꾸밀 수 있을 것 같습니다. 우선은 간단하게 구현했습니다. javascript (needs jQuery)

$.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/

[js/jQuery] simple FAQ style code.

Posted on: November 28, 2013 | By: Kiwoong Jang – 2 Comments

간단하게 구현해본 FAQ 형식의 코드입니다. 실무에서 일하시면서 매우 자주 접하는 형식 중 하나일 것이라 생각되어 만들어봤습니다. 🙂 html markup

<dl id="faq1">
    <dt>question1</dt>
    <dd>answer1</dd>
    <dt>question2</dt>
    <dd>answer2</dd>
    <dt>question3</dt>
    <dd>answer3</dd>
    <dt>question4</dt>
    <dd>answer4</dd>
</dl>

<dt>question1</dt>

<dd>answer1</dd>

<dt>question2</dt>

<dd>answer2</dd>

<dt>question3</dt>

<dd>answer3</dd>

<dt>question4</dt>

<dd>answer4</dd>

</dl>

javascript

$.fn.setFaq = function() {
    return this.each(function(i, elm) {
        $elm = $(elm);
        $elm.find("dd").hide()
            .end().delegate("dt", "click", function() {
                $(this).next().slideToggle(200)
                    .end().toggleClass("on");
            });
    });
};

$.fn.setFaq = function() {

return this.each(function(i, elm) {

$elm = $(elm);

$elm.find("dd").hide()

.end().delegate("dt", "click", function() {

$(this).next().slideToggle(200)

.end().toggleClass("on");

});

};

Here is the TEST CODE http://jsfiddle.net/rootbox/uD89q/ 즐거운 코딩되세요~ 🙂