이제 폰갭 적응이 어느정도 되어서... 디자인 부분에 개선을 시도하고 있는데...

JQM(jQuery Mobile) panel 메뉴를 매번 페이지 마다 생성하는 것도 그렇고... (만약, 메뉴가 바뀐다면... 모든 페이지 수정? -0-)

 

아무래도 ajax 처럼 동적으로 컨텐츠를 불러와야 겠다 싶었습니다.

그러나... ajax로 컨텐츠는 불러와 지는데... JQM 스타일이 적용이 안되는 겁니다. (이건 머지? 내가 멀 잘못했나?)

 

구글링 한 결과 아래와 같습니다.

listview를 동적으로 불러왔다면... 아래와 같이 마지막에 listview("refresh");를 해줘야 합니다. (-0-; 과연 계속 이래야 하는건가?)

$("#app-status-ul").append('deviceready event received').listview("refresh");

 

 

만약 panel 내용을 갱신했다면 listview 갱신하기전에 .trigger("create"); 를 먼져 해줘야 합니다.

 

$('#defaultpanel').html(ajaxData).trigger("create");
$('#paneldata').listview("refresh");

    <div data-role="panel" data-display="overlay" id="defaultpanel">    
    </div>
    <script type="text/javascript" charset="utf-8">
      //$('#panelContent').load('ajax/panel.html');
      jQuery(function($) {
          $(document).ready(function() {
              $.ajax({
                  url: 'ajax/panel.html',
                  type: 'POST',
                  dataType: 'html',
                  timeout: 3000,
                  error: function () {
                      alert("오류");
                  },
                  success: function(ajaxData) {
                      $('#defaultpanel').html(ajaxData).trigger("create");
                      $('#paneldata').listview("refresh");
                  }
              });
          });
      });     
    </script> 

 

ajax/panel.html 소스는 대충 아래와 같습니다.

<ul data-role="listview" data-divider-theme="d" data-icon="false" id="paneldata">
  <li data-role="list-divider">외부 Plugin</li>
  <li><a href="barcodescanner.html">바코드 스캐너</a></li>
  <li data-role="list-divider">Phonegap API</li>
  <li><a href="">Notification(알림)</a></li>
</ul>

근데 왜 JQM은 이걸 자동으로 안해주는 걸까요? 아직 버전이 낮아서 그런건지... 흠흠흠...

동적 컨텐츠에 스타일 적용하는 것은 사용자 선택의 몫으로 남겨둔 것일까요?

(본인들이 JQM 스타일을 적용하고 싶으면 refresh 하고... 커스텀 스타일을 적용하고픈 사람들은 알아서 하그라... 그런건가요? 먼가 찜찜합니다.)