'프로그래밍/jQuery'에 해당되는 글 33건

  1. 2012.10.11 간단하게 체크박스 전체체크,체크해제 컨트롤하는법
  2. 2012.07.02 jquery 마우스 우클릭 차단 (1)
  3. 2012.06.13 jquery 이미지 롤링
  4. 2012.06.12 jquery 해당위치로 스크롤 되게 하는 펑션
  5. 2012.05.24 jquery 이미지 마우스 휠 롤링
  6. 2012.01.16 jquery ajax를 이용한 아이디 실시간 중복체크
  7. 2011.12.15 jquery 퀵메뉴 소스
  8. 2011.04.08 [Jquery] Select Box 활용 노하우 (1)
  9. 2011.03.31 jquery getJSON 간단적용방법
  10. 2011.03.02 php4 json_encode
  11. 2011.02.24 jquery 레이어 바탕은 클릭 안되게..
  12. 2011.02.24 jsonp 관련..
  13. 2011.02.24 jquery - select box
  14. 2011.02.24 getJSON 을 활용한 간단한 값 가져오기
  15. 2011.01.19 jquery bgImageTween
  16. 2010.10.18 [jquery] 마우스 오른쪽 버튼, 복사 막기, 드래그 금지(불펌방지)
  17. 2010.10.18 Javascript - Jquery 링크모음
  18. 2010.10.08 jquery lightbox plugin 이미지 겔러리 이쁘게 보이게 하는거 (2)
  19. 2010.07.08 [jQuery 기본 강좌]1-3 jquery 자동완성 autocomplete 기능 쉽게 적용하기 (3)
  20. 2010.07.06 jquery 이용 다중 체크박스 한번에 체크되게, 체크 해지되게 하는 소스
  21. 2010.06.28 jquery jplot 을 이용한 그래프 손쉽게 만들기!
  22. 2010.06.04 [jQuery 기본 강좌]1-2 기본적인 함수의 사용 (4)
  23. 2010.05.07 [jQuery 기본 강좌]1-1 jQuery 사용 (1)
  24. 2010.03.09 jquery - input file '찾아보기' 버튼을 이미지로 바꾸기
  25. 2010.02.04 Jquery 1.4 버전에 추가된 새 기능 15개
  26. 2010.01.30 jquery ui 적용사례 (2)
  27. 2010.01.30 jquery 로그인창
  28. 2010.01.25 jquery select,checkbox 중복체크
  29. 2010.01.25 jquery 유효성검사
  30. 2010.01.25 jquery 테이블 색변경

<script>
$(function(){
 $(".overchk_all").change(function(){
  if($(this).attr('checked') == 'checked'){
   $('.overchk').attr('checked','checked');
  }else{
   $('.overchk').removeAttr('checked');
  }
 });
});
</script>

 

 

<input type="checkbox" name="overchk[]" class="overchk_all"> 전체체크

<br >

 

<input type="checkbox" name="overchk1" class="overchk"> 1

<input type="checkbox" name="overchk2" class="overchk"> 2

<input type="checkbox" name="overchk3" class="overchk"> 3

<input type="checkbox" name="overchk4" class="overchk"> 4

<input type="checkbox" name="overchk5" class="overchk"> 5

 

class 따라서 값이 바뀔때마다 처리해주는 거임

ㅇㅇ

 

신고

댓글을 달아 주세요

jquery 마우스 우클릭 차단

Posted by 비회원 프로그래밍/jQuery : 2012.07.02 17:36

스크립트로 했을땐 알툴바로 뻥뻥 뚫리지만

이건 그나마 알툴바는 막는듯..


<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script>
$(document).ready(function(){
 $(document).bind("contextmenu", function(e) {
  return false;
 });
});
$(document).bind('selectstart',function() {return false;});
$(document).bind('dragstart',function(){return false;});
</script>

신고

댓글을 달아 주세요

  1. 2012.09.04 15:41 신고 BlogIcon 하늘과 나  댓글주소  수정/삭제  댓글쓰기

    이거 고민하고 있었는데 님의 글대로 하니 막아지네요
    감사합니다^^

jquery 이미지 롤링

Posted by 비회원 프로그래밍/jQuery : 2012.06.13 10:26

 <style>
   ul {list-style-type:none;margin:0;padding:0;}
   li {margin:0;padding:0;}
   div.gallery_rolling .arrow_prev {position:relative;left:-80;width:15px;height:35px;cursor:pointer;z-index:1;}
   div.gallery_rolling .arrow_next {position:relative;left:1080px;width:15px;height:35px;cursor:pointer;z-index:1;}
   div.gallery_rolling div.carrousel_box {position:relative;top:0px;left:0px;overflow:hidden;width:434px;}
   div.gallery_rolling li {float:left; width:1200px; height:621px;}
  </style>
<script src="/pps/js/jquery.rolling.js" type="text/javascript"></script>
<script>
  jQuery(function($){
    $("div.gallery_rolling").gallery_rolling();
  });
  </script>
</head>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <!--jpmain_content1.2.3 회살표로 롤링-->
          <td width="1200" height="621">
   
    <DIV class=gallery_rolling>
      <SPAN class=arrow_prev><img src="/pps/images/leftbt.png" width="58" height="90"></SPAN>
    <SPAN class=arrow_next><img src="/pps/images/rightbt.png" width="58" height="90"></SPAN>
     <DIV class=carrousel_box>
      <UL>
     <LI>
       <DIV class=img_box><img src="/pps/images/jpmain_content1.jpg"  width="1200" height="621"> </DIV>
       </LI>
     <LI>
       <DIV class=img_box><img src="/pps/images/jpmain_content2.jpg"  width="1200" height="621"> </DIV>
       </LI>
     <LI>
       <DIV class=img_box><img src="/pps/images/jpmain_content3.jpg"  width="1200" height="621"> </DIV>
       </LI>
     </UL>
     </DIV>
    </DIV>
    </td>
        </tr>
      </table></td>
  </tr>
</table>

jquery-1.7.2.min.js

 

jquery.rolling.js

신고

댓글을 달아 주세요

<center><img id="img001" border="0" src="http://elogin.co.kr/event/images/120612_c.jpg" width="600" height="1088"></center>

<center><img id="img002" border="0" src="http://www.elogin.co.kr/eboard/elogin_images/sub_img/msoffice/ms3.jpg" width="580" height="2835"></center>

<center><img id="img003" border="0" src="http://elogin.co.kr/event/images/popup_20120321.jpg" width="550" height="626"></center>


<script>
$(function(){
var target_id='#img001';
$('body, html').css('scrollTop', $(target_id).offset().top);
$('body, html').animate({ scrollTop: $(target_id).offset().top }, 1000);
window.scrollTo(0, $(target_id).offset().top);
});
</script>

 

신고

댓글을 달아 주세요

jquery 이미지 마우스 휠 롤링

Posted by 비회원 프로그래밍/jQuery : 2012.05.24 15:08

 

 

cloud-carousel.1.0.5.js

 

jquery-1.7.2.min.js


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="jquery.mousewheel.js"></script>
<script type="text/JavaScript" src="cloud-carousel.1.0.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#actela_main").CloudCarousel( {
  reflHeight: 0,
  reflGap:1,
  buttonLeft: $('#but1'),
  buttonRight: $('#but2'),
  yRadius:-50,
  xPos: 625,
  yPos: 55,
  speed:0.15,
  autoRotate: 'yes',
  autoRotateDelay: 2000,
  mouseWheel:true
 });
});
</script>

<div style="position:absolute; width:1250px;top:200px; z-index:9">
 <div style="float:left; top:100px;"><img src="slide_arr1.png" id="but1" name="but1" style="cursor:hand"></div>
 <div style="float:right;"><img src="slide_arr2.png" id="but2" name="but2" style="cursor:hand"></div>
</div>

<div id="actela_main" style="width:1200; height:390px; ">
 <a href="#"><img class="cloudcarousel" src="./img/1.jpg" border="0"/></a> 
 <a href="#"><img class="cloudcarousel" src="./img/2.jpg" border="0"/></a>
 <a href="#"><img class="cloudcarousel" src="./img/3.jpg" border="0"/></a>
</div>

 

신고

댓글을 달아 주세요


ㅇㅇ
이름은 거창하다만..

받는페이지--join_chk.php
<?
include "../_inc/_common.php";
include $RSC_BOARD['PATH']."_inc/_base_top.php";

$Ajax_return="none";
if($_POST['id']){
 if(strlen($_POST['id'])<=4){
  $Ajax_return="short";
 }else if(strlen($_POST['id'])>16){
  $Ajax_return="long";
 }else{
  $member_is_qry ="select * from ".$DB_TABLES['MEMBER_TABLE']." where id='".$_POST['id']."'";
  $member_is_res = $DB->query($member_is_qry);
  $MEMBER_CNT = $DB->db_count($member_is_res);

  if($MEMBER_CNT==0){
   $Ajax_return="true";
  }else{
   $Ajax_return="false";
  }
 }
}

echo $Ajax_return;
?>





보내는 페이지---join.php

<script>
$(document).ready(function(){
 $('#id').keyup(function(){
  $.ajax({
   type:"POST",        //POST GET
   url:"../06/join_chk.php",     //PAGEURL
 //  dataType: "html",       //HTML XML SCRIPT JSON
   data : ({id: $("#id").val()}),
   timeout : 30000,       //제한시간 지정
   cache : false,        //true, false
   success: function whenSuccess(args){  //SUCCESS FUNCTION
    $("#idchk_commit").val("");
    switch(args){
     case("true"):
      show_args="<font color='blue'>사용 가능합니다.</font>";
      $("#idchk_commit").val("Y");
     break;
     case("false"):
      show_args="<font color='red'>이미 사용중인 아이디 입니다.</font>";
     break;
     default:
     case("none"):
      show_args="<font color='red'>아이디를 입력 해주세요.</font>";
     break;
     case("short"):
      show_args="<font color='red'>아이디는 4자 이상으로 입력 해주세요.</font>";
     break;
     case("long"):
      show_args="<font color='red'>아이디는 16자 미만으로 입력 해주세요.</font>";
     break;
    }
    $('#resultDIV').html(show_args);
   },
   error: function whenError(e){    //ERROR FUNCTION
    alert("code : " + e.status + "\r\nmessage : " + e.responseText);
   }
  });
 });
});
</script>


<input type="hidden" name="idchk_commit" id="idchk_commit" value="" validate="null,아이디">
<input type="text" name="id" id="id" class="input_text j_id" maxlength="20" validate="null,아이디">
<div id="resultDIV"><font color='red'>아이디를 입력 해주세요.</font></div>

