[JQUERY] 모바일 jQuery를 동적으로 추가 된 콘텐츠의 마크 업 향상

모바일 jQuery를 동적으로 추가 된 콘텐츠의 마크 업 향상

해결법

1. ---

   1.이 문서는 또한 여기에 내 블로그의 일환으로 볼 수 있습니다.

   이 문서는 또한 여기에 내 블로그의 일환으로 볼 수 있습니다.

   동적으로 생성 된 콘텐츠 마크 업을 강화하는 방법에는 여러 가지가 있습니다. 그것은 동적으로 jQuery를 모바일 페이지에 새로운 내용을 추가 할 충분하지 않다, 새로운 콘텐츠는 고전 jQuery를 모바일 스타일링 강화해야합니다. 이 오히려 무거운 작업을 처리하기 때문에 가능한 jQuery를 모바일 덜 가능한 강화로 할 필요가있는 경우, 어떤 우선 순위가있을 필요가있다. 하나의 구성 요소가 필요 년대의 스타일 지정하는 경우 전체 페이지를 강화하지 마십시오.

   이 모든 것은 무엇을 의미합니까? 페이지 플러그인은 대부분의 위젯 데 사용하는 pageInit 이벤트 전달하면 자신을 자동 초기화. 그것은 자동으로 페이지에 발견 한 위젯의 인스턴스를 향상시킬 것입니다.

   당신이 페이지에 Ajax를 통해 그리고 분사 내용의 새로운 마크 업 클라이언트 측 또는 부하를 생성하는 경우, 당신은 새로운 마크 업에 포함 된 모든 플러그인에 대한 자동 초기화를 처리하기 위해 이벤트를 만들 트리거 할 수 있습니다. 이것은 당신에게 수동 (등, 선택, 목록보기 버튼) 각 플러그인을 초기화하는 작업을 저장, 모든 요소 (심지어 페이지 DIV 자체)에 트리거 할 수 있습니다.

   이를 염두에두고 향상 수준을 논의 할 수 있습니다. 이 중 세이며, 그들은 더 높은 사람에게 요구 적은 리소스에서 분류되어 있습니다 :

   모든 jQuery를 모바일 동적으로 향상 될 수있다 위젯 :

   경우에 우리는 그것을이 함께 할 수있는 번과에서 모든 작업을 수행하는 것이 가장 바람직합니다 전체 페이지의 콘텐츠를 재 구축 / 생성된다 :

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

   인핸스 예 : http://jsfiddle.net/Gajotres/426NU/

   불행하게도 우리는 트리거 ( '생성') 머리글과 바닥 글 마크 업을 향상시킬 수 없습니다. 이 경우 우리는 큰 총이 필요합니다 :

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

   인핸스 예 : http://jsfiddle.net/Gajotres/DGZcr/

   나는 공식 jQuery를 모바일 문서에서 찾을 수 없기 때문에이 거의 신비 방법이다. 그럼에도 불구하고 그것은 쉽게 경고가 정말 필요한 경우가 아니면 사용하지와 jQuery를 모바일 버그 추적기에서 발견된다.

   참고 .trigger ( 'pagecreate'); 페이지 새로 고침 당 한 번만 사용할 수 가정 해 봅시다 수, 나는 그것이 사실이 아닌 것으로 판명 :

   http://jsfiddle.net/Gajotres/5rzxJ/

   여러 3 자 향상 플러그인이 있습니다. 일부는 기존의 방법에 대한 업데이트로 만들어진 일부는 깨진 JQM의 기능을 해결하기 위해 만들어집니다.

   일정한 높이 콘텐츠 DIV 쉽게 약간의 CSS 트릭 전체 사용 가능한 공간을 포함하도록 설정할 수 있습니다 경우 페이지 머리글과 바닥 글에서있다 :

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

   그리고 여기에 구글과 작업 예제는 API3 데모를 매핑 : http://jsfiddle.net/Gajotres/7kGdE/

   이 방법은 올바른 최대 콘텐츠의 높이를 가져 오는 데 사용 될 수 있으며, 그것은의 pageshow 이벤트와 함께 사용되어야합니다.

   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의 오버 헤드가 있습니다.

   이것은 때때로 당신이 원하는 결과를 얻기 위해 그들을 결합해야합니다, 몇 가지 방법으로 수행 할 수 있습니다.

   (목록보기 등) 처음부터 구성 요소를 작성하는 경우에 때이 오류가 발생합니다 :

   를 사전 향상을 마크 업 구성 요소의 초기화 방지 할 수 있습니다, 이것은 당신이이 문제를 해결할 수있는 방법입니다 :

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

   어떤 이유로 기본에 대한 jQuery를 모바일 CSS를 변경해야하는 경우 그것은 함께! 중요한 우선 수행해야합니다. 그게 없으면 기본 CSS 스타일을 변경할 수 없습니다.

   예:

   #navbar li {
       background: red !important;
   }
   

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

2. ---

   2.JQUERY 모바일 1.4에서 당신은 모든 아이들에 http://api.jquerymobile.com/enhanceWithin/) (내 .enhance 할 수

   JQUERY 모바일 1.4에서 당신은 모든 아이들에 http://api.jquerymobile.com/enhanceWithin/) (내 .enhance 할 수

   var content = '<p>Hi</p>';
   $('#somediv').html(content);
   $('#somediv').enhanceWithin();
   

from https://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content by cc-by-sa and MIT license