2011-10-21 2 views
0

나는 jQuery 모바일 (그리고 JS :)을 가진 꽤 초보자 다. 나는 너무 쉬운 것처럼 보이는 것을 말하고있다. 나는 지금 이틀 동안 인터넷을 검색해 보았지만 해결책을 찾지 못했습니다.jQuery Mobile : div 태그의 listview (새로 고침)?

$ (# someList) .listview ('refresh')와 동일하지만 div 태그의 기능이 있는지 알고 싶습니다. 두 개의 div 태그가 있고 그 내용을 dinamycally 변경하면 스타일이 느슨합니다.

코드 :

function muestraFicha() { 
    var categoriaFicha = "Ciencia/Matemáticas"; 
    var preguntaFicha = "Si un tren eléctrico sale de Valencia dirección Barcelona a 60Km/h con viento norte de 30Km/h ¿Hacia qué dirección saldrá el viento de su chimenea?"; 
    var respuestaFicha = "En ninguna dirección, es un tren eléctrico y por lo tanto no despide humo"; 
    var divRespuesta = "<div data-role='collapsible' data-theme='b' data-content-theme='c'>" 

    $("#fichaRespuesta").empty(); //vaciamos la ficha 
    $("#fichaRespuesta").append("<h4> Respuesta </h4>"); 
    $("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>"); 

    $("#fichaPregunta").empty(); 
    $("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>"); 
    $("#fichaPregunta").append("<p>" + preguntaFicha + "</p>"); 
} 

그래서, 함수의 말에 나는 a를 .listview ('새로 고침') 또는 HTML은 함수가 처음 호출 스타일 무언가가 필요합니다.

스타일을 잃는 div는 fichaRespuesta 및 fichaPregunta입니다.

감사합니다. 당신이 jQuery를 모바일 스타일의 새로운 DOM 요소를 가지고 싶다면

답변

2

, 당신은 .trigger('create'); 기능을 사용할 수 있습니다 :

새로운 이벤트를 "만드는"한번의

에서 모든 위젯을 향상 페이지 플러그인 동안 더 이상 각 플러그인을 더 이상 호출하지 않으므로 은 대부분의 위젯이 자동으로 초기화하는 데 사용하는 "pagecreate"이벤트를 전달합니다. 위젯 플러그인 스크립트가 인 경우, 이전과 마찬가지로 페이지에서 찾은 위젯 인스턴스를 자동으로 향상시킵니다. 예를 들어, 선택 메뉴 플러그인이로드 된 경우 새로 작성한 페이지에서 찾은 선택 항목이 향상됩니다.

이제이 구조를 통해 이 될 수있는 새로운 create 이벤트를 추가 할 수 있으므로 해당 요소에 포함 된 각 플러그인을 수동으로 초기화하는 작업을 줄일 수 있습니다. 지금까지 개발자이 Ajax를 통해 콘텐츠에로드되거나 동적으로 생성 된 마크 업인 경우 은 마크 업에서 위젯을 향상시키기 위해 포함 된 모든 플러그인 (목록보기 버튼, 선택 등)을 수동으로 초기화해야했습니다.

편리한 만들기 이벤트는 페이지 생성 향상 방법 프로세스가 작동하는 것과 마찬가지로 해당 마크 업 내에서 필요한 모든 플러그인을 초기화합니다 ( ). Ajax를 사용하여 HTML 마크 업 (로그인 양식) 블록을로드하는 경우, 포함 된 모든 위젯 ( 의 경우 입력 및 단추)을 향상된 버전으로 자동으로 변환하기 위해 생성을 트리거 할 수 있습니다. 이 시나리오의 코드는 다음과 같습니다.

$ ... ... 위젯을 포함하는 새 마크 업 ... .appendTo (".ui-page" ) .trigger ("create");

새로 고침 대 만듭니다 중요한 차이를

참고 일부 위젯이 가지고있는 이벤트 를 작성하고 새로 고침 방법 사이에는 중요한 차이가있다. create 이벤트는 하나 이상의 위젯을 포함하는 원시 마크 업 향상을 위해 에 적합합니다.프로그래밍 방식으로 조작 된 (이미 향상된) 위젯에서는 일부 위젯이 사용되어야하고 일치하도록 UI를 업데이트해야하는 새로 고침 방법 인 을 사용해야합니다. 당신은 당신이 동적 데이터 역할 = 페이지 생성 후 목록보기 속성, 그 목록의 부모 요소에서 작성 트리거 으로 새 정렬되지 않은 목록을 추가 페이지가 있다면

예를 들어, 것이라고는 스타일리스트 뷰로 변환 위젯. 더 많은 목록 항목이 프로그래밍 방식으로 추가 된 이면 listview의 새로 고침 메서드를 호출하면 은 새 목록 항목 만 향상된 상태로 업데이트하고 기존 목록 항목은 그대로 유지합니다. 위의 정보에

링크 : 또한

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/ 난 당신이 연속적으로 같은 선택기를 사용하는 통지, 당신은 크게과 같이, 함께 선택기에 대한 호출 체인에 의해 코드의 성능을 향상시킬 수 있습니다 :

변경 :

$("#fichaRespuesta").empty(); //vaciamos la ficha 
$("#fichaRespuesta").append("<h4> Respuesta </h4>"); 
$("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>"); 

$("#fichaPregunta").empty(); 
$("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>"); 
$("#fichaPregunta").append("<p>" + preguntaFicha + "</p>"); 

사람 :

,577,

알림 .append() 호출 중 하나를 제거한 이유는이 호출이 두 번 연속 호출되기 위해 추가 오버 헤드를 생성했기 때문입니다. 대신 나는 두 전화 모두 .append()에 대한 HTML을 한 번 호출합니다.

당신이 정말로 당신의 코드 성능이 향상 선택기를 캐시 만들기로 얻고 싶은 경우에 그들이 단지 보았다 업 될 번과 같이 그래서 :

var $fichaRespuesta = $('#fichaRespuesta'), 
    $fichaPregunta = $('#fichaPregunta'); 
function muestraFicha() { 
    /*I removed your extra code to make this easier to read*/ 

    $fichaRespuesta.empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>"); 

    $fichaPregunta.empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>"); 
+0

와우! 훌륭한 답변은 내 요구를 해결했을뿐만 아니라 앱 성능을 개선하는데도 도움이되었습니다. 재스퍼, 고마워. –

+1

반갑습니다. 위의 코드를 다시 보았는데'.empty(). append ()를 호출하는 것은'.html ()를 호출하는 것과 같습니다. '.html ()'문서 : http://api.jquery.com/html/ – Jasper