티스토리 툴바

Daum
Tistory
로그인
JQUERY2012/02/02 16:04

JQUERY DATEPICKER PLUGIN 사용

 <%-- 달력용 CSS --%>
 <link href="/html/js/jquery-ui-1.8.custom/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
 <%-- 달력용 JS --%>
 <script type="text/javascript" src="/html/js/jquery-ui-1.8.custom/jquery-ui-1.8.14.custom.min.js"></script>
$(fuction(){
  $('input').filter(function(){return this.id.match(/startDt)/);}).datepicker({
       dateFormat : "yy-mm-dd", // 해당 날짜를 선택했을 때, textbox에 들어가는 날짜의 포맷
       showOn : "button",
       buttonImageOnly : true,
       buttonImage : "<c:url value='/html/img/btn/btn06_clnt.gif'/>",
       buttonText : "달력"
  });
});

/*특정조건일 때 달력이 보이지 않게 할 때*/
$('input').filter(function(){return this.id.match(/startDt)/);}).datepicker("disable");


<input type="text" id="startDt" name="startDt" value="" />
Posted by darkhorizon
Trackback 0 Comment 0
JQUERY2012/01/31 17:26

[JQUERY] 사용 예제


1. 아이디가 'ABC'에 해당하는 와일드 카드값 (예 : ABC-1, ABC2 등)
    $('[id^=ABC]').click(function(){
기능추가
    }

2. 마스크 기능 추가
    <script type="text/javascript" src="/jquery/jquery.maskedinput-1.3.min.js"/>"></script>
    $('#startDt').mask('9999-99-99');

    @ 자리수 동적 설정 $('#phone2').mask('999?9');  // 3~4 자리까지  
    참고 : http://digitalbush.com/projects/masked-input-plugin/
    참고 : http://aojashin.blog.me/100116532893

3. .filter()

 $('input[type=text]').filter(function(){
     return this.id.match(/(Dt|PerdFrom|PerdTo)/);}).mask('9999-99- 99').datepicker({
  dateFormat : "yy-mm-dd",
  showOn : "button",
  buttonImageOnly : true,
  buttonImage : "/html/img/btn/btn06_clnt.gif",
  buttonText : "달력"
     });
});


Posted by darkhorizon
Trackback 0 Comment 0
JQUERY2011/03/10 11:24

썸네일 이미지 클릭했을 때 본문 이미지 바꾸기

<!-- BODY -->
<div class="online_box">
    <p class="img_theat"><img src="/img/introduction/img_online8_1.jpg" id="divImage"  /></p>
    <ul>
        <li><img src="/online0701_on.gif" alt="" class="btnImage" id="1" style="cursor: hand;" /></li>
        <li><img src="/online0702_off.gif" alt="" class="btnImage" id="2" style="cursor: hand;" /></li>
        <li><img src="/online0703_off.gif" alt="" class="btnImage" id="3" style="cursor: hand;" /></li>
    <  /ul>
</div>


<!-- JQUERY -->

 $('.btnImage').click(function(){
      changeImg();
      var tmpVal = $(this).attr('id');
      $(this).attr('src', $(this).attr('src').replace('off.gif','on.gif'));
      $('#divImage').attr('src', '/img/introduction/img_online8_'+tmpVal+'.jpg');
 }); 
 
    function changeImg(){
      $('.btnImage').each(function(){
        $(this).attr('src', $(this).attr('src').replace('on.gif','off.gif'));
      });
    }
Posted by darkhorizon
Trackback 0 Comment 0
JQUERY2010/08/16 09:50

IE6에서 png 파일 배경 투명하게 만들기


jquery-1.4.2.min.js
jquery.pngFix.js


1.  
...
<script type="text/javascript" src="jquery-latest.pack.js"></script> 
<script type="text/javascript" src="jquery.pngFix.js"></script> 
...

2.
<head> 
... 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script> 
... 
</head>
Posted by darkhorizon
Trackback 0 Comment 0
JQUERY2010/08/06 13:49