신고

댓글을 달아 주세요

jquery 퀵메뉴 소스

Posted by 비회원 프로그래밍/jQuery : 2011.12.15 11:15


<!--
############주의사항###########
1.상단에 jquery import 시켜야함
-->
<div id='quick' style='position:absolute;z-index:2;top:0;width:100px;'>
<!--센터정렬인 경우 LEFT:expression(((document.body.clientWidth-1000)+Math.abs(document.body.clientWidth-1000))/4+720);-->
<!--아닌경우 LEFT:0-->
퀵메뉴
</div>

<script type="text/javascript">
var quick_menu = $('#quick');
var default_top = 500; //default 높이
var quick_top = 20;  //스크롤 내렸을때 높이

/* quick menu initialization */
//631
quick_menu.css('top', $(window).height() );
$(document).ready(function(){
 quick_menu.animate( { "top": $(document).scrollTop() + default_top +"px" }, 500 );
 $(window).scroll(function(){
  if($(document).scrollTop()>default_top){
  quick_menu.stop();
  quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 1000 );
  }
 });
});
</script>


출처 : http://ljmgood123.blog.me/143327825

신고

'프로그래밍 > jQuery' 카테고리의 다른 글

jquery 이미지 마우스 휠 롤링  (0) 2012.05.24
jquery ajax를 이용한 아이디 실시간 중복체크  (0) 2012.01.16
jquery 퀵메뉴 소스  (0) 2011.12.15
[Jquery] Select Box 활용 노하우  (1) 2011.04.08
jquery getJSON 간단적용방법  (0) 2011.03.31
php4 json_encode  (0) 2011.03.02

댓글을 달아 주세요

[Jquery] Select Box 활용 노하우

Posted by 비회원 프로그래밍/jQuery : 2011.04.08 17:11

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("select[name=name]").val();

 

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

 

선택된 위치

var index = $("#test option").index($("#test option:selected"));

 

-------------------------------------------------------------------

 

// Add options to the end of a select

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

 

// Add options to the start of a select

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

 

// Replace all the options with new options

$("#selectBox").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option>");

 

// Replace items at a certain index

$("#selectBox option:eq(1)").replaceWith("<option value='2'>Some apples</option>");

