jQuery Mobile에서 동적으로 추가된 콘텐츠의 마크업을 효율적으로 향상하려면 어떻게 해야 합니까?

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

소개

동적으로 추가된 콘텐츠의 마크업 강화를 위해, 단순히 새 요소를 추가하는 것만으로는 충분하지 않습니다. 새로운 콘텐츠에는 jQuery Mobile의 스타일이 필요합니다. 이 프로세스는 리소스를 많이 사용하므로 필요한 개선 사항을 최소화하는 것이 중요합니다.

향상 수준

세 가지 개선 수준이 있습니다.

1. 단일 구성요소/위젯
2. 페이지 콘텐츠
3. 전체 페이지 콘텐츠(머리글, 콘텐츠, 바닥글)

단일 구성 요소/위젯 향상

참고: 이 방법은 현재/활성 상태에서만 사용해야 합니다. 페이지.

각 jQuery Mobile 위젯은 동적으로 향상될 수 있습니다:

목록 보기

• 마크업 향상: $('#mylist').listview('refresh');
• 예: https://jsfiddle.net/Gajotres/LrAyE/
• 참고: 새로 고침()은 새 목록 보기에만 영향을 미칩니다. elements.

버튼

• 마크업 향상: $('[type="button"]').button ();
• 예: https://jsfiddle.net/Gajotres/m4rjZ/
• 참고: 기본 div에서도 버튼을 만들 수 있습니다. https://jsfiddle.net/Gajotres/L9xcN/

Navbar

• 마크업 향상: $('[data-role="navbar"]').navbar();
• 예: https://jsfiddle.net/Gajotres/w4m2B/
• 동적 탭 추가: https://jsfiddle.net/Gajotres/V6nHp/

텍스트 입력, 검색 입력 및 텍스트 영역

• 마크업 향상: $('[type="text"]').textinput();
• 예: https://jsfiddle.net/Gajotres/9UQ9k/

슬라이더 및 플립 토글 스위치

• 마크업 향상: $('[type="range"]').slider();
• 예: https://jsfiddle.net/Gajotres/caCsf/
• 참고: 슬라이더는 pagebeforecreate 이벤트 중에 몇 가지 기능이 향상되었습니다. https://jsfiddle.net/Gajotres/NwMLP/
• 자세히 보기: https://stackoverflow.com/a/15708562/1848600

체크박스 및 라디오박스

• 마크업 향상: $('[type="radio"]').checkboxradio();
• 예: https://jsfiddle.net/Gajotres/VAG6F/
• 선택/선택 취소: $("[type='radio']").eq(0).attr("checked", false).checkboxradio("refresh");

메뉴 선택

• 마크업 향상: $('select').selectmenu();
• 예: https://jsfiddle.net/Gajotres/dEXac/

접기 가능

• 마크업 향상: $('.selector').trigger('create');
• 예: https://jsfiddle.net/Gajotres/ck6uK/

테이블

• 마크업 향상: $.(".selector").table("refresh");
• 예: https://jsfiddle.net/Gajotres/Zqy4n/

패널

• 패널 마크업 개선: $('.selector').trigger('pagecreate');
• 콘텐츠 마크업 향상: $('.selector').trigger('pagecreate');
• 예: https://jsfiddle.net/Palestinian/PRC8W/

페이지 콘텐츠 향상

전체 페이지 향상 콘텐츠:

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

예: https://jsfiddle.net/Gajotres/426NU/

전체 페이지 콘텐츠 강화(머리글, 콘텐츠, 바닥글)

trigger('pagecreate');를 사용하세요. 단, 페이지 새로 고침당 한 번만 사용해야 합니다.

예: https:/ /jsfiddle.net/Gajotres/DGZcr/

타사 개선 사항 플러그인

• 버튼 텍스트 변경: https://jsfiddle.net/Gajotres/mwB22/

정확한 최대값 가져오기 콘텐츠 높이

CSS를 사용하여 콘텐츠 높이 설정 헤더 및 바닥글 높이를 기준으로 div를 설정합니다.

마크업 향상 방지

• 방법 1: 헤더, 콘텐츠, 또는 바닥글 컨테이너.
• 방법 2: 다음과 같은 요소에 data-role="none"을 추가합니다. 향상되어서는 안 됩니다.
• 방법 3: 특정 HTML 요소의 향상 방지: $.mobile.page.prototype.options.keepNative = "select, input";

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