$("[class=useyn]").each(function (index) {  

            if ( $(this).is(":checked") ){ 

                $(this).val("Y");

            }else{

                $(this).val("N");

            }

        });

        

        $('input:checkbox[id=useyn[]]:not(checked)').attr("checked", true); 



특정 목록에서 checkbox의 체크 여부를 확인 후 값을 변경해줘야 하는데
checkbox는 체크가 되지 않으면 값을 전달하지 않아 처리방법을 고민하다가
체크 여부에 따라 값을 세팅하고
checkbox 전체를 선택해서 값을 전달하게 처리 함.






$("#join_form_cv").load("/member/form.join.jsp");


form.join.jsp 파일을 include로 사용하자니 불필요한 네트워크 자원을 사용하게 되는 것 같아

회원가입 버튼을 클릭할때 form.join.jsp 파일을 jQuery로 읽어오게 변경했다.

좋은데, 나중에 불러온 자원에 대해서는 $(document).ready 에서 이벤트 발생이 안된다.

즉, 회원가입 폼 안에서 keyup 될때마다 아이디 사용여부를 확인하려면

$("#join #mid").keyup 이벤트가 아닌 onkeyup 이벤트를 이용해서 외부 함수를 사용해야 한다.

해서, load로 읽어올 내용은 그냥 보여지는 컨텐츠 정도가 좋을 듯...

언제 복구하냐...


form.join.jsp 파일에 $(document).ready 이벤트를 구성하면 정상적으로 작동한다.






$("#join")[0].reset();


jQuery 결과셋의 첫번째 DOM객체에 대해 reset()메소드를 실행








<!-- 팝업창 -->
<html>
<head>
<script type="text/javascript">
//<![CDATA[
    jQuery(document).ready(function() {
        // 부모창의 인쇄영역 값을 받음 
        var p_html = jQuery("#<%=id%>", opener.document).html();
        // 팝업창에 인쇄 내용을 추가 
        jQuery("#print_area").html(p_html);
        
        // 숨길 부분 
        jQuery(".listSBtn").hide();

        // 팝업창의 인쇄 영역에서 링크를 무효화
        jQuery("*").click(function(event){
            event.preventDefault();
        });

        //인쇄 
        window.print();
    });
//]]>
</script>
</head>
 
<body>
    <div id="print_area" name="print_area"></div>
</body>
</html>

<!-- 부모창 -->
<a href="javascript:print_popup('print_layer');">인쇄하기</a>

인쇄 모듈을 쉽게 가져가기 위해서는
출력되는 영역의 화면 설계를 조금 신경써야 합니다.
특히 CSS 부분 말이죠.
그렇지 않으면 팝업창에서 인쇄내용이 깨질테니까요.



  1. BlogIcon 하늘빠 2011.10.27 09:52

    역시 레이아웃이 문제겠네요..

    • BlogIcon 알통 2011.10.28 12:19 신고

      안녕하세요~
      디자인단에서 CSS를 너무 깊은 단계까지 잡아놔서 ㅡㅡ;;
      결국 프로그램을 짰네요.
      (예: #wrap .cnt .rightcon .board .... {})

      css를 다시 수정하는게 공수가 더 많이 들어서 ㅠ.ㅠ



$(document).ready(function(){
$(":input").keydown(function(e) {
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
//탭처리 예외
if(inputs[idx].id=="RgtMbdGbn"
|| inputs[idx].id=="AplrSid" 
|| inputs[idx].id=="RgtMbdNm" 
|| inputs[idx].id=="Telno" 
|| inputs[idx].id=="Hpno" 
|| inputs[idx].id=="RegnCode1" 
|| inputs[idx].id=="RgtMbdNm1" 
|| inputs[idx].id=="RepRegnum" 
|| inputs[idx].id=="LmtCn" ){
}else{
if (e.keyCode == 13) {
if (idx == inputs.length - 1) {
           inputs[0].select();
       } else {
       try {
            inputs[idx + 1].focus(); //  handles submit buttons
          //inputs[idx + 1].select();
       }catch(e){}
        }
        return false;
}
}
});
});


분명 더 간단하고 더 아름다운 방법이 있을 것 같습니다만 여기까지...

 


블로그를 한창 할때, 믹시의 스크롤 페이징을 보고서 어떻게 하는 건지 참 많이 궁금해 했던 기억이 납니다. 
졸립기도 하고 갑자기 스크롤 페이징이 생각 나서 검색해봤는데 쭌스님의 포스팅과 Raj Gorsia님의 포스팅을 찾게 되었습니다. 스크립트 라이브러리를 사용하지 않는다면 쭌스님의 글을 참고해서 작성하면 되겠고 JQuery를 사용한다면 Raj Gorsia님의 글을 거의 그대로 사용하면 되겠네요.

예전에 제가 감을 잡지 못 했던 부분은 아래 한줄입니다. ㅠ.ㅠ
if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
또는
if(content.scrollTop < content.scrollHeight - 500)
이렇게 간단한데 말이죠... 

지금은 응용할만한 프로그램을 만들지 않지만 다음에 꼭 활용해서 만들어 보고 싶네요. 


 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>JQuery</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var pageLoaded = 1; //현재 페이지

$(window).scroll( function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
pageLoaded = pageLoaded + 1; 
// ajax를 추가해서 목록을 받아온다
// alert(pageLoaded);
$('#main_content').append(
"main_content"+pageLoaded+"<br><br><br><br><br><br><br><br><br><br><br><br><br>");
}
});
//]]>
</script>