$("#selectBox option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

 

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").attr("selected", "selected");

 

// text 값으로 select 하기

$("#selectBox").val("Some oranges").attr("selected", "selected");

 

// value 값으로 select 하기

$("#selectBox").val("2");

 

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

 

// 첫번째 item 삭제

$("#selectBox option:first").remove();

 

// 마지막 item 삭제

$("#selectBox option:last").remove();

 

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

 

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

 

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

 

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

 

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

 

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

 

// Insert an item in after a particular position

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

 

// Insert an item in before a particular position

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

 

// Getting values when item is selected

$("#selectBox").change(function() {

           alert($(this).val());

           alert($(this).children("option:selected").text());

});

신고

댓글을 달아 주세요

  1. 2012.03.28 21:05 신고 BlogIcon 김환  댓글주소  수정/삭제  댓글쓰기

    와우~ 이거 스크랩 해갑니다..
    다른페이지에 몇개도 출처 명시하고 좀 퍼갈께요.. ^^

jquery getJSON 간단적용방법

Posted by 비회원 프로그래밍/jQuery : 2011.03.31 16:46

#############자료 요청페이지
var value='1234';
var _URL ="test.com";
var urlStr = "http://" + _URL + "/location/";
    
$.getJSON(urlStr+"?get=1&code="+value+"&callback=?",
function(data){
 $(data.BODY.ROW).each(function(){
  this.X=parseInt(eval(this.X));
  this.Y=parseInt(eval(this.Y));
 });
});


data로 값 뭉탱이를 가져옴
BODY 내의 ROW 가 반복되는 경우에만 each 를 사용,
반복되지 않는 경우엔 data.BODY.CNT 형태로 가져오면 됨.


#############자료 발송페이지
<?
$return_data='{"VALUE":{"CNT":"1","ROW":[';

$qry_gu_list="select ~~~~~ from ~~~";
$res_gu_list= $DB->query($qry_gu_list);

$i=0;
while($row_gu_list = $DB->fetch_array($res_gu_list)){
 $return_data.=',{"IDX":"'.$row_gu_list[idx].'","NO":"'.$i.'","H_VAL":"'.$row_gu_list[h_name].'","X_VAL":"'.$row_gu_list[xcoord].'","Y_VAL":"'.$row_gu_list[ycoord].'"}';
}
$return_data.=']}}';

$return_data=iconv("euc-kr","UTF-8",$return_data);
//$return_data=json_encode($return_data);
echo $return_data;
?>

db단에서 쿼리 검사 후
위 양식에 맞게끔 보내주는것임
iconv를 통해 utf8 로만 변환시켜 준 후 값을 보내주면 됨.

굳이 json_encode 를 할 필요는 없는득..

쉽져?
><

신고

'프로그래밍 > jQuery' 카테고리의 다른 글

jquery 퀵메뉴 소스  (0) 2011.12.15
[Jquery] Select Box 활용 노하우  (1) 2011.04.08
jquery getJSON 간단적용방법  (0) 2011.03.31
php4 json_encode  (0) 2011.03.02
jquery 레이어 바탕은 클릭 안되게..  (0) 2011.02.24
jsonp 관련..  (0) 2011.02.24

댓글을 달아 주세요

php4 json_encode

Posted by 비회원 프로그래밍/jQuery : 2011.03.02 16:16


5버전부터 지원되는데
다행히도 어떤분이 만들어두신 펑션이 있어서 그대~~로 긁어옴.
쓰다 문제생기면 수정해서 다시 써야징 -.-

출처:http://www.mygony.com/tag/%C6%C1



function json_encode2($data) {
 switch (gettype($data)) {
  case 'boolean':
   return $data?'true':'false';
  case 'integer':
  case 'double':
   return $data;
  case 'string':
   return '"'.strtr($data, array('\\'=>'\\\\','"'=>'\\"')).'"';
  case 'array':
   $rel = false; // relative array?
   $key = array_keys($data);
   foreach ($key as $v) {
    if (!is_int($v)) {
     $rel = true;
     break;
    }
   }

   $arr = array();
   foreach ($data as $k=>$v) {
    $arr[] = ($rel?'"'.strtr($k, array('\\'=>'\\\\','"'=>'\\"')).'":':'').json_encode2($v);
   }

   return $rel?'{'.join(',', $arr).'}':'['.join(',', $arr).']';
  default:
   return '""';
 }
}

신고

'프로그래밍 > jQuery' 카테고리의 다른 글

[Jquery] Select Box 활용 노하우  (1) 2011.04.08
jquery getJSON 간단적용방법  (0) 2011.03.31
php4 json_encode  (0) 2011.03.02
jquery 레이어 바탕은 클릭 안되게..  (0) 2011.02.24
jsonp 관련..  (0) 2011.02.24
jquery - select box  (0) 2011.02.24
태그 : php4 json_encode

댓글을 달아 주세요

<style>
.layerWindow{ display:none; position:fixed; left:0; top:0; _position:absolute; width:100%; height:100%; z-index:100;}
.layerWindow.open{ display:block;}
.layerWindow .modalWindow{ display:block; position:fixed; border:0; left:0; top:0; _position:absolute; width:100%; height:100%; background:#000; opacity:.3; filter:alpha(opacity:30);}
.layerWindow .loginLayer{ position:absolute; width:289px; top:10px; left:40%; padding:0px; border:2px solid #cccccc; margin:0 0 0 -175px; background:#fff;}

</style>
<script type="text/javascript" src="../jquery/jquery-1.4.3.min.js"></script>

<a href="#layerWindow" onclick="jQuery('#layerWindow').css('display','block');">눌러봐요</a>
<!-- layerWindow 고객센터 -->
<div id="layerWindow" class="layerWindow">
<!-- class="layerWindow" | class="layerWindow open" -->
 <span class="modalWindow"></span>
 
 <div id="loginLayer" class="loginLayer loginTypeA">


 <table width="400" height="220" border="0" cellspacing="3" cellpadding="4" bgcolor="#c26cc1">
  <tr>
   <td align="center" valign="top" bgcolor="#ffffff">
    <table width="360" border="0" cellspacing="0" cellpadding="0">
     <tr>
      <td height="15"></td>
     </tr>
     <tr>
      <td height="60" align="center" bgcolor="#fdf4fd">바탕화면에 있는건 안눌려요</td>
     </tr>
     <tr>
      <td height="30" align="right" valign="bottom">
      <a onclick="document.getElementById('layerWindow').style.display='none'" style="cursor:hand">닫기</a>&nbsp;</td>
     </tr>
   </table></td>
  </tr>
 </table>
 </div>
</div>
<!-- /layerWindow -->

신고

'프로그래밍 > jQuery' 카테고리의 다른 글

jquery getJSON 간단적용방법  (0) 2011.03.31
php4 json_encode  (0) 2011.03.02
jquery 레이어 바탕은 클릭 안되게..  (0) 2011.02.24
jsonp 관련..  (0) 2011.02.24
jquery - select box  (0) 2011.02.24
getJSON 을 활용한 간단한 값 가져오기  (0) 2011.02.24

댓글을 달아 주세요

jsonp 관련..

Posted by 비회원 프로그래밍/jQuery : 2011.02.24 17:40

JSON은 다들 아시리라 생각하는 상태에서 이야기를 풀어나가도록 하겠습니다.
혹시 모르는 분들을 위한 Wiki 링크!

장점 많은 JSON의 문제가 있었으니, 다른 도메인으로는 자료를 못 보낸다는 것....
근데 써 보니까, IE에서는 되더군요 FF에서만 다른 도메인으로 못 보내더라구요~ (다른 브라우저는 안해봤어요)
JSONP는 다른 도메인으로 JSON 데이터를 보내기 위한 방법이라고 합니다!

여튼 그래서 FF를 위해서 JSONP를 써 보기로 했습니다.
마침 jQuery 1.2 이상 버전 부터 JSONP를 지원한다고 하길래~ 아싸! 라고 했습니다 ㅋ

자료를 송신해 주는 쪽과 수신해 주는 쪽 모두 코드 수정이 필요하구요~
JSONP를 이용한 통신으로 변경한 경우에는, JSON 방식으로는 수신이 불가능 합니다.

송신측(PHP)
기존: echo json_encode($arr);
변경후: echo $_GET['callback'].'('. json_encode($arr).');';
송신측에는 callback을 받아서 JSON 데이터를 괄호로 묶고 그 앞에 붙여준게 다구요~

수신측(jQuery)
기존: $.getJSON('http://domain.com/abcd.php','keyword='+encodeURIComponent(keyword),function(data){});
변경후: $.getJSON('http://domain.com/abcd.php','keyword='+encodeURIComponent(keyword)+'&callback=?',function(data){});
수신측에서는 callback=? 라고 적어서 보내주기만 하면 됩니다.

이제 크로스 도메인 크로스 브라우저로 JSON을 이용하면 되죠! ㅋㅋ
신고

'프로그래밍 > jQuery' 카테고리의 다른 글

php4 json_encode  (0) 2011.03.02
jquery 레이어 바탕은 클릭 안되게..  (0) 2011.02.24
jsonp 관련..  (0) 2011.02.24
jquery - select box  (0) 2011.02.24
getJSON 을 활용한 간단한 값 가져오기  (0) 2011.02.24
jquery bgImageTween  (0) 2011.01.19
태그 : jsonp 관련..

댓글을 달아 주세요

jquery - select box

Posted by 비회원 프로그래밍/jQuery : 2011.02.24 16:06

jQuery로 선택된 값 읽기
$("#myselect option:selected").val();
$("select[name=name]").val();

 

jQuery로 선택된 내용 읽기
$("#myselect option:selected").text();

 

선택된 위치
var index = $("#test option").index($("#test option:selected"));

-------------------------------------------------------------------


// Add options to the end of a select
$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");

 

// Add options to the start of a select
$("#myselect").prepend("<option value='0'>Before Apples</option>");

 

// Replace all the options with new options
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");

 

// Replace items at a certain index
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

 

// 지정된 index 값으로 select 하기
$("#myselect option:eq(2)").attr("selected", "selected");

 

// text 값으로 select 하기
$("#myselect").val("Some oranges").attr("selected", "selected");

 

// value 값으로 select 하기
$("#myselect").val("2");

 

// 지정된 인덱스 값의 item 삭제
$("#myselect option:eq(0)").remove();

 

// 첫번째 item 삭제
$("#myselect option:first").remove();

 

// 마지막 item 삭제
$("#myselect option:last").remove();

 

// 선택된 옵션의 text 구하기
alert($("#myselect option:selected").text());

 

// 선택된 옵션의 value 구하기

alert($("#myselect option:selected").val());

 

// 선택된 옵션 index 구하기
alert($("#myselect option").index($("#myselect option:selected")));

 

// SelecBox 아이템 갯수 구하기
alert($("#myselect option").size());

 

// 선택된 옵션 앞의 아이템 갯수
alert($("#myselect option:selected").prevAll().size());

 

// 선택된 옵션 후의 아이템 갯수
alert($("#myselect option:selected").nextAll().size());

 

// Insert an item in after a particular position
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");

 

// Insert an item in before a particular position
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");

 

// Getting values when item is selected
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});

신고

댓글을 달아 주세요


$(document).ready(function(){
 $.getJSON("http://sample.co.kr/1.php",
 function(data){
  $(data.BODY.ROW).each(function(){
//   alert(this.X);
  });

 });
});



위 값은 http://sample.co.kr/1.php 페이지 내에서

"BODY":{"NAME":"이름","ROW":{["X":"1"},{["X":"2"}]

이런구조로 되어있을때

data.BODY.NAME 으로 하면 값을 바로 가져오지만

ROW 안의 반복되는 X 가 있는경우

each 를 통해 반복되는 값들을 가져오게 하는 간단한 거임

근데 까먹을까봐 적음

ㅇㅇ레알..

신고

댓글을 달아 주세요

jquery bgImageTween

Posted by 비회원 프로그래밍/jQuery : 2011.01.19 16:01


자동으로 백그라운드 이미지 바꿔줌.
혹시나 해서 써봣는데
body 안의값을 하게될경우 정렬 틀어짐.. 사이즈도 마찬가지
간혹가다 필요한 경우는 있을듯.


 $(function(){
  $('body').bgImageTween(['../image/online_box_bottom.gif',
                                 '../image/sms.gif',
                                 '../image/admin_bg.jpg'], 3000, 2000 );

 });


난 내가 따로 만들었는데
스무스하게가 안되서 고생중이라능..


 var img_arr=new Array();
 var i=0;

 img_arr[0]="url(../image/online_box_bottom.gif)";
 img_arr[1]="url(../image/sms.gif)";
 img_arr[2]="url(../image/admin_bg.jpg)";

 $(function(){
  imgStart("R");
 });
 function imgStart(tp){
  clearInterval($("body").attr("timer"));
  if(tp == "R"){
   $("body").attr("timer", setInterval("imgChange()", 4000));
  }
 }
 function imgChange(){
  
  $("body").css("background-image", img_arr[i]);
  i++;
  if (i==3)
  {
   i=0;
  }
  return i;
 }



*********01.21 추가
멍청하면 몸이 고생한다더니 그말이 맞는듯..


#bg_img{
 height:100%;
 width:100%;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-position: 50% 0;
 position:absolute;
 z-index:-1;
}
</style>
<script>
 $(function(){
  $('#bg_img').bgImageTween(['../image/online_box_bottom.gif','../image/sms.gif','../image/admin_bg.jpg'], 3000, 2000 );
 });
</script>
<div id="bg_img"></div>

이방법을 통해 제대로 보여지게 설정했음. 쿄쿄

신고

댓글을 달아 주세요

아... 역시 별건 아니고..
클라이언트중 하나가 아우스 오른쪽 버튼이랑 키보드 복사 등등을 막아 컨텐츠를 복사하는것을 막아 달래서..
그거 쉽게 뚫려서 효과 없는데... 하다가 jquery에 비슷한 플러그인 있나 보다가 없어서 이리저리 뒤져보다가 재미난 것들을 두가지를 발견했다.

첫째는 마우스 오른쪽 버튼 감지 하는 플러그인.
둘째는 키보드 단축키 감지 하는 플러그인.

이 둘을 조합하면 먼가 되겠다 싶어서.. 해봤는데 잘된다.. 물론 jquery랑 위 두개의 플러그인을 불러 들여야 하지만 쓸만허다..

  1. $(document).ready( function() {   
  2.   //no mouse right button   
  3.   $("html").rightClick(function(e){}).noContext();   
  4.   //no key   
  5.   $(document).bind('keydown''ctrl+a'function(){return false;}).bind('keydown''ctrl+c'function(){return false;});   
  6.   //no drag   
  7.   $(document).mousedown(function(){$(document).mousemove(function(e){return false;});});   
  8. });  


드래그 금지도 해볼까 싶다가 관련 플러그인도 없고.. 드래그만 되면 머하나? 해서 그냥 뒀다.. 사실 드래그 해서 바탕화면에 놓기라든지, 메뉴를 이용한 저장이라던지.. 하려면 하겠지만 서두... 귀찮아서 안하는 사람도 많을거 같고..
 이거 때문에 jquery랑 플러그인 두개를 써야 한다는게 좀 그렇지만.. 아무튼 쓸만..

부탁 받은 사이트는 이렇게 그냥 다 함께 써버린다.. jquery는 덩치가 크니까 따로 불러서.. 복사해서 걍써도 잘될것이다..
 
  1. /*mouseR button***************************************************************/  
  2. if(jQuery) (function(){$.extend($.fn, {rightClick: function(handler) {$(this).each( function() {$(this).mousedown( function(e) {var evt = e;$(this).mouseup( function() {$(this).unbind('mouseup');if( evt.button == 2 ) {handler.call( $(this), evt );return false;} else {return true;}});});$(this)[0].oncontextmenu = function() {return false;}});return $(this);},rightMouseDown: function(handler) {$(this).each( function() {$(this).mousedown( function(e) {if( e.button == 2 ) {handler.call( $(this), e );return false;} else {return true;}});$(this)[0].oncontextmenu = function() {return false;}});return $(this);},rightMouseUp: function(handler) {$(this).each( function() {$(this).mouseup( function(e) {if( e.button == 2 ) {handler.call( $(this), e );return false;} else {return true;}});$(this)[0].oncontextmenu = function() {return false;}});return $(this);},noContext: function() {$(this).each( function() {$(this)[0].oncontextmenu = function() {return false;}});return $(this);}});})(jQuery);   
  3. /*****************************************************************************/  
  4.   
  5. /*hotkey**********************************************************************/  
  6. (function(jQuery){jQuery.fn.__bind__=jQuery.fn.bind;jQuery.fn.__unbind__=jQuery.fn.unbind;jQuery.fn.__find__=jQuery.fn.find;var hotkeys={version:'0.7.9',override:/keypress|keydown|keyup/g,triggersMap:{},specialKeys:{27:'esc',9:'tab',32:'space',13:'return',8:'backspace',145:'scroll',20:'capslock',144:'numlock',19:'pause',45:'insert',36:'home',46:'del',35:'end',33:'pageup',34:'pagedown',37:'left',38:'up',39:'right',40:'down',109:'-',112:'f1',113:'f2',114:'f3',115:'f4',116:'f5',117:'f6',118:'f7',119:'f8',120:'f9',121:'f10',122:'f11',123:'f12',191:'/'},shiftNums:{"`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*","9":"(","0":")","-":"_","=":"+",";":":","'":"\"",",":"<",".":">","/":"?","\\":"|"},newTrigger:function(type,combi,callback){var result={};result[type]={};result[type][combi]={cb:callback,disableInInput:false};return result;}};hotkeys.specialKeys=jQuery.extend(hotkeys.specialKeys,{96:'0',97:'1',98:'2',99:'3',100:'4',101:'5',102:'6',103:'7',104:'8',105:'9',106:'*',107:'+',109:'-',110:'.',111:'/'});jQuery.fn.find=function(selector){this.query=selector;return jQuery.fn.__find__.apply(this,arguments);};jQuery.fn.unbind=function(type,combi,fn){if(jQuery.isFunction(combi)){fn=combi;combi=null;}   
  7. if(combi&&typeof combi==='string'){var selectorId=((this.prevObject&&this.prevObject.query)||(this[0].id&&this[0].id)||this[0]).toString();var hkTypes=type.split(' ');for(var x=0;x<hkTypes.length;x++){delete hotkeys.triggersMap[selectorId][hkTypes[x]][combi];}}   
  8. return this.__unbind__(type,fn);};jQuery.fn.bind=function(type,data,fn){var handle=type.match(hotkeys.override);if(jQuery.isFunction(data)||!handle){return this.__bind__(type,data,fn);}   
  9. else{var result=null,pass2jq=jQuery.trim(type.replace(hotkeys.override,''));if(pass2jq){result=this.__bind__(pass2jq,data,fn);}   
  10. if(typeof data==="string"){data={'combi':data};}   
  11. if(data.combi){for(var x=0;x<handle.length;x++){var eventType=handle[x];var combi=data.combi.toLowerCase(),trigger=hotkeys.newTrigger(eventType,combi,fn),selectorId=((this.prevObject&&this.prevObject.query)||(this[0].id&&this[0].id)||this[0]).toString();trigger[eventType][combi].disableInInput=data.disableInInput;if(!hotkeys.triggersMap[selectorId]){hotkeys.triggersMap[selectorId]=trigger;}   
  12. else if(!hotkeys.triggersMap[selectorId][eventType]){hotkeys.triggersMap[selectorId][eventType]=trigger[eventType];}   
  13. var mapPoint=hotkeys.triggersMap[selectorId][eventType][combi];if(!mapPoint){hotkeys.triggersMap[selectorId][eventType][combi]=[trigger[eventType][combi]];}   
  14. else if(mapPoint.constructor!==Array){hotkeys.triggersMap[selectorId][eventType][combi]=[mapPoint];}   
  15. else{hotkeys.triggersMap[selectorId][eventType][combi][mapPoint.length]=trigger[eventType][combi];}   
  16. this.each(function(){var jqElem=jQuery(this);if(jqElem.attr('hkId')&&jqElem.attr('hkId')!==selectorId){selectorId=jqElem.attr('hkId')+";"+selectorId;}   
  17. jqElem.attr('hkId',selectorId);});result=this.__bind__(handle.join(' '),data,hotkeys.handler)}}   
  18. return result;}};hotkeys.findElement=function(elem){if(!jQuery(elem).attr('hkId')){if(jQuery.browser.opera||jQuery.browser.safari){while(!jQuery(elem).attr('hkId')&&elem.parentNode){elem=elem.parentNode;}}}   
  19. return elem;};hotkeys.handler=function(event){var target=hotkeys.findElement(event.currentTarget),jTarget=jQuery(target),ids=jTarget.attr('hkId');if(ids){ids=ids.split(';');var code=event.which,type=event.type,special=hotkeys.specialKeys[code],character=!special&&String.fromCharCode(code).toLowerCase(),shift=event.shiftKey,ctrl=event.ctrlKey,alt=event.altKey||event.originalEvent.altKey,mapPoint=null;for(var x=0;x<ids.length;x++){if(hotkeys.triggersMap[ids[x]][type]){mapPoint=hotkeys.triggersMap[ids[x]][type];break;}}   
  20. if(mapPoint){var trigger;if(!shift&&!ctrl&&!alt){trigger=mapPoint[special]||(character&&mapPoint[character]);}   
  21. else{var modif='';if(alt)modif+='alt+';if(ctrl)modif+='ctrl+';if(shift)modif+='shift+';trigger=mapPoint[modif+special];if(!trigger){if(character){trigger=mapPoint[modif+character]||mapPoint[modif+hotkeys.shiftNums[character]]||(modif==='shift+'&&mapPoint[hotkeys.shiftNums[character]]);}}}   
  22. if(trigger){var result=false;for(var x=0;x<trigger.length;x++){if(trigger[x].disableInInput){var elem=jQuery(event.target);if(jTarget.is("input")||jTarget.is("textarea")||jTarget.is("select")||elem.is("input")||elem.is("textarea")||elem.is("select")){return true;}}   
  23. result=result||trigger[x].cb.apply(this,[event]);}   
  24. return result;}}}};window.hotkeys=hotkeys;return jQuery;})(jQuery);   
  25. /*****************************************************************************/  
  26.   
  27. $(document).ready( function() {   
  28.   //no mouse right button   
  29.   $("html").rightClick(function(e){}).noContext();   
  30.   //no key   
  31.   $(document).bind('keydown''ctrl+a'function(){return false;}).bind('keydown''ctrl+c'function(){return false;});   
  32.   //no drag   
  33.   $(document).mousedown(function(){$(document).mousemove(function(e){return false;});});   
  34. });  
 
2009/10/27 드래그 금지기능 추가..
사실 기존 이벤트로는 금방 뚫려서 시도 해보지도 않았었는데 jquery이벤트로 처리 하니까 안풀리더라... 한줄 추가 했을뿐인데 말이지..
요거 잼나는데.. 조만간 플러그인 두개 없애 버보리고 통합된기능으로 새도해 볼까 싶다..
그리고 브라우저별로 문제가 있는데..
IE 6, 7, 8 : 마우스 O, 키보드 O, 드래그 O,  모두 잘된다..
Chrome     : 마우스 O, 키보드 O, 드래그 O,  모두 잘된다..
Firefox    : 마우스 O, 키보드 O, 드래그 X, 드래그 방지 기능 안된다..
Safari     : 마우스 O, 키보드 O, 드래그 O,  모두 잘된다..
Opera      : 마우스 X,  키보드 X, 드래그 X,  모든기능 안된다.(아무튼 오페라.. 별나..)

yesClick이나 Spell,IEToy 그리스몽키로도 아직은 못푼다 ㅋㅋ
혹여 이 스크립트를 사용한 곳을 발견한다면 오페라로.. ㅎㅎ

** 2009/12/21
간혹 드래그 금지 기능과 플래시로 드롭다운 메뉴를 만들었을때 상성이 좋지 못한 결과를 가져올때가 있습니다. 그런 경우 드래그 금지는 주석 처리 하고 사용하세요..  그래그 금지 해제 원하는 결과는 얻을 수 있었습니다.





출처 : http://blog.bits.kr/127
신고

댓글을 달아 주세요

Javascript - Jquery 링크모음

Posted by 비회원 프로그래밍/jQuery : 2010.10.18 11:43


[jquery 관련 링크모음]

메뉴얼
http://j2k.naver.com/j2k_frame.php/korean/semooh.jp/jquery/api/events/keydown/fn/

jQuery Grid Plugin
http://www.trirand.com/blog/?page_id=6 (*******)

팬시박스
http://fancy.klade.lv/ (****)

디자이너를 위한 jquery
http://www.webdesignerwall.com/demo/jquery/(****)

그리드
http://www.reconstrukt.com/ingrid/example2.html

http://crepitus.com/misc/ext/tree.html(*****)


AutoScroll
http://jdsharp.us/jQuery/plugins/AutoScroll/demo.php (****)


drag and drop
http://host.sonspring.com/dragdrop/ (***)


http://www.mootools.net/ (자바스크립트 프레임워크)


two PostgreSQL DB의 구조를 비교
http://pgdiff.sourceforge.net/


 테이블 td하이라이팅
http://cssglobe.com/lab/tablecloth/


JQuery메뉴얼
http://docs.jquery.com/Tutorials

 

http://www.ajaxrain.com/tag.php?tag=image&page=1(예제모음 ****)

 

 
일본 자바스크립트
http://www.skuare.net/test/index.html

plain text + edit
http://snipplr.com/view/3147/rollover-images-with-jquery/


지도 하이라이트
http://drupal.org/project/jq_maphilight

단계별 입력(5단계)
http://worcesterwideweb.com/jquery/wizard/

점수 레이팅
http://sandbox.wilstuckey.com/jquery-ratings/

jquery리소스
http://speckyboy.com/2008/07/21/20-amazing-jquery-plugins-and-65-excellent-jquery-resources/


형준님(하위항목까지 dnd)
http://www.bernardopadua.com/nestedSortables/test/widget/
 

 
판매/재고/주문/배달 인터넷 재고관리프로그램
http://www.greenpc.co.kr/sales01/first.html
 

 
체크박스트리(트리메뉴 속에 체크박스 있음)
http://www.blueshoes.org/_bsJavascript/components/tree/examples/example3.html
http://www.blueshoes.org/en/javascript/multilevelselector/
 
폼항목관리
http://www.phpform.org/formbuilder/index.php
http://www.formfields.com/FORMgenArea/FORMgenLite/FORMgen3_0/


 

자동빌더
http://www.scriptcase.net/siteen/home/home.php?rand=8560f8280d329781&rand=2b32008adebb55b5
[ScriptCase 비밀번호] admin/admin
 

 


컬럭 Picker
http://www.intelliance.fr/jquery/color_picker/


jQuery MultiSelect
http://abeautifulsite.net/notebook_files/62/demo/jqueryMultiSelect.html


"jQuery checkbox v.1.0.0" demo
http://widowmaker.kiev.ua/checkbox/

 

jQuery Treeview Plugin Demo
http://jquery.bassistance.de/treeview/demo/

 

jQuery columnManager plugin
http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html

 


Example: Demo of jQuery fadeToggle plugin in action
http://yelotofu.com/labs/fade-toggle/

 


jQuery AIR
http://www.digital-web.com/extras/jquery_crash_course/


Masked Input Plugin
http://digitalbush.com/projects/masked-input-plugin


Watermark Input Plugin
http://digitalbush.com/projects/watermark-input-plugin

 

PHP & JQuery Photo Upload and Crop - DEMO
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

 

jCarousel
http://www.gmarwaha.com/jquery/jcarousellite/index.php

 



 

jquery.xslTransform  Perform browser-based XSL transformations on the fly.
http://jquery.glyphix.com/


clueTip : A jQuery Plugin
http://examples.learningjquery.com/62/demo/


jQuery sliding gallery demo
http://phplug.net/components/javascript/jquery-gallery.html

 

ClockPick
http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm

 

jQuery File Tree Demo
http://abeautifulsite.net/notebook_files/58/demo/

 

jQuery Lightbox Plugin (balupton edition)
http://www.balupton.com/sandbox/jquery_lightbox/


imagebox
http://www.intelliance.fr/jquery/imagebox/


phpImageCloud jquery example.
http://phpimagecloud.sourceforge.net/examples/jquery/


chart
http://www.reach1to1.com/sandbox/jquery/jqchart/


슬라이드컨텐츠
http://thizzdesigns.110mb.com/coda/index.html#1

달력
http://tedserbinski.com/jcalendar/index.html#demo

 

3D로테이션
http://www.willjessup.com/sandbox/jquery/rotator/rotator.html


그리드
http://checkyourroster.com/testing/jQuery%20grid%20demo.htm

 

이모티콘
http://packed.it/JSmile/demo/


prettyPhoto a jQuery lightbox clone
http://www.no-margin-for-errors.com/projects/prettyPhoto/


스크롤중 데이터가져오기
http://www.webresourcesdepot.com/dnspinger/
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/


이미지 슬라이딩
http://www.maxb.net/scripts/ycodaslider-2.0/include/demo/#10


Query Flash Plugin - Basic Example
http://jquery.lukelutman.com/plugins/flash/example-basic.html


메뉴애니메이션
http://www.getintothis.com/pub/projects/rb_menu/

 

Tagging Demo
http://remysharp.com/wp-content/uploads/2007/12/tagging.php

 

JQuery Select Box
http://www.brainfault.com/demo/selectbox/?field1=ddd&myselectbox=3


jquery combobox demo
http://jquery.sanchezsalvador.com/samples/example.htm


그리드
http://reconstrukt.com/ingrid/example1.html

 

jQuery Autocomplete Mod
http://www.pengoworks.com/workshop/jquery/autocomplete.htm


Select combobox below and type in your text.
http://stuff.rajchel.pl/jec/


Select Combo Plugin
http://lasso.pro/selectCombo/


scrollable table
http://www.webtoolkit.info/demo/jquery/scrollable/demo.html

 

accordion-madness
http://www.learningjquery.com/2007/03/accordion-madness

 


jQuery Multimedia Portfolio
http://www.openstudio.fr/jquery/

 

체크박스 이동
http://sanisoft-demo.com/jquery/plugins/shiftcheckbox/demo.html


위지윅에디터
http://projects.bundleweb.com.ar/jWYSIWYG/


크랍
http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#crop


슬라이딩 퍼즐
http://www.bennadel.com/blog/1009-jQuery-Demo-Creating-A-Sliding-Image-Puzzle-Plug-In.htm

 

날짜픽업
http://kelvinluck.com/assets/jquery/datePicker/v2/demo/


레이팅
http://php.scripts.psu.edu/rja171/widgets/rating.php
 

http://www.mind-projects.it/blog/jqzoom_v10

컬러
http://www.jnathanson.com/blog/client/jquery/heatcolor/index.cfm#examples

 


비쥬얼 쿼리(jquery도움말)
http://visualjquery.com/1.1.2.html

 

jQuery "Highlight" Demo(선택된 곳을 하이라이트 시키기)
http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html

 

Hot Key Testing
http://jshotkeys.googlepages.com/test-static.html

 

accordion menu
http://www.i-marco.nl/weblog/jquery-accordion-menu-redux/

 

jQuery easyThumb
http://www.hverven.net/div/easyThumb/


갤러리
http://www.flyerstop.ca/ui/apps/gallery_advanced/

 

thickbox
http://jquery.com/demo/thickbox/

 

마우스휠 플러그인
http://www.ogonek.net/mousewheel/jquery-demo.html
http://www.ogonek.net/mousewheel/demo.html

휴먼메세지
http://binarybonsai.com/misc/humanmsg/

jQuery - LinkedSelect - 3단콤보
http://www.msxhost.com/jquery/linked-selects/json/


jQuery ≫ iFrame Sizing
http://host.sonspring.com/iframe/


jQuery for Designers - Ajax Form Validation Example
http://jqueryfordesigners.com/demo/ajax-validation.php


폰트크기 바꾸기
http://www.lllcolor.com/jQuery/demo/demo01b.html


dimension - 사이즈 체크
http://brandonaaron.net/docs/dimensions/#code-samples


portlet 데모 - 항목이동
http://www.rymix.co.uk/jquery/d15/sortables2.html


FX데모- jquery의 다양한 이동
http://magalies.net/downloads/Jquery/Interface%20examples/demos/ifx.html#pulsate-fx


오픈윈도우
http://magalies.net/downloads/Jquery/Interface%20examples/demos/windows.html


JQuery tricks: using Greybox + form plugin for a modal dialog box
http://corky.net/dotan/programming/jquery.dialog/dialog-demo.html

 

FaceBoox style autosuggest with jQuery
http://web2ajax.fr/examples/facebook_searchengine/


Auto-Growing Textarea Demo
http://www.aclevercookie.com/demos/autogrow_textarea.html


jQuery Helper for Komodo Media CSS Star Rater (Redux)
http://www.m3nt0r.de/devel/raterDemo/


에디터
http://avidansoft.com/dsrte/

 

jQuery Keyboard Navigation Plugin
http://amountaintop.com/project/keynav/


http://jqueryfordesigners.com/demo/tabs.html


jQuery AccessKey Demo
http://methvin.com/jquery/jq-access.html


Semi-transparent rollover effect using jQuery
http://coderseye.com/files/demos/pngrollover/index.html


Revealing Photo Slider
http://css-tricks.com/examples/RevealingPhotoSlider/


Simple jQuery form validation
http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html


after callback demo
http://jsdesigning.com/gal/gal.php?top=10&id_pic=9&id_album=2
 

갤러리
http://devkick.com/lab/galleria/demo_01.htm#img/ladybug.jpg

 

SWF Upload
http://www.alexandremagno.net/blog/wp-content/uploads/swfupload/index.htm

jQuery gradient - Visual Test
http://brandonaaron.net/jquery/plugins/gradient/test/


tEditable :: In place table editing for jQuery
http://joshhundley.com/teditable/index.html

 
sort - 여러개의 위치를 자유자재로 옮김
http://interface.eyecon.ro/demos/sort.html

 
매우유용한 10개의 jquery플러그인
http://www.nalanta.com/node/7


하이라이트와 Plain Text를왔다갔다.
http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps


jquery 그리드 예제
http://www.trirand.com/blog/?page_id=5

 
웹디자인 포트폴리오
http://www.chazzuka.com/Portofolio/



5개를 두고 이동하기
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.sortable.html

 
jQuery Coda Slider
http://jqueryfordesigners.com/coda-slider-effect/


이미지 줌
http://benjaminsterling.com/jquery-jqgalview-photo-gallery/ (jquery)
http://www.flashimagegallery.com/pics/artwork/ (플래시)


이미지 줌
http://www.mind-projects.it/blog/jqzoom_v10


jquery챠트
http://www.reach1to1.com/sandbox/jquery/jqchart/


플래시무비 플러그인
http://jquery.lukelutman.com/plugins/flash/


lightbox
http://leandrovieira.com/projects/jquery/lightbox/


date picker
http://marcgrabanski.com/code/ui-datepicker/



37개의 jquery플러그인
http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html


튤팁을 자유자재로하기
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery



슬라이드뷰어
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html



jquery.xslTransform - XSLT / 탭 / 디버그
http://jquery.glyphix.com/



light-box
http://www.balupton.com/sandbox/jquery_lightbox/


챠트
http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/


캐로셀(jquery)
http://sorgalla.com/projects/jcarousel/


아코디언메뉴
http://designreviver.com/tutorials/jquery-examples-horizontal-accordion



3*3에서의 위치이동(jquery)
http://host.sonspring.com/portlets/


jQuery Tutorials for Designers - 디자이너를 위한 jquery 튜토리얼
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/



비행기예약 인터페이스
http://www.digital-web.com/extras/jquery_crash_course/

 


드루팔모듈
http://drupalmodules.com/module/image-enhanced-scaling


드루팔 - 오픈소스 CMS
Drupal.org is the official website of Drupal, an open source content management platform.
http://drupal.org/

ajax관련 도서모음
http://www.ajaxdaddy.com/store

 

모든 자바스크립트 예제모음
http://www.ajaxrain.com/tag.php?tag=image&page=2(모음)

jquery모음
http://www.blinklist.com/codearachnid/jquery/

jquery예제모음
http://www.spicyexpress.net/general/jquerry-at-it-best-downloadable-jquerry-plugins-and-widgets-for-you-2/(예제모음)




출처 : http://ysksoft.textcube.com/2
신고

댓글을 달아 주세요


jquery lightbox plugin
http://leandrovieira.com/projects/jquery/lightbox/


샘플에는 타겟 지정 시
  $('a[@rel*=lightbox]').lightBox({fixedNavigation:true});

이런 형태로 지정하게 되어있는데 위와같이 하게되면

jquery 특정버전 이후로는 셀렉터에 약간 차이가 있어 오류가 발생하게 된다.

갤러리 화 시킬 이미지의 rel 값 잡은것을 attr("rel","lightbox") 로 옵션을 잡거나

class를 lightbox 형태로 줘서 상단에서 맞게끔 셀렉트 해주면 정상적으로 사용가능함.

좋쿤



lightbox 기존건 prototype을 사용해서 jquery와는 같이 쓸수가 없었는데

jquery용으로 나온 lightbox가 있긴 하다

근데 단점은 2008년이후로 업데이트 한것이 없어서

최신버전 jquery1.4.2 에선 제대로 적용이 되질 않고

초창기 jquery1.2.3 에서만 적용이 가능하다.


신고

댓글을 달아 주세요

  1. 2010.10.14 11:52 신고 손님입니다.  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 jquery 검색도중 방문하게 되었습니다.
    위에서 언급하신 jquery lightbox plugin는 1.4.2버전에서도 사용가능 합니다. ^^;
    혹시나 다른 분들이 보시고 오해하실까 해서 댓글 남깁니다~

    • BlogIcon 제부도소년 2010.10.14 17:51 신고  댓글주소  수정/삭제

      제가 테스트 하기로는 오류가 났었는데
      제가 작업한 소스상에 문제가 있었나보네요..
      혹시 나중에 방문 하시게 되면
      참고 가능한 주소나 소스 알려주시면 감사하겠습니다
      수고하세여~


 


네이버나 포탈사이트 등을 방문 하다보면 위와같이

앞글자 혹은 중간글자만 쳐도 나머지 글자들이 나오는 화면을 볼수있는데

이를 자동완성기능 혹은 autocomplete 라고 한다..

기본적으로 브라우저내에서 자동완성기능을 지원하긴 하지만

DB와 연동해서 뿌려주는 기능은 별도 제작을 해야한다.

캐릭터셋이 utf-8 이냐 euc kr 이냐에 따라서도 사용방법이 약간은 다르다.

아래는 간단한 예제와 샘플파일이다.


위 파일은 autocomplete 기능을 사용하게 해주는 plug in 이며

jquery.com 의 plugins 에서도 다운이 가능하다.

우선 jquery 스크립트를 넣어준 뒤 위 플러그인을 삽입해주면 된다.

<?include "data_js.php";?>

<SCRIPT type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="./autocomplete/jquery.autocomplete.css"/>
<script type="text/javascript" src="./autocomplete/jquery.autocomplete.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 $("#search").autocomplete(goods,{
  matchContains: true
 });
});
</script>

