jQuery Mobile:동적으로 추가되는 컨텐츠의 마크업 향상
jQuery Mobile 페이지를 동적으로 강화하려면 어떻게 해야 합니까?
다음 방법을 사용하려고 했습니다.
$('[data-role="page"]').trigger('create');그리고.
$('[data-role="page"]').page();
또한 어떻게 하면 체크박스의 마크업 기능만 향상시킬 수 있을까요?
소개:
동적으로 생성된 콘텐츠 마크업을 강화하는 몇 가지 방법이 있습니다.jQuery Mobile 페이지에 새로운 콘텐츠를 동적으로 추가하는 것만으로는 충분하지 않습니다. 새로운 콘텐츠는 고전적인 jQuery Mobile 스타일링으로 향상되어야 합니다.이것은 다소 처리가 과중한 작업이기 때문에 가능한 한 jQuery Mobile이 개선을 덜 해야 할 경우 몇 가지 우선 순위가 필요합니다.한 구성요소만 스타일링하면 될 경우 전체 페이지를 확장하지 마십시오.
이게 다 무슨 뜻입니까?페이지 플러그인이 페이지를 디스패치할 때대부분의 위젯이 자동 초기화할 때 사용하는 Init 이벤트입니다.페이지에서 찾은 위젯의 모든 인스턴스를 자동으로 향상시킵니다.
그러나 새로운 마크업 클라이언트 측을 생성하거나 Ajax를 통해 콘텐츠를 로드하여 페이지에 주입하는 경우, 새로운 마크업 내에 포함된 모든 플러그인에 대한 자동 초기화를 처리하기 위해 생성 이벤트를 트리거할 수 있습니다.이는 모든 요소(페이지 디브 자체)에서 트리거될 수 있으므로 각 플러그인(listview 버튼, select 등)을 수동으로 초기화하는 작업을 절약할 수 있습니다.
이 점을 염두에 두고 향상 수준에 대해 논의해 보겠습니다.이 중 세 가지가 있으며 리소스 요구량이 적은 리소스에서 상위 리소스로 분류됩니다.
- 단일 구성요소/위젯 향상
- 페이지 내용 향상
- 전체 페이지 내용(헤더, 내용, 바닥글) 향상
단일 구성요소/위젯 향상:
중요:아래 향상 방법은 현재/활성 페이지에서만 사용됩니다.동적으로 삽입되는 페이지의 경우 해당 페이지와 해당 내용이 DOM에 삽입되면 향상됩니다.동적으로 생성된 페이지에서 또는 활성 페이지가 아닌 다른 메소드를 호출하면 오류가 발생합니다.
모든 jQuery Mobile 위젯을 동적으로 향상시킬 수 있습니다.
- 목록 보기:
마크업 향상:
$('#mylist').listview('refresh');
목록 보기 요소 제거 중:
$('#mylist li').eq(0).addClass('ui-screen-hidden');
향상된 예: http://jsfiddle.net/Gajotres/LrAyE/
refresh() 메서드는 목록에 추가된 새 노드에만 영향을 미칩니다.이것은 성능상의 이유로 행해집니다.
리스트뷰 하이포인트 중 하나는 필터링 기능입니다.안타깝게도 어떤 이유로 jQuery Mobile은 기존 목록 보기에 필터 옵션을 동적으로 추가하지 못합니다.다행히 해결할 방법이 있습니다.가능하면 현재 목록 보기를 제거하고 파일러 옵션이 켜져 있는 다른 목록 보기를 추가합니다.
다음은 https://stackoverflow.com/a/15163984/1848600 입니다.
$(document).on('pagebeforeshow', '#index', function(){
$('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
$('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
$('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
$('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
$('#test-listview').listview().listview('refresh');
});
마크업 향상:
$('[type="button"]').button();
향상된 예: http://jsfiddle.net/Gajotres/m4rjZ/
한 가지 더 말하자면, 버튼을 만들기 위해 입력 요소를 사용할 필요가 없고, 기본 디브로도 할 수 있습니다. 예를 들자면: http://jsfiddle.net/Gajotres/L9xcN/
마크업 향상:
$('[data-role="navbar"]').navbar();
향상된 예: http://jsfiddle.net/Gajotres/w4m2B/
다음은 동적 navbar 탭을 추가하는 방법에 대한 데모입니다. http://jsfiddle.net/Gajotres/V6nHp/
그리고 이벤트를 만들기 전에 한 페이지 더 : http://jsfiddle.net/Gajotres/SJG8W/
마크업 향상:
$('[type="text"]').textinput();
향상된 예: http://jsfiddle.net/Gajotres/9UQ9k/
마크업 향상:
$('[type="range"]').slider();
향상된 예: http://jsfiddle.net/Gajotres/caCsf/
이벤트 생성 전 페이지 중 향상 예제: http://jsfiddle.net/Gajotres/NwMLP/
슬라이더는 동적으로 작성하기에는 약간 버그가 있습니다. 자세한 내용은 여기 https://stackoverflow.com/a/15708562/1848600 를 참조하십시오.
마크업 향상:
$('[type="radio"]').checkboxradio();
또는 다른 Radiobox/Checkbox 요소를 선택/선택 취소하려면 다음을 수행합니다.
$("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh");
아니면
$("input[type='radio']").eq(0).attr("checked",true).checkboxradio("refresh");
향상된 예: http://jsfiddle.net/Gajotres/VAG6F/
마크업 향상:
$('select').selectmenu();
향상된 예: http://jsfiddle.net/Gajotres/dEXac/
안타깝게도 접을 수 있는 요소는 특정 메서드를 통해 향상시킬 수 없으므로 대신 trigger('create')를 사용해야 합니다.
향상된 예: http://jsfiddle.net/Gajotres/ck6uK/
마크업 향상:
$(".selector").table("refresh");
이것이 테이블 강화의 표준 방법이긴 하지만, 이 시점에서는 작동시킬 수 없습니다.대신 trigger('create')를 사용합니다.
향상된 예: http://jsfiddle.net/Gajotres/Zqy4n/
- 패널 - 새것
패널 마크업 향상:
$('.selector').trigger('pagecreate');
패널에 동적으로 추가된 컨텐츠의 마크업 향상:
$('.selector').trigger('pagecreate');
예: http://jsfiddle.net/Palestinian/PRC8W/
페이지 내용을 향상시킵니다.
전체 페이지 컨텐츠를 생성/재구축하는 경우에는 한 번에 수행하는 것이 가장 좋으며 다음과 같이 수행할 수 있습니다.
$('#index').trigger('create');
향상된 예: http://jsfiddle.net/Gajotres/426NU/
전체 페이지 내용(헤더, 내용, 바닥글) 향상:
안타깝게도 trigger('create')는 헤더 및 바닥글 마크업을 향상시킬 수 없습니다.그런 경우에는 큰 총이 필요합니다.
$('#index').trigger('pagecreate');
향상된 예: http://jsfiddle.net/Gajotres/DGZcr/
jQuery Mobile 공식 문서에서는 찾을 수 없기 때문에 거의 신비로운 방법입니다.그러나 jQuery Mobile 버그 추적기에는 정말 필요하지 않으면 사용하지 말라는 경고가 포함되어 있습니다.
참고로 .trigger('pagecreate')는 페이지 새로 고침당 한 번만 사용할 수 있다고 가정합니다.
http://jsfiddle.net/Gajotres/5rzxJ/
타사 향상 플러그인
서드파티 향상 플러그인은 여러 가지가 있습니다.일부는 기존 방법에 대한 업데이트로 만들어졌고 일부는 고장난 jQM 기능을 수정하기 위해 만들어졌습니다.
- 버튼 텍스트 변경
유감스럽게도 이 플러그인의 개발자를 찾을 수 없습니다.원래 SO 소스:변경 버튼 텍스트 jquery 모바일
(function($) {
/*
* Changes the displayed text for a jquery mobile button.
* Encapsulates the idiosyncracies of how jquery re-arranges the DOM
* to display a button for either an <a> link or <input type="button">
*/
$.fn.changeButtonText = function(newText) {
return this.each(function() {
$this = $(this);
if( $this.is('a') ) {
$('span.ui-btn-text',$this).text(newText);
return;
}
if( $this.is('input') ) {
$this.val(newText);
// go up the tree
var ctx = $this.closest('.ui-btn');
$('span.ui-btn-text',ctx).text(newText);
return;
}
});
};
})(jQuery);
작동 예: http://jsfiddle.net/Gajotres/mwB22/
최대 컨텐츠 높이를 정확하게 가져옵니다.
페이지 머리글과 바닥글에 일정한 높이의 컨텐츠 디브가 있는 경우 작은 CSS 트릭으로 사용 가능한 공간을 모두 채우도록 쉽게 설정할 수 있습니다.
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
다음은 데모와 관련된 작업 예입니다. http://jsfiddle.net/Gajotres/7kGdE/
이 메서드는 올바른 최대 내용 높이를 얻는 데 사용할 수 있으며 페이지쇼 이벤트와 함께 사용해야 합니다.
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
다음은 jsFiddle의 라이브 예입니다. http://jsfiddle.net/Gajotres/nVs9J/
한 가지 기억해야 할 것이 있습니다.이 기능을 사용하면 사용 가능한 최대 콘텐츠 높이를 올바르게 얻을 수 있으며 동시에 동일한 콘텐츠를 확장하는 데 사용할 수 있습니다.안타깝게도 img를 전체 콘텐츠 높이로 확장하는 데 사용할 수 없습니다. img 태그의 오버헤드는 3px입니다.
마크업 강화 방지 방법:
이 작업은 몇 가지 방법으로 수행할 수 있으며, 때로는 원하는 결과를 얻기 위해 이를 결합해야 할 경우도 있습니다.
- 방법 1:
이 속성을 추가하면 됩니다.
data-enhance="false"
머리글, 내용, 바닥글 컨테이너로 이동합니다.
앱 로딩 단계에서도 이를 전환해야 합니다.
$(document).one("mobileinit", function () {
$.mobile.ignoreContentEnabled=true;
});
jquery-mobile.js를 초기화하기 전에 초기화합니다(아래 예제 참조).
이에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
http://jquerymobile.com/test/docs/pages/page-scripting.html
예: http://jsfiddle.net/Gajotres/UZwpj/
페이지를 다시 만들려면 다음을 사용합니다.
$('#index').live('pagebeforeshow', function (event) {
$.mobile.ignoreContentEnabled = false;
$(this).attr('data-enhance','true');
$(this).trigger("pagecreate")
});
- 방법 2:.
두 번째 옵션은 다음 줄을 사용하여 수동으로 수행하는 것입니다.
data-role="none"
예: http://jsfiddle.net/Gajotres/LqDke/
- 방법 3:
특정 HTML 요소는 마크업 향상을 방지할 수 있습니다.
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input";
});
예: http://jsfiddle.net/Gajotres/gAGtS/
jquery-mobile.js를 초기화하기 전에 다시 초기화합니다(아래 예제 참조).
마크업 향상 문제:
listview와 같이 처음부터 구성요소를 만들 때 다음과 같은 오류가 발생할 수 있습니다.
초기화 전에 목록 보기에서 메서드를 호출할 수 없습니다.
마크업 향상 전에 컴포넌트 초기화를 통해 이를 방지할 수 있으며, 이를 해결할 수 있는 방법은 다음과 같습니다.
$('#mylist').listview().listview('refresh');
마크업 우선 문제:
어떤 이유로 인해 기본 jQuery Mobile CSS를 변경해야 하는 경우 오버라이드로 수행해야 합니다.이 기능이 없으면 기본 CSS 스타일을 변경할 수 없습니다.
예:
#navbar li {
background: red !important;
}
예: http://jsfiddle.net/Gajotres/vTBGa/
변경 사항:
- 01.02.2013 - 다이내믹 나비바 데모 추가
- 01.03.2013 - 리스트뷰에 필터링을 동적으로 추가하는 방법에 대한 의견 추가
- 2013.03.07 - 새 장 추가:최대 컨텐츠 높이를 정확하게 가져옵니다.
- 17.03.2013 - 장에 몇 가지 단어 추가:최대 컨텐츠 높이를 정확하게 가져옵니다.
- 29.03.2013 - 동적으로 생성된 슬라이더에 대한 새로운 내용 추가 및 예제 버그 수정
- 2013.03.04. - 동적으로 생성된 접이식 요소에 대한 내용 추가
- 04.04.2013 - 타사 플러그인 챕터 추가
- 2013.05.20 - 동적으로 추가된 패널 및 내용 추가
- 21.05.2013 - 전체 컨텐츠 높이를 설정하는 다른 방법 추가
- 2013.06.20 - 새 장 추가: 마크업 오버라이드 문제
- 29.06.2013 - 향상 방법 사용 시기에 대한 중요 참고 사항 추가
JQMobile 1.4부터 모든 어린이 http://api.jquerymobile.com/enhanceWithin/ 에서 .enhanceWithin()을 수행할 수 있습니다.
var content = '<p>Hi</p>';
$('#somediv').html(content);
$('#somediv').enhanceWithin();
언급URL : https://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content
'it-source' 카테고리의 다른 글
| "Module 'name'(모듈 '이름')이(가) 입력되지 않은 모듈로 확인됩니다.." 사용자 지정 TypeScript 정의 파일을 작성할 때 (0) | 2023.10.23 |
|---|---|
| C++의 Mariadb Kerberos 인증 (0) | 2023.10.23 |
| ui-view? angular ui 라우터를 다시 로드하지 않고 $stateParams를 업데이트하려면 어떻게 해야 합니까? (0) | 2023.10.23 |
| 각진 재료 및 글꼴 변경 (0) | 2023.10.23 |
| 억만장자 웃음 XML DoS 공격은 어떻게 작동합니까? (0) | 2023.10.23 |