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

jquery mobile select

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.

La razón por la que no quiero ese comportamiento es porque 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

Así que profundicé profundamente en el Javascript de jquery mobile (fue doloroso) para saber dónde se toma 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, dado que depende de la altura de la lista (menuHeight), la solución que funcionó para mí fue realizar algunos cambios css (relleno reducido para cada elemento de la lista) para que se redujera el tamaño de mi lista:

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

Si quieres estar completamente seguro de no mostrar el diálogo, entonces una solución sucia sería poner algo de sobrescritura en tu copia local del código móvil de jquery (Odio hacer esto, pero esa es la única manera):

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