<input type="text" id="search" autocomplete="off">

* 상세소스는 http://jaweb.co.kr/jstudy/18.php 접속후 소스보기하면 다 나오는데
위의 소스만으로도 구동에는 전혀 문제가 없다.


위 내용은 search 라는 id 필드는 autocomplete 기능을 사용할 것이고

데이터는 goods 데이터를 기반으로 내용중 일부라도 맞는경우 (matchContains: true)

보여지게 하겠다는 속성이다.

데이터(goods)를 가져올때는 여러가지 방법이 있는데

난 DB에서 데이터 이용방법과 js 파일 생성방식 두가지로 선택했다.


data_js.php 파일은  단순하게 파일내에 입력을 하게되면 알아서 적용된다. (내용이 간단하니 파일을 참고하면 좋다.)


data_db.php 파일은 db셋팅이 되어있는 파일내에서 어느부분인지를 선택 한 뒤 작업을 해주면 된다.

헌데 소스내용을 보면 굳이 urlencode 를 해서 array_push로 배열안에 값을 넣고

실제 뿌려줄때는 urldecode 를 해서 json 방식으로 다시 인코딩 한 뒤 값을 뿌려준다.

urlencode 의 사용목적은 바로 한글문제..

utf-8 환경에선 urlencode 없이도 무리없이 정상작동 하지만

