jQuery Mobile을 사용하여 동적으로 추가된 콘텐츠를 효율적으로 향상하려면 어떻게 해야 합니까?

jQuery Mobile: 동적으로 추가된 콘텐츠의 마크업 강화

소개

동적으로 생성된 콘텐츠는 jQuery Mobile의 독특한 스타일을 준수하도록 보장합니다. 이 프로세스는 중요하지만 리소스 집약적이므로 업데이트되는 구성 요소에 따라 선택적 향상을 수행하는 것이 좋습니다.

개선 수준

세 가지 개선 수준이 있으며 해당 수준에 따라 분류됩니다. 자원 소모:

1. 싱글 강화 구성 요소/위젯
2. 페이지 콘텐츠 향상
3. 전체 페이지 콘텐츠 향상

단일 구성 요소/위젯 향상

참고: 강화 방법은 현재/활성 페이지. 동적으로 삽입된 페이지는 DOM에 삽입된 후에 향상됩니다.

예: 버튼 향상:

$('[type="button"]').button();

페이지 콘텐츠 향상

$('#index').trigger('create');

전체 강화 페이지 콘텐츠

주의: Trigger('pagecreate')는 의도하지 않은 부작용의 위험이 있으므로 자제해서만 사용해야 합니다.

$('#index').trigger('pagecreate');

마크업 강화 방지 방법

To 특정 요소의 강화를 방지하려면 다음 방법 중 하나를 사용하세요.

방법 1:

data-enhance="false"

방법 2:

data-role="none"

방법 3:

$(document).bind('mobileinit',function(){
  $.mobile.page.prototype.options.keepNative = "select, input";
});    

마크업 향상 문제

오류: "초기화 전에 목록 보기에서 메서드를 호출할 수 없습니다."

해결책: 구성요소 초기화 마크업을 강화하기 전에:

$('#mylist').listview().listview('refresh');

마크업 재정의 문제

기본 jQuery Mobile CSS 스타일을 재정의하려면 CSS 규칙에서 !important 플래그를 사용하세요.

예:

#navbar li {
  background: red !important;
}

위 내용은 jQuery Mobile을 사용하여 동적으로 추가된 콘텐츠를 효율적으로 향상하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!