나른한 오후~

<script>

var leftCt = 0;
    $(function(){
        $("#album").attr("top", "0");
        imgStart("R");
    });
    function imgStart(tp){
        clearInterval($("#imgList").attr("timer"));
        if(tp == "R"){ // 오른쪽 이동
            imgRight();
            $("#imgList").attr("timer", setInterval("imgRight()", 3000000000000000000000000)); // 멈춰있는 시간
        }else{ // 왼쪽이동
            if(leftCt == 0){
                var leng = $("#imgList div").size();
                $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
                $("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
                $("#imgList>div").eq(leng).remove();
                leftCt = 1;
            }
            imgLeft();
            $("#imgList").attr("timer", setInterval("imgLeft()", 3000000000000000000000000));
        }
    }
    function imgRight(){
        $("#imgList").animate({
            left : parseInt($("#imgList div").eq(0).width() * -1)
        },300,function(){
            $("#imgList").css("left", "0px");
            $("#imgList>div").eq(0).clone().appendTo($("#imgList"));
            $("#imgList>div").eq(0).remove();
        });
    }
    function imgLeft(){
        var leng = $("#imgList div").size();
        $("#imgList").animate({
            left : 0
        },300,function(){
            $("#imgList").css("left", "0px");
            $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
            $("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
            $("#imgList>div").eq(leng).remove();
        });
    }
</script>
<style>
/*
    이미지 사이즈 맞춰서 수정해주세요... (#viewArea)
*/
#viewArea {position:relative; width:565px; height:78px;overflow:hidden;}
#imgList {position:absolute; width:2000px; left:0px; top:0px;}
#imgList div {float:left; margin:0px; padding:0px;}
</style>

<table>
 <tbody><tr>
  <td>
   <div>
    <span onclick="imgStart('L')">&lt;</span>&nbsp;
   </div>
  </td>
  <td>
  <div id="viewArea">
  <div id="imgList">
   <div>
<a href="http://http://www.naver.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_chardonnay_01_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.daum.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_cabernet-sauvig_02_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.paran.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Park-Merlot_03_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.google.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Park-Merlot_03_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.wow.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Peju-Merlot_05_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.haha.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_sauvignon-reser_08_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.naver.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Peju-Merlot_05_s.gif"></a>&nbsp;</div>
  </div>
 </div>
  </td>
  <td><span onclick="imgStart('R')">&gt;</span> </td>
 </tr>
</tbody></table>

[출처] jQuery 이미지 슬라이드 |작성자 바다

jQuery에서 제공해주는 정의 필터 셀렉터를 사용해서 radio버튼의 value값을 가져오는 방식은 아래와 같다.

  $(":input:radio[name=sample]:checked").val()
  
  <input type="radio" name ="sample" value="Y" checked>
  <input type="radio" name ="sample" value="N">

보 기엔 좀 길어보이지만 간단하게 설명된다.
최초 input 폼 엘리먼트를 선택후 radio 버튼을 가져온다음 name 속성의 값이 sample인 것중에서 선택된 값의 value를 가져온다.
위의 경우 value 값은 "Y"가 출력된다.
아무것도 선택하지 않은상태에선 value값은 'undefined'가 반환된다.

마찬가지로 radio대신 checkbox등의 체크값을 가져오는 방식도 위와 동일하다 하겠다.

출처:jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기.

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

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

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

// 숫자만 입력 받도록 설정
$('input[name=input 이름],input[name=input 이름2]').keyup(function(){
        $(this).val( $(this).val().replace(/[^0-9]/g, '') );
});

  if ( $.trim($(':radio[name="hp_company"]:checked').val() ) =='' ){
            alert('이동통신사를 선택해주세요');
            return false;
        }

jQuery로 select box의 선택된 값 읽어오기
$('#select_box option:selected').val();

jQuery로 select box의 선택된 내용 읽어오기
$('#select_box option:selected').text();

tabs에서 ajax를 이용하여 페이지를 동적으로 로딩할 수 있다.

먼저 호출될 aaa.html, bbb.html 페이지를 작성한다.

aaa.html

bbb.html

tab으로 aaa.html, bbb.html 을 표시할 컨테이너 페이지를 아래와 같이 구현한다.
tab 페이지


jquery tabs를 ajax로 구현한 샘플