euckr 환경에선 글씨가 깨져서 들어가거나

null값으로 출력이되어 오류가 나게 된다.


그럴때 json으로 인코딩을 하기 전 urlencode 로 한번 인코딩을 해주고

실제 뿌려줄때 decode를 안하게되면 %45%D 이런식으로 문자가 깨져서 보이기에

글씨 깨짐을 방지하기 위해서 위와같이 작업을 한것이다.


autocomplete 플러그인 내에서는 지원하는 기능이 내가 설명한 정도보다는 훨씬 많다.

줄에 맞춰서 값을 가져오거나

key값에 따라 값을 뿌려주는 기능...

이미지를 이용 출력해는 기능 등~   (참고 : http://jaweb.nayana.com/search.php   우측상단 펫 검색란에 1,2 등을 치거나 펫 이름을 치면 결과가 나오는데.. jquery 처음 배울때 작업한 것이라 소스가 상당히 조잡한 편이다.)

쓸데가 상당히 많아보이는 플러그인이니 공부할때 참고하면 좋을 것 같다.



신고

댓글을 달아 주세요

  1. 2010.07.30 11:28 신고 musicbar  댓글주소  수정/삭제  댓글쓰기

    자세한 정리글 잘 읽었습니다.
    오늘 검색어자동완성 기능을 개발해야 했는데, 보다 쉽게 접근할 수 있을거 같습니다.

  2. 2012.08.29 19:28 신고 BlogIcon 뽀국  댓글주소  수정/삭제  댓글쓰기

    설명이 정말 자세하네요. 예제도 완전 좋고요!
    제발 한 방에 됐으면 좋겠습니다. ^^...
    항상 다른사람 한걸 보고 하는제가 조금 부끄럽네요.
    도전~~ ^^.

방금 일하다 짠 소슨데

전체체크 클릭시 확인을 누르면 해당 라인이 전체 선택되고

다시 한번 클릭하고 확인을 누르면 해당라인이 전체 체크해제 된다.

라인이 아래와 같이 일렬로 되어있는 출석부나, 납부내역 같은 걸 사용할때 유용하게 쓰일득.

script로 해도 충분히 가능한건데..
jquery의 selector 사용에 익숙해져보려고 억지로 짜맞춘ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

input[name='all_chk_month'] 는 input 타입 중 name 값이 all_chk_month 인것을 말하는것이고

$(this).attr("checked") 은 클릭한것의 속성값 중 checked 값을 검사하는건데

아래와 같이 하게되면
if($(this).attr("checked") ){    --> 이부분에서 checked == true 인거냐고 자동적으로 해석하게 된다.
 //결과
}

var frm=$(this).val();    는 내가 전체체크 대상의 value 값을 해당라인 폼 이름값으로 잡아놔서 frm으로 잡은거고

$("."+frm).attr("checked","");    는 나머지 쩌리 체크박스들의 class 를 폼이름으로 잡았기 때문에

해당 전체체크박스에 속해있는 하부 체크박스들 중 class가 폼이름과 같은것만 checked를 false 로 만들어주는것임.



<script>
 $(document).ready(function(){
  $("input[name='all_chk_month']").click(function(){
   var frm=$(this).val();

   if($(this).attr("checked")){
    if(confirm("확인을 누르면 해당라인이\n전체 선택 됩니다.")){
     $("."+frm).attr("checked","checked");
    }else{
     $(this).attr("checked","");
    }
    //alert($(this).val()+' is checked');
   }else{
    if(confirm("확인을 누르면 해당라인이\n선택 취소 됩니다.")){
     $("."+frm).attr("checked","");
    }else{
     $(this).attr("checked","checked");
    }
   }
  });
 });
</script>



      <form name="edit_frm_<?=$i?>" action="in_list_excute.php?<?=$code_var?>" method="post">
      <input type="hidden" name="exe_code" value="edit_ok">
      <input type="hidden" name="no" value="<?=$row_list[idx]?>">
       <tr height="30" bgcolor="<?=$bgcolor?>">
      <td align="center" valign="middle">
       <?=$name?>
       <input type="checkbox" name="all_chk_month" value="edit_frm_<?=$i?>">
      </td>
       <?for($j=1;$j<=12;$j++){?>
        <td align="center" valign="middle">
        <?=$total_month_span[$j]?>
         <input type="checkbox" name="month<?=$j?>" value="Y" <?=$total_month_chk[$j]?> class="edit_frm_<?=$i?>">
         <!--
         <?=$total_month[$j]?>
         -->
        <?=$end_span?></td>
       <?}?>
      <td align="center" valign="middle">
       <input type="image" src="../images/button/modify.gif"></a>
       <a href="javascript:del_function('<?=$code_var?>', <?=$idx?>, <?=$page?>)"><img src="../images/button/delete.gif"></a>
      </td>
       </tr>
      </form>

신고

댓글을 달아 주세요



사용법은 간단하다.

1.jquery 가 있을것
2.jplot 을 다운받을 것
3.데모 소스 참고후 작업할것


1.의 경우 네이버에 jquery 만 쳐도 손쉽게 다운받을 수 있다.

2.


3.데모소스는  압축을 풀고 폴더안을 봐보면 examples 라고 쭉 나와있는데 이곳에 있는걸 실행 시켜 본 후 마음에 드는걸 선택 후 사용하면 된다.

나는 jqplot 폴더를 생성해서 그안에 압축푼 파일을 넣은 후 index.php 를 별도로 만든 뒤 아래와 같은 소스를 삽입했다.
이 소스를 사용하게 되면 examples 폴더 안에 있는 내용들을 목록화시켜서 손쉽게 볼수 있다.
 * php4버전 이상인 경우엔 별도로 php4_scandir 대신 scandir (내장객체)를 이용해서 손쉽게 작업이 가능하다.


<?
function ext_get($value){
 return strtolower(array_pop(explode('.',$value)));
}

function php4_scandir($dir,$listDirectories=false, $skipDots=true) {
    $dirArray = array();
    if ($handle = opendir($dir)) {
        while (false !== ($file = readdir($handle))) {
   if(ext_get($file)=="html"){
    if (($file != "." && $file != "..") || $skipDots == true) {
     if($listDirectories == false) { if(is_dir($file)) { continue; } }
     array_push($dirArray,basename($file));
    }
   }
        }
        closedir($handle);
    }
    return $dirArray;
}
?>
<div id="study">
<?
$study_dir=php4_scandir("./examples");

sort($study_dir);
foreach($study_dir as $key){
 $real_key=$key;
 $file_ext=explode(".",$key);
 if($file_ext[1]=="html"){
  echo "<a href='./examples/".$real_key."' target='_blank'>".$file_ext[0]."</a><br>";
 }
}
?>
</div>



뻘글이 많았는데 상단에 아래와 같이 jquery file들을 인클루드 한 뒤
jqplot 에 대한 파일들도  include 해주면 된다.

<script type="text/javascript" src="../jqplot/jquery-1.3.2.min.js"></script>
<link href="../jqplot/jquery.jqplot.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../jqplot/excanvas.min.js"></script>




실제 사용을 할때에는 아래와 같이
php 프로그램을 이용해서 안의 값들을 별도로 집어넣어줘도 되고
혹은 기본 데모소스를 응용해서 작업해줘도 된다.


  <script type="text/javascript" language="javascript">
 $(document).ready(function(){
  line1 = [
   ['매입 : <?=number_format($T_cnt)?>원', <?=$T_cnt?>],
   ['매출 : <?=number_format($S_cnt)?>원', <?=$S_cnt?>],
   ['반품 : <?=number_format($B_cnt)?>원', <?=$B_cnt?>],
   ['로스 : <?=number_format($L_cnt)?>원', <?=$L_cnt?>]
   ];

  plot2 = $.jqplot('piechart', [line1], {
    title: '일자별 통계',
    seriesDefaults:{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin:8}},
    legend:{show:true, escapeHtml:true}
  });
 });
  </script>


