Whiteship's Note


[제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기

View/JavaScript : 2009. 9. 22. 17:35


매개변수가 없는 함수는 HTML에서 분리가 쉽습니다.

$(document).ready( function(){

    $("#comment_add").click(function() {
        $("form").submit();
    });

}

이런식으로 제이쿼리를 이용해서 click 이벤트가 발생했을 때 특정 폼을 서브밋하라고 이벤트를 등록할 수 있죠. 그러나;; 매개변수가 들어간 녀석들은 어떻게 할지 좀 난감합니다.

<img id="btn_list" class="action" src="<c:url value="/images/study/back.png"/>" onclick="javascript:fn_click_study(${meeting.study.id});"/>

예를 들어 위와 같이 특정 함수에 어떤 변수 하나를 넘겨줘야하는데, 그 값이 매번 달라지고, 목록 속에 들어있는 모든 요소들에 대한 것이라.. 페이지 로딩시에 위와 같이 등록하기가 좀...

그래서 같이 스터디 하는 형 중에 제이쿼리를 유리갤라만큼 하시는 분이 계셔서 물어봤더니 다음과 같이 해결해 두셨더군요.

<img id="btn_edit" class="action" src="<c:url value="/images/study/edit.png"/>" member="${meeting.study.id}" meeting="${meeting.id})" />

이렇게 엘리먼트에 임의이 속성을 추가합니다. 이제 페이지 로딩시에 등록할 수 있습니다.

$(document).ready( function(){

    $("#btn_edit").click(function(){
        var self = $(this);
        var url = '<c:url value="/study/"/>' + self.attr("study") + "/meeting/update/" + self.attr("meeting") + ".do";
        $(document).attr("location", url);

    });

}

아.. 그나저나 c:url 정말 악몽 같네요. 저거 없으면 context path가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ
top

  1. Favicon of https://helols.tistory.com BlogIcon is윤군 2009.09.22 18:00 신고 PERM. MOD/DEL REPLY

    임의 attr 추가는 왠지 .. 꺼림직 한데요;;ㅎㅎ

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.22 20:28 PERM MOD/DEL

    좀.. 그렇긴 해;;
    다른 방법도.. 있겠지?

  2. Favicon of http://toby.epril.com BlogIcon 토비 2009.09.22 18:34 PERM. MOD/DEL REPLY

    그르게

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.22 20:30 PERM MOD/DEL

    음...

  3. Favicon of http://nije.pe.kr BlogIcon 김재진 2009.09.23 08:38 PERM. MOD/DEL REPLY

    유리겔라 ㅋㅋ

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.23 10:46 PERM MOD/DEL

    난 "마틴 플라워" 라고 한적도 있어.

  4. Miracle 2009.09.23 10:49 PERM. MOD/DEL REPLY

    HTML5에 클라이언트 사이드 Database가 표준화 된다는 소문이 있으니....

    그때 쯤이면 저런 꽁수를 사용하지 않아도 되지 않을련지 ^^

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.23 12:29 PERM MOD/DEL

    앗 유리갤라 횽이다.

  5. Favicon of http://steelheart.kr/ BlogIcon 전성하 2009.09.23 17:30 PERM. MOD/DEL REPLY

    a h r e f="/${meeting.study.id}/${meeting.id}"
    i m g id="btn_edit" class="action" src="/images/study/edit.png" ....
    /a

    이런 식으로 하는것도 괜찮지 않을까요?
    접근성 측면이나 시맨틱 마크업 차원에서도 맞는거 같고 자바스크립트가 없어도 링크가 잘되요.

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.09.23 19:07 신고 PERM MOD/DEL

    그렇군요...img 보다는 a 태그가 좋겠네요.

  6. Favicon of http://blog.lckymn.com BlogIcon Kevin 2009.09.23 18:53 PERM. MOD/DEL REPLY

    저렇게 사용하면 구버전 브라우저들에서 제대로 동작하지 않을것 같군요.
    따로 사용해야하는 값을 어딘가에 저장해 놔야 한다면,
    hidden type을 쓰시면 될것 같은데요.

    <input type="hidden" id="btn_edit_member" value="${meeting.study.id}" />
    <input type="hidden" id="btn_edit_meeting" value="${meeting.id})" />
    이러면 self.attr("study" ) / self.attr("meeting" ) 대신에
    $("#btn_edit_member" ).val() / $("#btn_edit_meeting" ).val()
    이렇게 쓰시면 되지 않을까요?

    뭐 이런걸 피하고 한곳에 몰아 넣고 싶으신것 같긴합니다만...

    근데 더 문제가 되는건 역시, 이미 다른분께서도 얘길 꺼내셨지만,
    accessibility 인거 같네요.
    아무래도 img 태그 보다는...
    submit, button, image type의 input element 나 anchor 태그를
    사용하는게 나을것 같습니다.

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.09.23 19:09 신고 PERM MOD/DEL

    아;; 히든 타입!!
    임의 속성 정의 대신 히든 타입을 사용할 수 있겠군요.

    음.. 역시 img 보다는 앵커나 버튼 태그가 낳겠네요.

    와우! 감사합니다.

Write a comment.


[jQuery] 날짜 선택하기

View/JavaScript : 2009. 7. 8. 20:33


jQuery UI 위젯이 제공하는 기본 달력은 다음과 같습니다.


흠.. 이것까진 간단했습니다. 이 것을 이용한 태그 파일 두개를 만들었습니다. 하나는 검색 필드용 하나는 폼 필드용. 검색 필드는 get 방식으로 url뒤에 줄줄이 붙여서 가져올 것이고 폼 필드는 post 방식에서 사용하여 model의 특정 속성에 바로 바인딩 할 겁니다. 둘 다.. 자바스크립트 코드 부분은 다음과 같습니다.

    $(function() {
        $("#${id}").datepicker({
            dateFormat: 'yy/mm/dd',
            changeMonth: true,
            changeYear: true,
            yearRange: '${fromNS}:${toNS}'
         });
    });

적당한 포맷을 설정하고, 연도와 달을 좀 더 변경하기 쉽게 드랍다운으로 설정했고, 연도 범위를 설정했는데, 이 값은 태그에 전달해준 값을 쓰기로 했습니다. 값을 전달해 주지 않으면 기본값을 쓰도록 했지요.

복잡한건, 날짜 범위를 선택하는 것인데, 이건 Ajaxian에서 10가지 date picker중 하나로 선정된 filament group의 daterangepricker를 이용했습니다.


    $(function() {
        $("#${id}").daterangepicker({
            dateFormat: 'yy/mm/dd',
            datepickerOptions: {
                changeMonth: true,
                changeYear: true,
                yearRange: '${fromNS}:${toNS}'
            }
        });
    });

대충 이렇게 보여집니다. 옵션이 다양해서 이 녀석을 써봤습니다. 문제는 하나의 필드에 두 개 날짜 값을 넣어주고 있어서 DateRange라는 클래스를 만들고, DateRangePropertyEditor도 만들어줬습니다. DateRange 클래스는 테스트를 통해서 문자열 값을 생성자에 넣어줬을 때 제대로 동작하는지 확인을 해보았고, DRPE를 등록해서 돌아가는지 웹에서 확인도 해봤습니다.

이 녀석은 검색용 태그파일만 만들었는데.. 만들고 보니 날짜를 한 개만 받는 녀석이랑 용도가 겹치더군요. Today랑 Specific Date는 메뉴에서 빼고 싶어서 옵션들을 살펴봤는데 영~~ 시원찮네요. 흠.. 뺄 수 있을텐데 말이죠.


top

Write a comment.


[JQuery] J쿼리 이용해서 속성 값 변경하기, 엘리먼트 셀렉션, 이벤트 추가하기

View/JavaScript : 2009. 5. 27. 16:13


attr을 사용하면 됩니다. 이전에 작성한 탭 만들기 글에서 a 엘리먼트의 onclick 속성을 사용하여, 자바스크립트 함수를 호출했었는데, J쿼리를 이용해서 그런 부분을 완전히 자바스크립트 쪽으로 떼어 낼 수 있게 되었습니다.

            $(document).ready(function() {
                $("#topnav a").bind("click", function () {
                    var id = $(this).parents("li").attr("id");
                    $("body").attr("class", id);
                });
            });

이 간단한 코드에 위 제목에서 언급한 모든 것들이 들어있습니다. 먼저, 이벤트 등록을 html에서 완전히 분리할 수 있게 도와주는 코드는 바로..

$(document).ready(function() {

});

이 녀석입니다. 이 안에서 이벤트 등록 작업을 해주면,

<a href="#" onclick="changeMenu('report');">

HTML에서 이런 코드를 작성하지 않아도 됩니다.

다음은 이벤트를 등록하는 코드입니다.

$("#topnav a").bind("click", function () {

});

그 전에 셀렉션을 보겠는데, #topnav a 이 부분은 topnav id를 가진 엘리먼트 하위의 a 엘리먼트를 모두 선택하라는 것입니다. API를 보면 더 다양한 방법들이 예제와 함께 잘 나와있습니다.

다시 이벤트 코드로 돌아가서 bind는 특정 이벤트에 어떠한 함수를 호출하도록 등록하는 함수인데, 이것을 특정 이벤트에 맞게 줄여서 다음과 같이 쓸 수도 있습니다.

$("#topnav a").click(function () {

});

간단하죠. click은 클릭하라는게 아니라 click 이벤트 핸들러를 등록하는 겁니다.

var id = $(this).parents("li").attr("id");

이 코드에서는 parents를 사용해서 자신을 감싸고 있는(여기서 자신은 사용자가 클릭한 a 엘리먼트겠죠.) 엘리머먼트 중에 li를 선택하고, 그 엘리먼트의 id 속성 값을 가져옵니다.

attr(속성이름)은 보시다시피 속성의 값을 가져오는 게터와 비슷합니다.

이와 반대로 세터 역할을 하는 함수도 역시 attr인데 사용법이 조금 다릅니다. 이번에는 인자를 하나 더 줍니다.

$("body").attr("class", id);

이렇게, attr(속성이름, 값) 형태로 사용하면 세터같이 동작합니다. 참~~ 편리하군요.


ps: 원래는 body의 class가 아니라 id를 변경하도록 코드를 작성했었는데, 잘 되지 않아서 class를 이용해봤는데 잘 동작하네요. 왜 그런지는 모르겠습니다. $(document).ready(function(){}); 이 것을 사용하지 않으면 id 변경도 잘 되는데 말이죠.. 저것과 관련이 있어 보입니다.
top

  1. Favicon of https://yangwansu.tistory.com BlogIcon 양완수 2009.05.28 10:39 신고 PERM. MOD/DEL REPLY

    추측컨데 이미 존재하는 id를 중복되게 생성해서 나오는 문제가 아닐까요?

    Favicon of http://whiteship.me BlogIcon 기선 2009.05.28 13:54 PERM MOD/DEL

    id 중복 생성이라~ 흠.. 몰겠네요. @_@

Write a comment.


[JavaScript] id값 변경하기

View/JavaScript : 2009. 5. 26. 16:52


<a href="#" onclick="changeMenu('report');">KOMA-REPORT</a>

화면에서 changeMenu('report'); 형태로 자바스크립트를 호출하게 하고, 자바스크립트 함수를 다음과 같이 정의합니다.

var changeMenu = function(id) {
    document.body.id = id;
}

간단하더군요.
top

  1. Favicon of http://toby.epril.com BlogIcon 토비 2009.05.27 09:41 PERM. MOD/DEL REPLY

    저건 쩜 문제가...

    Favicon of http://whiteship.me BlogIcon 기선 2009.05.27 15:15 PERM MOD/DEL

    흠.. onclick 때문이죠? 지져분해서..?

  2. Favicon of http://yangwansu.tistory.com BlogIcon 완수 2009.05.28 03:55 PERM. MOD/DEL REPLY

    http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201
    에서 아래와 같은 문장이 보이는데 토비님께서 말씀하시는 문제가 저것인지????
    body of type HTMLElement
    The element that contains the content for the document. In documents with BODY contents, returns the BODY element. In frameset documents, this returns the outermost FRAMESET element.

    Favicon of http://whiteship.me BlogIcon 기선 2009.05.28 13:53 PERM MOD/DEL

    흠.. body 대신 frameset이 올 수 있다는 거군요.
    과연 무슨 문제일런지~

Write a comment.


document.location.href 써먹기

View/JavaScript : 2008. 12. 15. 16:14


    <script>
    function doinvconfirm() {
        var res = confirm("재고조사를 하시겠습니까?");
        if (res == false) return;

        document.location.href = "doinvconfirm.do";
    }
    </script>

<a href="javascript:doinvconfirm()" class="black">&nbsp;재고조사</a>


흠~ document.location.href를 이용하면 URL 주소창에 해당 URL을 입력한 거랑 동일한 효과가 나는 거군요. 자세한 내용은 여기서 참조할 수 있습니다.
top

  1. Favicon of http://kingori.egloos.com BlogIcon kingori 2008.12.17 22:57 PERM. MOD/DEL REPLY

    관계없는 딴지를 걸자면^^; 위에 작성하신 코드 중 a href="javascript:" 는 가급적 피하는 것이 좋은 pattern 입니다. 웹 표준 및 사용성 측면에서지요. 대신 a href="유의미한 url. 불가필할 경우 #" onclick="doinvconfirm()" 이런 형태를 더 권장합니다. http://hyeonseok.com/docs/accessible-javascript/ 여기를 보시면 좀 더 자세히 기술되어 있습니다.
    @본문과 전혀 관계없는 이야기었습니다. :)

    Favicon of http://whiteship.me BlogIcon 기선 2008.12.18 08:38 PERM MOD/DEL

    와~ 좋은 정보 감사합니다. :)

Write a comment.


JavaScript Calendar

View/JavaScript : 2008. 9. 25. 13:52


참조: http://www.dynarch.com/projects/calendar/
사용자 삽입 이미지

저렇게 달력을 뿌려주는 자바스크립트 라이브러리입니다. Date 정보를 입력받을 때 사용하면 유용하겠죠. 여러 가지 스타일 시트도 제공해주고, 여러 포맷으로 데이터를 조작할 수도 있고, 좋습니다.

jscalander가 제공하는 예제 소스 코드를 보면 어떻게 이용할 수 있을지 대충 알 수 있습니다.
<form action="#" method="get">
<input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
</form>

<script type="text/javascript">
    Calendar.setup({
        inputField     :    "f_date_b",      // id of the input field
        ifFormat       :    "%m/%d/%Y %I:%M %p",       // format of the input field
        showsTime      :    true,            // will display a time selector
        button         :    "f_trigger_b",   // trigger for the calendar (button ID)
        singleClick    :    false,           // double-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });
</script>

친절하게 주석도 있기 때문에, 금방 적용하실 수 있겠죠. 하지만, 약간의 번거로움은 감수를 하셔야 하며, 저런 컴포넌트가 여럿 필요할 때는 복사 붙여넣기 코드가 JSP 페이지 사방에 나타날 수 있을 겁니다. 그럴 땐 태그 파일을 만들어서 컴포넌트화 해 두면 매우 편합니다.

언젠가 공개할 OSAF를 사용하신다면, 간단한 태그 파일 sdata.tag로 쉽게 저런 UI 컴포넌트를 만들 수 있습니다.

<o:sdate path="birthday" label="생일" />

이렇게 한 줄이면 끝이죠. 캬오~ 태그 파일 만쉐이! OSAF 만쉐이!!
top

Write a comment.


javascript:void(0) 이게 뭔가?

View/JavaScript : 2008. 9. 17. 12:03


참조 : http://www.tizag.com/javascriptT/javascriptvoid.php

- 새 페이지를 로딩하는게 아니라 어떤 액션을 실행하고 싶을 때 앵커의 href 속성에 사용.
- href 속성의 값에 javascript: 프리픽스를 사용해서 자바스크립트 문장을 사용할 수 있다. == direct URL JavaScript statements
- 예제 <a href="javascript: alert('News Flash!')">News Flash</a>
- Gmail 같은 곳에서 상당히 많이 쓰고 있다.
- href는 어떤 값이라도 있으면 해당 값을 새 페이지로 읽으려고 들기 때문에, 항상 null을 반환하는 void(0)를 호출해서 그걸 막는다.
- void는 숫자 하나를 받는데, 내부에서 쓰진 않는다. void(1) 이렇게 해도 상관은 없겠다.

top

  1. Favicon of http://blog.gloridea.net BlogIcon Gloridea 2008.09.17 13:31 PERM. MOD/DEL REPLY

    void 는 함수가 아니라 결과값으로 무조건 undefined를 반환하는 연산자입니다.
    그러므로 void(0) === void 0 === void "dummy" 모두 동일합니다.

    만약 null을 반환하게 되면 빈 페이지로 이동하고, null이라는 문자열을 보게 됩니다.
    (주소 줄에 javascript:null 이라고 쳐보면 알 수 있습니다. :-)

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2008.09.17 13:46 신고 PERM MOD/DEL

    그렇군요. 감사합니다. :)
    자바스크립트 공부를 제대로 안 했더니;;;
    음.. 완벽가이드 나왔던데, 그걸로 열공해야겠습니다.

  2. Favicon of http://zerry82.tistory.com BlogIcon zerry82 2008.09.25 16:44 PERM. MOD/DEL REPLY

    더 간단하게! javascript:;

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2008.09.25 17:28 신고 PERM MOD/DEL

    ㅇㅇ.그거랑 저거랑 똑같은건가?

Write a comment.