JQUERY CHECK BOX 관련 기능 정리

<body>
     <input type="checkbox" id="mod_gb1" name="mod_gb" value="1" class="border-none" /> 이용 <br />
     <input type="checkbox" id="mod_gb2" name="mod_gb" value="2" class="border-none" />  변경 <br />
     <input type="checkbox" id="mod_gb3" name="mod_gb" value="3" class="border-none" />  해지

     <input type="button" id="btn" />
</body>

1. 특정 체크박스 체크 확인

<script>
      $('#mod_gb2').click(function() {
       var ischecked = $('#mod_gb2').attr('checked');
       
       if(ischecked){
           alert("2번이 체크되었습니다.");
       }else{
           alert("2번이 체크되지 않았습니다.");
       }
      });
</script>


2. 체크 박스 전체

$('input[name=mod_gb]:checkbox').click(function() { // name이 mod_gb인 체크박스 그룹의 아무 박스를 선택하면
       var gb1 = $('#mod_gb1').attr('checked');
       var gb2 = $('#mod_gb2').attr('checked');
       var gb3 = $('#mod_gb3').attr('checked');
       if(gb3 && (gb1 || gb2)){
            alert("ID 해지는 다른 항목과 중복 선택하실 수 없습니다.");
            $('#mod_gb3').attr('checked', false);
       }
});

3. 체크박스 선택 유무 확인

$('#btn').click(function(){
    var cnt = $("input[name=mod_gb]:checkbox:checked").length;
    if(cnt < 1){
         alert('한 개 이상을 선택하셔야 합니다');
    }else{
         alert(cnt+'개가 선택되었습니다');
    }
});

4. 체크박스 숫자 확인

  $('#all').click(function() {
      var checkboxCnt = $("input:checkbox").length; // 체크박스 전체 갯수
      var checkYn = $('#all').attr('checked');
      if(checkYn){
          $('input:checkbox').attr('checked',true);
          $('input:checkbox').attr('disabled',true);
          $('#all').attr('disabled',false);
      }else{
          $('input:checkbox').attr('checked',false);
          $('input:checkbox').attr('disabled',false);
      } 
  }); 


Posted by darkhorizon
Trackback 0 Comment 0
JQUERY2010/05/03 14:26

jQuery Ajax 처리

# 요청하는 쪽

$("#search001").change(function(){
  if(this.value == "") {return;}
  $.post("fax_dbx.jsp", {
branchCode:encodeURIComponent(this.value),deptCode:encodeURIComponent("<%=deptCode%>")},
   function(html){
document.getElementById("deptNm").innerHTML = html;
   }
  );
}); 

<select name="branchCode" id="search001" class="width188">
      <option value="" selected="selected"><%=%></option>
</select>
     
<div id="deptNm" style="display:inline;">
     <select name="deptCode" id="search002" class="width98" title="부서명 선택">
      <option value="">부서명선택</option>
     </select>
</div>

# 요청받는 쪽

StringBuffer sb = new StringBuffer();
sb.append("<select name='deptCode' id='search002' class='width98' title='부서명 선택'>\n");

for (Map orgn : orgnMap) {
 sb.append("<option value='" + (String)orgn.get("ORGN_ID") + "'");
 if (deptCode.equals(orgn.get("ORGN_ID"))) {
  sb.append("selected='selected'");
 }
 sb.append(">" + orgn.get("ORGN_NAME") + "</option>\n");
}
sb.append("</select>");
String html = sb.toString();
%>
<%=html%>

Posted by darkhorizon
Trackback 0 Comment 0
JQUERY2010/05/03 14:14

jQuery select box 구현

* 스크립트 부분
 $('#selectBoard').click(function() {
     var sel_menuId = $("#select002 option:selected").val();
     window.location="paper_lst.jsp?menuId="+sel_menuId;
 }); 


* BODY 부분
 <select id="select002" class="" name="doctorCode">
     <option value="0">의사선택 </option>                          
     <option value="0">------------------</option>
 </select>
Posted by darkhorizon
Trackback 0 Comment 0