body에는 아래와 같이 위에서 지정한 $.jqplot('piechart',  .... 에 해당하는 id값을 넣은 div를 생성해주고
사이즈를 지정해주면 그 안에 데이터가 들어가게 된다.


<div id="piechart" style="margin-top:20px; margin-left:20px; width:500px; height:400px;"></div>




내 주관적인 생각으론 아래 파일들만 정독해도 jqplot을 사용하는데 큰문제는 없을거같다.

barLinePieStack.html
Unit Sales: Acme Decoy Division  - 봉차트
shadowTests.html
barMissingValues.html

barLinePieStack.html
Pie Chart with Legend and sliceMargin- 원차트

customPieTests.html

pieTest.html

툴팁 포맷
tooltipFormatString.html


신고

댓글을 달아 주세요


우선 jQuery 의 기능들 중 each , append , appendTo , html , hide , size , eq(0) 의 문법사용을 볼것이다.


jQuery는 우선 상단 jQuery 플러그인 삽입
<
SCRIPT type="text/javascript" src="../jquery/jquery-1.4.2.min.js">
</script>


이후
<script language="javascript">
$(function(){
  실행문구
});
와 같은형태로 구성된다.

1. TD 클릭하면 숨기기

   $("td").click(function(){
    $(this).hide();
   }) 

 <table border="1">
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
 </table>

위에서 셀렉트를 할 공간은 $("") 이곳인데
td 가 아닌 css에서 쓰이는 #id 나 .class 명을 적어도 똑같이 적용이 된다.
여기서 말하는 this는 클릭한 것에대한 값이 되며
jQuery 내 존재하는 hide() 펑션에 의해 숨겨지게 된다.


2.전체 p태그를 jq 배열에 담아서 $(jq[배열위치])로 해당배열 위치 찾아서 alert 함

   var jq=$("p");
   alert($(jq[1]).html());

jq 안에 p태그들을 배열로 넣어준다.
이후 jq의 [1]번째 배열의 내용을 alert 해줌.
여기서 html 은 예를들어

  <p>제품1 </p>
  <p>제품2 </p>

위와 같은경우 2번째 p 태그 안의 내용 ( 제품2 )만 출력해준다.


3.body 엘레먼트 내에 해당내용 입력함 - 맨 뒤쪽에 입력됨. 동일한 태그명(아래의 body)가 있는경우 모든 body에 삽입됨

   $("<div><p>Hello,World!</p></div>").appendTo("body");

 <BODY>
testestestsetest
 </BODY>
appendTo 태그는 선택한 body값의 끝부분에 앞에 입력된 내용을 넣어준다.


4. p태그 내의 html 들을 result 안에 넣어서 alert 시킨것임  
주의)var로 생성된 것의 경우 appendTo 가 먹지않음. append 로 할것

   var result="";
   $("p").each(function(){
    result+=$(this).html();
    alert(result);
   })
   $(result).appendTo("#result");    //1
   $("#result").append(result);       //2

  <p>제품1 </p>
  <p>제품2 </p>
 <div id="result"></div>

