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

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

---

동적으로 jQuery Mobile 페이지를 어떻게 향상시킬 수 있는지 궁금합니다.

이 방법을 사용하려고 시도했습니다.

1. $('[data-role="page"]').trigger('create');

   과

2. $('[data-role="page"]').page();

또한 확인란의 향상 마크 업 만 방지하려면 어떻게해야합니까?

---

부인 성명:

이 기사는 여기 내 블로그의 일부로도 찾을 수 있습니다 .

소개 :

동적으로 생성 된 콘텐츠 마크 업을 향상시키는 방법에는 여러 가지가 있습니다. jQuery Mobile 페이지에 새 콘텐츠 를 동적으로 추가하는 것만으로는 충분하지 않습니다 . 새 콘텐츠는 클래식 jQuery Mobile 스타일 로 향상되어야합니다 . 이것은 다소 무거운 작업을 처리하기 때문에 가능한 한 jQuery Mobile 이 가능한 한 덜 향상시킬 필요가 있으므로 몇 가지 우선 순위가 필요 합니다. 하나의 구성 요소 만 스타일을 지정해야하는 경우 전체 페이지를 향상시키지 마십시오.

이것은 모두 무엇을 의미합니까? 페이지 플러그인이 pageInit 이벤트를 전달하는 경우 대부분의 위젯이 자체적으로 자동 초기화하는 데 사용합니다. 페이지에서 찾은 위젯의 인스턴스를 자동으로 향상시킵니다.

그러나 클라이언트 측에서 새 마크 업을 생성하거나 Ajax를 통해 콘텐츠를로드하고 페이지에 삽입하는 경우 새 마크 업에 포함 된 모든 플러그인에 대한 자동 초기화를 처리하기 위해 create 이벤트를 트리거 할 수 있습니다. 이는 모든 요소 (페이지 div 자체 포함)에서 트리거 될 수 있으므로 각 플러그인 (목록보기 버튼, 선택 등)을 수동으로 초기화하는 작업을 절약 할 수 있습니다.

이를 염두에두고 향상 수준에 대해 논의 할 수 있습니다. 세 가지가 있으며 덜 요구되는 리소스에서 높은 리소스로 정렬됩니다.

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

단일 구성 요소 / 위젯 향상 :

중요 : 아래의 개선 방법은 현재 / 활성 페이지에서만 사용됩니다. 동적으로 삽입 된 페이지의 경우 해당 페이지와 해당 콘텐츠가 DOM에 삽입되면 향상됩니다. 동적으로 생성 된 페이지 / 활성 페이지 이외의 메서드를 호출하면 오류가 발생합니다.

모든 jQuery Mobile 위젯은 동적으로 향상 될 수 있습니다.

1. Listview :

   마크 업 향상 :

   $('#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');
   });
   

2. 단추

   마크 업 향상 :

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

   개선 예 : http://jsfiddle.net/Gajotres/m4rjZ/

   한 가지 더, 버튼을 만들기 위해 입력 요소를 사용할 필요가 없습니다. 기본 div로도 수행 할 수 있습니다. 여기에 예가 있습니다. http://jsfiddle.net/Gajotres/L9xcN/

3. Navbar

   마크 업 향상 :

   $('[data-role="navbar"]').navbar();
   

   개선 예 : http://jsfiddle.net/Gajotres/w4m2B/

   다음은 동적 navbar 탭을 추가하는 방법에 대한 데모입니다. http://jsfiddle.net/Gajotres/V6nHp/

   그리고 pagebeforecreate 이벤트 에서 하나 더 : http://jsfiddle.net/Gajotres/SJG8W/

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

   마크 업 향상 :

   $('[type="text"]').textinput();   
   

   개선 예 : http://jsfiddle.net/Gajotres/9UQ9k/

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

   마크 업 향상 :

   $('[type="range"]').slider();  
   

   개선 예 : http://jsfiddle.net/Gajotres/caCsf/

   pagebeforecreate 이벤트 중 개선 예 : http://jsfiddle.net/Gajotres/NwMLP/

   슬라이더는 동적으로 생성하기에는 약간 버그가 있습니다. 자세한 내용은 https://stackoverflow.com/a/15708562/1848600을 참조 하십시오.

