jQuery에서 ID값으로 탐색을 할경우 최상위 ID만을 탐색하고 멈춥니다.

그 문제를 해결하는 방법은 ID 대신 Class를 사용 하시는 겁니다.

똑같은 기능의 여러 객체가 필요 할경우 

<% For i = 0 To ... %>
<input type="text" name="date" class="date">
<% Next %>

위와 같으 id대신 class 주시고

$(function()
{
    $(".data").mask("9999-99-99");
});

와 같이 주시면 해결이 되실 겁니다.

참고로 클래스는 디자이너들이 CSS를 주기위해 많이 사용 하는데 그때는

당황 하지 마시고 class="DesignCss date"와 같이 주시게 되면 DesignCss와 date를 따로 탐색 할수 있습니다

jQuery(function($){

 /* save all setting to file */
 $('.btnDel').click(function (){
  var answer = confirm ('수강을 취소 하시겠습니까? 취소하시면 데이터가 모두 삭제됩니다.');
  if(answer){

    var form = $(this).parents('form');
    form.submit();

  }else{
   return false;
  }
 });

 $('.btnEnroll').click(function (){
  var answer = confirm ('수강 신청하시겠습니까?');
  if(answer){

    var form = $(this).parents('form');
    form.submit();

  }else{
   return false;
  }

 });

});

<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>
    <SCRIPT type=text/javascript>
        $(document).ready(function () {
            $('.remaining').each(function () {
                // count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.
                var $count = $('.count', this);
                var $input = $(this).prev();

                // .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
                var maximumCount = $count.text() * 1;

                // update 함수는 keyup, paste, input 이벤트에서 호출한다.
                var update = function () {
                    var before = $count.text() * 1;
                    var now = maximumCount - $input.val().length;

                    // 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
                    if (now < 0) {
                        var str = $input.val();
                        $input.val(str.substr(0, maximumCount));
                        now = 0;
                    }

                    // 필요한 경우 DOM을 수정한다.
                    if (before != now) {
                        $count.text(now);
                    }
                };

                // input, keyup, paste 이벤트와 update 함수를 바인드한다
                $input.bind('input keyup paste', function () { setTimeout(update, 0) });

                update();
            });
        });
    </SCRIPT>
<TEXTAREA></TEXTAREA>
<DIV class=remaining>남은 글자수: <SPAN class=count>300</SPAN></DIV>

jQuery Mobile은 어플리케이션이 모바일 환경에 최적화되도록 자동으로 HTML의 상당 부분을 변경하거나 개선합니다. 이러한 jQuery Mobile의 자동 최적화는 대부분의 모바일 어플리케이션에서 유용한 것이지만 어떤 특별한 경우에는 필요치 않거나 오히려 없는 편이 더 나을 수도 있습니다.  jQuery Mobile은 이런 상황을 감안해 기본 설정의 주요 부분을 재정의할 수 있게 지원합니다.

PhoneGap은 HTML파일을 읽어들이면서 HTML문서에서 참조하도록 정의된 phonegap-1.1.0.js 라는 파일을 찾습니다. 그리고 해당 파일이 정상적으로 포함된 경우 deviceready 라는 이벤트를 발생시킵니다.

이 두 라이브러리가 서로 각자 초기화가 완료된 후에야 각 라이브러리에서 제공하는 모든 기능을 충분히 활용할 수 있게 됩니다. 하지만 이 두 라이브러리의 초기화 과정에서 서로 충돌이 발생해서 둘중 한가지는 충분히 초기화 되기 이전에 페이지가 사용자에게 노출되어 에러를 발생하게 하는 원인이 됩니다.

PhoneGap의 초기화 이벤트 처리하기

jQuery Mobile의 초기화 수행

moibleinit 이벤트에서 deviceready 이벤트 처리

샘플코드

jQuery Mobile 5일차.

-jQuery Mobile 페이지 이동과 효과.

Page 이동

1. 기본 페이지 구조.

기본적으로 단일 페이지 구조에 최적화 되어 있다. 즉, 하나의 HTML 파일에 모든 콘텐츠를 정의하거나 페이지 내에 서로간의 영역을 구분해 교체하는 방식으로 페이지 이동을 처리한다. 이렇게 하면 전체 적으로 스타일을 일관되게 적용할 수 잇고 페이지 이동에 따른 애니메이션 효과를 원할히 처리할 수 있어 웹앱의 으로서의 특징을 살릴수 있다.

