jquery 모바일 개발의 일반적인 문제 분석

jquery 모바일 개발의 일반적인 문제 분석_jquery

WBOY

풀어 주다： 2016-05-16 15:18:53

원래의

1180명이 탐색했습니다.

이 기사에서는 jquery 모바일 개발의 일반적인 문제를 예제를 통해 분석합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

jquery mobile을 사용하면 어떤 종류의 휴대폰인지 확인하기 위해 프로그램에 메서드를 작성할 필요가 없으며 js를 사용하여 다양한 스마트폰과의 호환성을 얻을 수 있습니다. jquery 모바일 플러그인은 200K가 넘고 min은 140K가 넘는 강력한 기능 때문이기도 합니다.

1. jquery 모바일은 ajax를 통해 페이지를 요청합니다. 모두가 알고 있듯이 ajax는 새 페이지를 플러시하지 않습니다. 즉, 주소 표시줄의 변경 사항은 실제 업데이트가 아닙니다. 문제가 있습니다. 페이지를 새로 고칠 때만 JS가 실행되고 작동합니다. 그러나 페이지에서 점프를 클릭하면 전환할 때 작동하지 않습니다. 뒤쪽에.

오류 코드:

<script type="text/javascript">
$(function(){
  $('#search01').bind("click",function(){
    $('.searchPanel').show();
  });
});
</script>

로그인 후 복사

올바른 코드:

<script type="text/javascript">
$(function(){
  $('#search01').live("click",function(){ //jquery 1.7系列
    $('.searchPanel').show();
  });
});
</script>

로그인 후 복사

jquery 1.9 시리즈라면

<script type="text/javascript">
$(document).on('click', '#search01', function () { //jquery 1.9系列
  $('.searchPanel').show();
});
</script>

로그인 후 복사

2. 이때 모든 페이지는 동일한 ID를 사용하지 않도록 주의하세요. 그렇지 않으면 첫 번째 페이지만 읽혀집니다. 한 페이지에 여러 페이지가 있으면 많은 문제가 발생합니다. 예를 들어, 레이블에서 창 상단까지의 거리를 계산하면 정확하지 않습니다.

잘못된 철자법:

$('html,body').animate({
   scrollTop: $('.content').offset().top
}, 100);

로그인 후 복사

이렇게 작성하면 문제는 현재 페이지 앞에 페이지가 많을 수 있기 때문에 페이지를 새로고침하면 값이 정확해집니다.

정확한 표기:

$('html,body').animate({
   scrollTop: $('.ui-page-active .content').offset().top
}, 100);

로그인 후 복사

.ui-page-active는 현재 활성화된 페이지를 나타내므로 계산된 높이가 정확합니다.

3. JS 변수에 PHP 변수를 할당하면 작동할 때도 있고 그렇지 않을 때도 있습니다.

코드 복사 코드는 다음과 같습니다.

color = '
이 문제의 원인은 발견되지 않았습니다. 그러나 다른 방법으로 해결할 수 있습니다.

<input type="hidden" id='color' value='<&#63;php echo $color;&#63;>'>
<script type="text/javascript">
  color = $('.ui-page-active #color').val();
</script>

로그인 후 복사

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.