<style type="text/css">

</style>

</head>
<body>
<div id="top_menu">
<ul id="topUL">
<li class="to_home"><a href="/">HOME</a></li>
<li class="top_menu_li" id="login_btn">로그인</li>
<li class="top_menu_li"> | </li>
<li class="top_menu_li" id="join_btn">회원가입</li>
</ul>
</div>
<div id="wrap">
<div id="left_menu">left_menu</div>
<div id="content">
<div id="login_box">login_box</div>
<div id="join_box">join_box</div>
<div id="main_content">
main_content1<br><br><br><br><br><br><br><br><br><br><br><br><br>
main_content2<br><br><br><br><br><br><br><br><br><br><br><br><br>
main_content3<br><br><br><br><br><br><br><br><br><br><br><br><br>
main_content4<br><br><br><br><br><br><br><br><br><br><br><br><br>
main_content5<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id="right_menu">right_menu</div>
</div>
</body>
</html>



[구글 트랜드 jquery, prototype, dojo, mootools]

프로토타입이 상한가를 칠때 책을 통해 학습을 하고선 지금까지 프로토타입만 고집을 했습니다.
그러다 근래에 계속해서 jQuery가 여기저기서 툭툭 튀어나오더니
더 이상 미루면 안되겠다는 생각에 "어떤 놈이야?"라는 생각으로 접해보기로 했습니다.
어제부터 검색을 하면서 이런 저런 기능을 사용해봤는데 ㅡㅡ;; 이건 뭐냐는...
프로토타입보다 사용하기가 아주 편한 것 같습니다.

프로토타입을 사용할때 왠지 복잡해보여서 화면 처리 같은건 사용하지도 않았는데
jQuery에서는 단 면줄로 원하는 효과를 만들어 낼수가 있었습니다.
졸린 시간을 이용해서 10여분 동안 만들어봤는데 마법같은 매력에 빠져들게되었습니다. @..@

일단 구글 트랜드에서 검색을 해본 결과 jQuery가 확실히 대세입니다.
또한 관심을 가지고 있는 모바일 환경에서도 jQuery가 자주 언급이 되고 있구요.
특히나 우니라나처럼 쏠림현상이 심한 곳은... jQuery 꼭 해야죠.
필요할때 검색해서 찾아가며 만들어도 될 것 같지만 큰 맘 먹고 책 한권 구입했습니다.
(개발서 사지 않겠노라는 다짐은 언제나 이렇게 쉽게 무너집니다. ㅠ.ㅠ)

아래 처럼 하나 만들어보니 jQuery라는 놈이 아주 기대가 됩니다.


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>JQuery</title>
<link href="/js_css/fisheyMain.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
   $("#login_btn").click(function(){
   if($("#join_box").is(":visible")){
    $("#join_box").slideToggle("slow");
}
       $("#login_box").slideToggle("slow");
   });
   
   $("#join_btn").click(function(){
    if($("#login_box").is(":visible")){
$("#login_box").slideToggle("slow");
}
       $("#join_box").slideToggle("slow");
   });
});
//]]>
</script>

<style type="text/css">
#top_menu {
width:100%;
height:22px;
line-height:22px;
border-bottom:1px solid #B6BAC0;
background-color:#E1E1E1; /*#E1E1E1;*/
color:#fff;
margin-bottom:7px;
float:left;
}

#topUL{
margin:0 auto;
width:990px;
min-width:990px;
}

.to_home {
float: left;
}

.top_menu_li {
float: right;
cursor:pointer;
}

#wrap{
margin:0 auto;
width:1000px;
min-width:1000px;
}

#left_menu {
width: 200px;
background-color: #ccc;
float: left;
}

#content {
width: 580px;
margin-right:10px;
margin-left:10px;
float: left;
background-color:highlight;
}

#right_menu {
width: 200px;
background-color: #ccc;
float: left;
}

#login_box {
display: none;
height: 300px;
background-color: fuchsia;
}

#join_box {
display: none;
height: 300px;
background-color:lime;
}

</style>

</head>
<body>
<div id="top_menu">
<ul id="topUL">
<li class="to_home"><a href="/">HOME</a></li>
<li class="top_menu_li" id="login_btn">로그인</li>
<li class="top_menu_li"> | </li>
<li class="top_menu_li" id="join_btn">회원가입</li>
</ul>
</div>
<div id="wrap">
<div id="left_menu">left_menu</div>
<div id="content">
<div id="login_box">login_box</div>
<div id="join_box">join_box</div>
<div id="main_content">
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content
</div>
</div>
<div id="right_menu">right_menu</div>
</div>
</body>
</html>