적용해보면 1번의경우 내용이 먹질않는다..
아무래도 var로 생성한것은 적용이 되지않는것으로 보임.
append 는 appendTo 와 반대로
값을 넣어줄 공간을 지정 후 내용을 입력하면 들어가게 된다.

each는 위와같은 형태로 사용해야 하며 result+=$(this).html(); 이 부분은
맨위에 설정된 p 태그를 this로 html() 을 내용으로 보면됨.

5.each 를 이용한 셀렉트 한것 중 몇번째 배열인지 확인하는법

   var result="";
   var i=0;
   $("p").each(function(i,find){
    result+=$(find).html()+": "+(i+1)+"번째 element\n";
   });
   alert(result);

  <p>제품1 </p>
  <p>제품2 </p>

위에서 i는 자동증가하는 숫자값이 되며
find는 this 개념으로 생각..
result 에서 실제 뿌려질때에는
제품1: 1번째 element\n
제품2: 2번째 element\n
이런 형태로 출력되게 된다.

6.현재페이지에 해당 element가 몇개 있는지 확인할때

   alert("div내에 있는 input 태그의 갯수는 "+$("div input").size()+"개 입니다.");

 <div id="list_box">
  <span>제품리스트</span>
  <p>제품1 </p>
  <p>제품2 </p>
 </div>

 <div id="button_box">
  <input type="button" id="up_click_button" value="올리기">
  <input type="button" id="down_click_button" value="내리기">
 </div>

$("div input") 은 div 내의 input 으로 생각을 하면 된다.
그 후의 .size() 를 통하여 총 몇개의 배열을 받았는지 뿌려주게 되며
결과값은
div내에 있는 input 태그의 갯수는 2개 입니다.
와 같이 뿌려지게 된다.


7.$("element").eq(위치)로 해당 element내의 eq번째 배열을 select


   $("#up_click_button").click(function(){   
    $("#write_box p").eq(0).appendTo("#list_box");
   })
   $("#down_click_button").click(function(){   
    $("#list_box p").eq(0).appendTo("#write_box");
   })

 <div id="list_box">
  <span>제품리스트</span>
  <p>제품1 </p>
  <p>제품2 </p>
 </div>

 <div id="button_box">
  <input type="button" id="up_click_button" value="올리기">
  <input type="button" id="down_click_button" value="내리기">
 </div>

 
 <div id="write_box">
  <span>장바구니</span>
 </div>

태그를 실제 적용해보면 알겠지만
append , appendTo 태그는
복사가 아닌 잘라내기 기능이라고 생각하면 된다.
위 소스는 id가 up_click_button 인걸 click 하게 되면 id가 write_box 인것 안의 p 태그의 [0]번째 배열의 내용을
id가 list_box 라는 곳에 붙여넣겠다는 소스내용이다.

위에서 적용한 샘플소스는 아래에서 열람 가능하다.

http://jaweb.anyhost.co.kr/jstudy/01.php

신고

댓글을 달아 주세요

  1. 2010.06.04 12:58 신고 BlogIcon jojigpog  댓글주소  수정/삭제  댓글쓰기

    내용이너무쉽네요 강사하셔도되겠수멜

  2. 2010.08.12 16:16 신고 gd  댓글주소  수정/삭제  댓글쓰기

    공부해보려고 시작했는데.. 너무 도움이 많이 될듯합니다. 퍼갑니다.

[jQuery 기본 강좌]1-1 jQuery 사용

Posted by 비회원 프로그래밍/jQuery : 2010.05.07 10:53

jQuery 는 2010년 5월 현재 1.4.2 버전까지 release 되었다.




http://jquery.com/

에서 튜토리얼과 간략한 설명을 볼 수 있다.


오늘은 jQuery를 사용할때 가장 기본적인 셋팅 방법에 대해 적어보려 한다.

준비물
:
1.jQuery.js
2.사용하고싶은 plug-in

우선  http://jquery.com/ 에 접속하여 우측의 Download 클릭


jQuery를 다운받고  사이트 상단의 plugins 탭을 통해 쓰고싶은걸 선택해서 받을 수 있다.




새로 문서를 하나 만들고 DTD를 선언
난 가장 루즈한 roose.dtd를 선호한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

이후 <head>  </head> 사이에 jQuery.js 를 넣어준다.

<SCRIPT type="text/javascript" src="jquery-1.4.2.js"></script>

그 이후 사용하고싶은 plug-in 들을 그 밑에 삽입해주면 된다.

<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

샘플 테스트를 하려면

우선

 <script language="javascript">
    $(function(){  
      alert ('Hello, jQuery!');
    });
 </script>

이 문구를 <head>  </head> 사이에 넣어주고

alert 창이 제대로 뜨면 성공!


신고

댓글을 달아 주세요

  1. 2010.07.24 10:28 신고 늘푸른83  댓글주소  수정/삭제  댓글쓰기

    퍼갑니다..^^




<script src='../jq/jquery.js' type='text/javascript'></script>
<script src='../jq/jquery..js' type='text/javascript'></script>

<script>
$(function(){  
 $("input[type=file]").filestyle({
 image: "../img/search_bt.gif",
 imageheight : 18,
 imagewidth : 90
 });
});
</script>

<input type="file" name="file01" size="10">

결과물
신고

댓글을 달아 주세요