jQuery mobile application은 data-role="page" 속성이 지정된 영역을 하나의 페이지로 간주하고 이 영역 단위로 브라우저에 표시한다.

2. 내부 링크 페이지 이동.

기본 페이지 구조에서도 말했듯이, jQuery Mobile은 page영역을 하나의 화면으로 여긴다. 때문에 한페이지 정의 여러화면을 대상으로 내부적으로 이동할 수 있게 내부 링크를 지원한다.

내부 링크를 사용하기 위해서는 일단 하나의 HTML 파일에 여러 page를 정의해 놓고 서로 교체하는 방식으로 페이지 이동을 처리한다.

이동할 page를 식별하기 위해서 ID를 부여하고 이 값으로 링크를 연결하는 방식을 취한다.

3. 외부 링크 페이지 이동.

외부 링크란 건 내부 링크와는 달리 하나의 HTML에서 다른 HTML 파일로의 페이지 이동을 말한다. 솔직히 jQM이 단일 페이지에 특화되어 있어도 HTML파일 하나로는 솔직히 관리도 힘들고 구현하기도 너무 힘들다. JQM에서는 자동적으로 외부링크 이동을 Ajax 통신으로 처리를 하고, 통신의 결과를 기존 페이지에 통합하는 방식으로 처리해서 내부 링크 페이지 이동과 유사하게 동작하도록 만들어져 있단다.

<a href="xxx.html"> </a> 이런식으로 앵커태그를 사용하여, 기존 HTML에서의 링크 작업과 같은 방식으로 동작하게 된다. 물론 다른 HTML파일들은 JQM의 양식에 맞게 작성이 되어 있어야한다.

4. 외부 사이트 이동 과 링크 옵션

위에는 모드 동일 사이트 내의 링크들에 대한 이야기이고, 외부 사이트로의 링크의 경우에는 JQM의 페이지 이동 매커니즘이 적용안된다. JQM은 HTML 링크 타입을 모두 지원하며, Ajax 기반의 처리외의 방식을 지원하기 위해 몇개의 옵션을 지원한다.

rel="external" , data-ajax="false", target="_blank" 3가지 방법 모두 앵커 태그에 덧붙여서 사용을 하시면 되고, 이런 방법들은 페이지 제어권이 완전히 넘어가 새로고침되는 방식으로 동작을 하게 된다.

외부 사이트가 JQM의 방식을 따르지 않는다면 꼭 사용을 하여야하는 방법같다.

5. 기능 링크

기능 링크는 이메일이나 전화 번호에 대한 링크를 말한다. 다들 스마트폰이나 태블릿 pc 등에서 경험을 해보았겠지만 전화번호를 누르면 전화가 걸어진다 던지, 메일 주소를 누르면 메일을 쓸수 있도록 동작을 한다던지의 행동을 하게 만드는 것들이다. 이 기능들은 JQM이 지원하는게 아니라 모바일 기기들이 알아서 고맙게 지원해주는 기능들이다.

TIp.

1. 링크를 이용하여 page를 구성하면 자동으로 back 버튼이 header 부분에 생성이 된다. data-backbtn="false" 속성을 header에 추가하면 자동 생성이 안된다.

2. jQM은 페이지 이동시 기존 js 객체인 location.hash값도 함께 업데이트하므로 브라우저 자체 back 기능도 잘 동작이된다.

페이지 이동 API 와 애니메이션 효과.

1. 페이지 이동

스크립트 영역에서의 page 이동을 처리하기 위해 JQM에서는 mobile 객체의 changePage() 메서드를 제공해준다.

내부: $.mobile.changePage("#OtherPage","slide","reverse");

외부: $.mobile.changePage("#Other.html","slide","reverse");

2. 애니메이션 효과

Page Transition 이라고 하며 , 총 6개의 CSS 기반 Transition이 제공된다. 페이지 링크를 정의하는 애커 테그에 data-transition 속성을 지정하면 ok !!.

효과의 종류

slide: 왼쪽으로 미끄러지듯 이동 (default).

slideup: 위쪽으로 미끄러지듯 이동.

slidedown: 아래쪽으로 미끄러지듯 이동.

pop: 팝업 형태로 새 페이지가 두둥.

fade: 기존 페이지가 희미해지면서 새 페이지가 두둥.

flip: 새 페이지가 트리플 악셀 . 두둥.

반대 방향으로 Transition 효과를 주고 싶으면 data-direction="reverse" 속성을 주면 ok.