6. 체크 박스 및 라디오 박스

   마크 업 향상 :

   $('[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/

7. 메뉴 선택

   마크 업 향상 :

   $('select').selectmenu();  
   

   개선 예 : http://jsfiddle.net/Gajotres/dEXac/

8. 접을 수 있는

   안타깝게도 접을 수있는 요소는 특정 방법을 통해 향상시킬 수 없으므로 대신 trigger ( 'create')를 사용해야합니다.

   개선 예 : http://jsfiddle.net/Gajotres/ck6uK/

9. 표

   마크 업 향상 :

   $(".selector").table("refresh");
   

   이것은 테이블 향상의 표준 방법이지만 지금은 작동하지 않습니다. 따라서 대신 trigger ( 'create')를 사용하십시오.

   개선 예 : http://jsfiddle.net/Gajotres/Zqy4n/

10. 패널 - 신규

    패널 마크 업 향상 :

    $('.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 mobile

  (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/

올바른 최대 콘텐츠 높이 얻기

페이지 머리글과 바닥 글에 일정한 높이의 콘텐츠가있는 경우 div는 약간의 CSS 트릭으로 사용 가능한 전체 공간을 덮도록 쉽게 설정할 수 있습니다.

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

And here's a working example with Google maps api3 demo: http://jsfiddle.net/Gajotres/7kGdE/

This method can be used to get correct maximum content height, and it must be used with a pageshow event.

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;
}

And here's a live jsFiddle example: http://jsfiddle.net/Gajotres/nVs9J/

There's one thing to remember. This function will correctly get you maximum available content height and at the same time it can be used to stretch that same content. Unfortunately it cant be used to stretch img to full content height, img tag has an overhead of 3px.

Methods of markup enhancement prevention:

This can be done in few ways, sometimes you will need to combine them to achieve a desired result.

• Method 1:

  It can do it by adding this attribute:

  data-enhance="false"
  

  to the header, content, footer container.

  This also needs to be turned in the app loading phase:

  $(document).one("mobileinit", function () {
      $.mobile.ignoreContentEnabled=true;
  });
  

  Initialize it before jquery-mobile.js is initialized (look at the example below).

  More about this can be found here:

  http://jquerymobile.com/test/docs/pages/page-scripting.html

  Example: http://jsfiddle.net/Gajotres/UZwpj/

  To recreate a page again use this:

  $('#index').live('pagebeforeshow', function (event) {
      $.mobile.ignoreContentEnabled = false;
      $(this).attr('data-enhance','true');
      $(this).trigger("pagecreate")
  });
  

• Method 2:

  Second option is to do it manually with this line:

  data-role="none"
  

  Example: http://jsfiddle.net/Gajotres/LqDke/

• Method 3:

  Certain HTML elements can be prevented from markup enhancement:

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

  Example: http://jsfiddle.net/Gajotres/gAGtS/

  Again initialize it before jquery-mobile.js is initialized (look at the example below).

Markup enhancement problems:

Sometimes when creating a component from scratch (like listview) this error will occur:

cannot call methods on listview prior to initialization

It can be prevented with component initialization prior to markup enhancement, this is how you can fix this:

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

Markup overrding problems:

If for some reason default jQuery Mobile CSS needs to be changed it must be done with !important override. Without it default css styles can not be changed.

Example:

#navbar li {
    background: red !important;
}

jsFiddle example: http://jsfiddle.net/Gajotres/vTBGa/

Changes:

• 01.02.2013 - Added a dynamic navbar demo
• 01.03.2013 - Added comment about how to dynamically add filtering to a listview
• 07.03.2013 - Added new chapter: Get correct maximum content height
• 17.03.2013 - Added few words to the chapter: Get correct maximum content height
• 29.03.2013 - Added new content about dynamically created sliders and fix an example bug
• 03.04.2013 - Added new content about dynamically created collapsible elements
• 04.04.2013 - Added 3rd party plugins chapter
• 20.05.2013 - Added Dynamically added Panels and contents
• 21.05.2013 - Added another way of setting full content height
• 20.06.2013 - Added new chapter: Markup overrding problems
• 29.06.2013 - Added an important note of WHEN to use enhancement methods

---

From JQMobile 1.4 you can do .enhanceWithin() on all the children http://api.jquerymobile.com/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