evitar la vista de diálogo para el control de selección múltiple de jquerymobile con una gran lista de opciones

Question

Así que me gusta el control de selección múltiple personalizado que tiene jquery-mobile y quiero usarlo. Por lo tanto, no sugiera put data-role = "none". Pero simplemente no quiero que el comportamiento predeterminado de la lista de selección se abra en una nueva ventana de diálogo si la lista de opciones es larga.

Motivo No quiero que el comportamiento sea que no está funcionando tan bien en el ipad. Se vuelve difícil cerrarlo usando la "X" a la izquierda del diálogo. Por alguna razón, está dejando de responder en el ipad, pero funciona bien en el escritorio.

Answer 1

Por lo tanto, profundicé profundamente en el javascript jquery mobile (fue doloroso) para saber dónde se realiza esta decisión de pasar a pantalla completa para la lista de selección múltiple. Este código me dice que no hay una bandera como tal que pueda configurar para evitarlo.

Sin embargo, puesto que depende de la altura de la lista (menuHeight), la solución que trabajó para mí era hacer algunos cambios de estilo CSS (reducción de relleno para cada elemento de la lista) para que mi tamaño de la lista se redujo:

.ui-selectmenu-list li .ui-btn-inner a.ui-link-inherit 
{ 
    padding: .5em 15px .5em 15px;  
} 

Si quiere estar seguro de no mostrar el cuadro de diálogo, una solución sucia sería poner algo de sobreescritura en su copia local del código móvil de jquery (odio hacerlo, pero esa es la única forma):

//TODO: vishalkumar : I can override here by replacing below line by if (false)   
if (menuHeight > screenHeight - 80 || !$.support.scrollTop) { 

       self.menuPage.appendTo($.mobile.pageContainer).page(); 
       self.menuPageContent = menuPage.find(".ui-content"); 
       self.menuPageClose = menuPage.find(".ui-header a"); 

       // prevent the parent page from being removed from the DOM, 
       // otherwise the results of selecting a list item in the dialog 
       // fall into a black hole 
       self.thisPage.unbind("pagehide.remove"); 

       //for WebOS/Opera Mini (set lastscroll using button offset) 
       if (scrollTop == 0 && btnOffset > screenHeight) { 
        self.thisPage.one("pagehide", function() { 
         $(this).jqmData("lastScroll", btnOffset); 
        }); 
       } 

       self.menuPage.one("pageshow", function() { 
        focusMenuItem(); 
        self.isOpen = true; 
       }); 

       self.menuType = "page"; 
       self.menuPageContent.append(self.list); 
       self.menuPage.find("div .ui-title").text(self.label.text()); 
       $.mobile.changePage(self.menuPage, { 
        transition: $.mobile.defaultDialogTransition 
       }); 
      }