출처: 훈스닷넷 (http://hoons.kr/MetaBlog/Contents.aspx?blogIdx=24604



PDF 며칠 전 jQuery 1.4 버전이 공개되었습니다. jQuery를 기반으로 구축된 웹사이트를 1.4버전으로 업데이트하는 작업이 예정되어 있다면 지금부터 소개할 15개 항목을 꼭 숙지하세요새롭게 추가된 기능과 향상된 기능들을 제대로 활용하기 위한 방법들을 정리한 것입니다기존에 작성했던 코드 보다 더욱 성능이 향상될 수도 있으니까요.

1. jQuery(속성 부여의 변화

jQuery 1.4부터는 요소(element)의 속성을 컬렉션(collection) 형식으로 전달하는 것을 지원합니다이것은 "attr따위의 메서드(method)들을 여러번 작성하지 않고 한번에 처리하는 효과가 발생합니다컬렉션은 두번째 인자에 작성되며 개체(object) 형식으로 작성해야 합니다또한 이 것은 요소를 생성할 때에도 마찬가지로 적용됩니다.

여러가지 속성을 가진 앵커(anchor) 요소를 생성해 봅시다. jQuery 1.4와 함께라면 다음처럼 작성하면 됩니다
. :

jQuery('<a/>', {

    id: 'foo',

    href'http://google.com',

    title: 'Become a Googler',

    rel'external',

    text: 'Go to Google!'

});


위 작성 예제에서 "text속성이 눈에 밟힐 것입니다듣도 보도 못한 이 비표준 속성은 과연 무엇을 의미할까요네 그렇습니다. "text속성은 jQuery ".text()메서드를 호출하는 효과가 발생하며앵커의 문자열로 삽입되는 특수한 속성인 것입니다.

조금더 재미있는 예제를 작성해 봅시다
. :

jQuery('<div/>', {

    id: 'foo',

    css: {

        fontWeight: 700,

        color: 'green'

    },

    click: function(){

        alert('Foo has been clicked!');

    }

});


일반적인 "id" 속성이 추가되었군요어라또다시 눈에 밟히는 두 녀석이 나타났습니다바로 "css" "click" 속성입니다무엇을 의미하는 속성들일까요네 그렇습니다앞서 말씀 드렸듯이 jQuery "css" "click" 메서드를 호출하는 특수한 속성들입니다아직도 모르겠다고요이즈음해서 눈치채지 못하면 조금 곤란한데요이해를 돕기 위해 jQuery 1.3.x에서 위와 동일한 예제를 작성하면 다음과 같습니다. :

jQuery('<div/>')

    .attr('id''foo')

    .css({

        fontWeight: 700,

        color: 'green'

    })

    .click(function(){

        alert('Foo has been clicked!');

    });


더욱 자세한 정보 : jQuery(…)

2. 새로운 DOM 선택 방법 “until!

jQuery 1.4에는 DOM을 탐색하기 위한 3개의 신규 메서드가 추가되었습니다. "nextUntil", "prevUntil그리고 "parentsUntil"입니다이것은 특정한 방향으로 DOM을 선택할 수 있음을 의미합니다다음과 같은 과일 목록이 있다고 가정해 봅시다. :

<ul>

    <li>Apple</li>

    <li>Banana</li>

    <li>Grape</li>

 

    <li>Strawberry</li>

    <li>Pear</li>

    <li>Peach</li>

</ul>


"Apple"(
사과이후의 모든 요소를 선택했습니다그러나 "Strawberry"(딸기)까지의 요소만을 필요로 한다면 다음 처럼 작성할 수 있습니다. :

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');

// Selects Banana, Grape, Strawberry


더욱 자세한 정보 : prevUntilnextUntilparentsUntil

3. 이벤트 핸들러를 다중으로 바인딩하기

이벤트 핸들러들 역시 복합적으로 일괄 반영할 수 있게 되었습니다다음 처럼 말예요. :

jQuery('#foo).bind({

    click: function() {

        // do something

    },

    mouseover: function() {

        // do something

    },

    mouseout: function() {

        // do something

    }

})


그리고 이것은 ".one()메서드에도 사용할 수 있다는 사실을 잊지 마세요.

더욱 자세한 정보
 : .bind(…)

4. 프로퍼티 단위 Easing

이전에는 하나의 애니메이션에 하나의 "easing"만을 사용할 수 있었지만, jQuery 1.4부터는 속성 단위로도 "easing"을 사용할 수 있게 되었습니다그리고 기본으로 "swing" "linear" 두가지 함수를 내장하고 있습니다만약 더욱 많은 "easing" 기능을 추가하려면 언제든지 다운로드해서 추가할 수 있습니다.

"animate" 
메서드에 최종 경로에 해당하는 CSS 속성인 "left" "top"에 값을 입력하고 "top" 속성에만 "easing"을 반영한 예제입니다
. :

jQuery('#foo').animate({

    left: 500,

    top: [500'easeOutBounce']

}, 2000);


요런 액션이 만들어집니다!

"easing" 
기능을 정의하기 위한 또다른 방법으로는 두번째 인자에 옵션으로 할당하는 방법이 있습니다. "specialEasing" 속성을 다음 처럼 작성하세요. :

jQuery('#foo').animate({

    left: 500,

    top: 500

}, {

    duration: 2000,

    specialEasing: {

        top: 'easeOutBounce'

    }

});


더욱 자세한 정보 : per-property easing

5. 새로운 Live Event!

앞으로 생성될 요소에게 발생할 이벤트를 미리 지정할 수 있는 ".live()메서드에서 사용할 수 있는 이벤트 종류가 늘었습니다. jQuery 1.4부터는 "submit", "change", "focus" 그리고 "blur"입니다. ".live()메서드는 아주 많은 요소들에 이벤트 핸들러를 등록할 때 유용합니다. ".live()메서드를 이용하면 이벤트 할당 이후 새롭게 추가되는 요소에도 반영되기 때문에 효율적입니다.

그러나 이벤트의 이름을 작성할 때 신중해야합니다. "focusin" 그리고 "focusout"  "focus" "blur" 이벤트를 위임하기 때문입니다
.

jQuery('input').live('focusin'function(){

    // do something with this

});

 

6. 함수의 컨텍스트 조작하기

jQuery 1.4부터 새롭게 제공되는 "proxy함수는 jQuery의 네임스페이스를 관리할 수 있게합니다이 함수는 "scope"(스코프)와 메서드 이름을 받는 두개의 인자를 가집니다자바스크립트의 "this키워드를 통하여 다른 개체를 유지할 수 있게 합니다

설명이 난해하죠예를 들어봅시다. "
app개체는 "config개체와 "clickHandler"메서드로 구성된 두개의 속성을 가지고 있습니다. :

var app = {

    config: {

        clickMessage: 'Hi!'

    },

    clickHandler: function() {

        alert(this.config.clickMessage);

    }

};


"
clickHandler메서드를 실행해 보면 "this키워드를 통하여 "app개체에 접근하고 "config개체를 호출하여 값을 취득할 수 있음을 확인할 수 있습니다. :

app.clickHandler(); // "Hi!" is alerted


이제 이 메서드를 이벤트 핸들러로 바인딩해 봅시다. :

jQuery('a').bind('click', app.clickHandler);


이렇게 바인딩된 메서드는 정상적으로 작동하지 않습니다왜냐하면 jQuery(정확히 말하면 event model)에 의해서 "this"가 재정의 되어 버리기 때문입니다이러한 문제들을 해결(우회)하기 위해서 제공하는 함수가 바로 "proxy"입니다.

jQuery('a').bind(

    'click',

    jQuery.proxy(app, 'clickHandler')

);


이제 앵커를 클릭하면 "Hi!"라는 문구가 나타날 것입니다.

"
proxy함수가 리턴하는 것은 "wrapped"된 함수입니다여기에는 이벤트가 되돌려준 개체와 "app"가 들고있는 두 속성을 "this"로 확장해서 돌려준 것입니다이것은 이벤트를 바인딩 할 때 뿐만아니라 플러그인을 만들거나 콜백을 호출하는 데에도 유용하게 사용될 수 있습니다

편집자 주 - 이것은 
Prototype에서 오래전부터 제공하던 기능입니다개인적으로 "jQuery.scope" 라는 함수로 만들어 사용해 왔는데이 기법을 활용하면 매우 엘레강스한(?) 코딩을 구사할 수 있습니다. 1.4 버전부터는 공식으로 지원하게 된 점이 가장 마음에 드는 부분입니다.

더욱 자세한 정보
 : jQuery.proxy

7. 지연되는 애니메이션 대기열(queue)

이제부터는 애니메이션 대기열에 지연 효과를 추가할 수 있습니다. ".delay()메서드를 사용하여 콜백과 애니메이션 사이이의 혼란을 방지하고 "setTimeout함수를 호출하지 않고도 지연시키고 싶은만큼 애니메이션을 지연시킬수 있게 된 것입니다. :

jQuery('#foo')

    .slideDown() // Slide down

    .delay(200// Do nothing for 200 ms

    .fadeIn(); // Fade in


"
.delay()"의 첫 번째 인자로 밀리세컨즈 단위의 지연 시간값을 기입합니다만약 다른 애니메이션 대기열을 사용하려면 두번째 인자로 대기열 이름을 전달할 수 있습니다.(기본: "fx")

더욱 자세한 정보
 : .delay(…)

8. 요소가 가진 것을 확인하기

jQuery 1.4 ".has()"와 같은 메서드를 사용하여 매우 쉽게 요소 또는 배열을 확인할 수 있도록 만들어졌습니다. ".has()" jQuery의 DOM 선택자를 필터링하는 메서드로 부모 요소가 가진 특정한 자식 요소들을 확인하여 선택할 수 있습니다.

jQuery('div').has('ul');


위 코드는 문서의 모든 DIV요소를 찾아내고 이 요소들 중 UL요소를 포함하는 DIV요소만을 선택하여 반환하는 코드입니다

또한 jQuery 네임스페이스에 "
contains함수를 제공합니다이 함수는 낮은 수준의 함수로써 두개의 DOM 노드를 인자로 받아 수용여부를 구분합니다첫 번째 요소가 두번째 요소를 포함하고 있는지에 대한 여부를 불린(boolean) 형식으로 반환합니다.

jQuery.contains(document.documentElement, document.body);

// Returns true - <body> is within <html>


더욱 자세한 정보 : .has(…)jQuery.contains(…)

9. 요소 풀기(Unwrap)!

지금까지 ".wrap()메서드를 사용해 온 동일한 방법으로 jQuery 1.4에 추가된 ".unwrap()메서드를 완전히 반대격으로 사용할 수 있습니다다음과 같은 DOM 구조가 있다고 가정해 봅시다. :

<div>

    <p>Foo</p>

</div>


그리고 다음과 같이 작성하여 감싸고 있는 요소를 제거할 수 있습니다. :

jQuery('p').unwrap();


결과적으로 아래와 같은 DOM 구조를 얻습니다. :

<p>Foo</p>


기본적으로 이 메서드는 특정한 부모요소를 제거합니다.

더욱 자세한 정보
 : .unwrap(…)

10. 데이터를 유지한 상태로 요소 제거하기

새로운 ".detach()메서드는 DOM에서 요소를 제거합니다. ".remove()메서드 처럼 말이죠이 새로운 방법의 중요한 차이점은 해당 요소가 가진 데이터 요소를 파괴하지 않는다는 것입니다이 데이터는 jQuery의 이벤트 시스템에 보존되어있기 때문에 ".data()메서드 등을 그대로 사용하여 다시금 호출할 수 있습니다.

재사용될 만한 요소에만 사용하는 것이 중요합니다. DOM에서 요소를 제거하거나 추가하는 일이 빈번하게 발생할 때 매우 유용하게 사용할 수 있습니다
.

var foo = jQuery('#foo');

 

// Bind an important event handler

foo.click(function(){

    alert('Foo!');

});

 

foo.detach(); // Remove it from the DOM

 

//  do stuff

 

foo.appendTo('body'); // Add it back to the DOM

 

foo.click(); // alerts "Foo!"


더욱 자세한 정보 : .detach(…)

11. index(성능 향상

jQuery 1.4부터는 ".index()"메서드의 새로운 사용벙법이 추가되었습니다이 메서드는 선택된 요소가 현재 컬렉션에서 몇번째 요소인지를 알려줍니다다음과 같은 DOM 구조가 있다고 가정해 봅시다. :

<ul>

    <li>Apple</li>

    <li>Banana</li>

    <li>Grape</li>

 

    <li>Strawberry</li>

    <li>Pear</li>

    <li>Peach</li>

</ul>


목록의 항목을 클릭한 경우 해당 항목이 몇번째 요소인지 알아내기 위해 요소에 이벤트를 할당했습니다. :

jQuery('li').click(function(){

    alertjQuery(this).index() );

});


jQuery 1.4 
부터는 첫번째 인자에 요소 뿐만아니라 선택자를 입력하여 원래 요소의 컬랙션으로 부터 인덱스 번호를 알아낼 수 있습니다.

"
.index()"의 인자로 선택자를 입력하여 대상이 될 요소를 지정할 수 있지만 기본으로 인접 부모요소를 대상으로 하고 있습니다항상 인티저(integer)를 반환하며 대상이 없거나문서에서 발견되지 않으면 "-1"을 반환합니다.

더욱 자세한 정보
 : .index(…)

12. 함수를 인자로 받는 세터(setter) 메서드들

DOM을 조작하는 대부분의 세터 메서드 호출 방법은 단독 인수인 경우 또는 두번째 인자를 입력하는 경우 (".css()" & ".attr()") 입니다이러한 메서드들은 지금까지 모든 컬렉션 요소에 동일한 값을 반영했습니다그러나 jQuery 1.4 버전 부터는 인자에 함수를 사용하여 서로 다른 값을 부여할 수 있게 되었습니다.

다음과 같은 세터 메서드들에 함수를 인자로 사용할 수 있습니다. :