ngăn chế độ xem hộp thoại cho điều khiển chọn nhiều jquerymobile với danh sách tùy chọn lớn

Question

Vì vậy, tôi thích điều khiển chọn nhiều tùy chỉnh mà jquery-mobile có và muốn sử dụng nó. Vì vậy, xin vui lòng không đề nghị đặt data-role = "none". Nhưng tôi không muốn hành vi mặc định của danh sách lựa chọn để mở ra trong một cửa sổ hộp thoại mới nếu danh sách các tùy chọn dài.

Lý do tôi không muốn hành vi đó là nó không hoạt động tốt trên iPad. Nó trở nên khó khăn để đóng nó bằng cách sử dụng "X" ở bên trái của hộp thoại. Đối với một số lý do, nó đang trở thành không phản hồi trên ipad, nhưng hoạt động tốt trên máy tính để bàn.

Answer 1

Vì vậy, hãy đào sâu vào javascript di động jquery (thật là đau đớn) để tìm hiểu xem quyết định đi toàn màn hình này được thực hiện cho danh sách đa lựa chọn. Mã này cho tôi biết rằng không có lá cờ nào như vậy mà tôi có thể đặt để tránh nó.

Tuy nhiên, vì nó phụ thuộc vào chiều cao của danh sách (menuHeight), việc sửa chữa mà làm việc cho tôi là thực hiện một số thay đổi css (giảm đệm cho mỗi mục trong danh sách) để kích thước danh sách của tôi đã giảm:

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

Nếu bạn muốn chắc chắn không hiển thị hộp thoại, sau đó sửa chữa bẩn sẽ ghi đè lên bản sao cục bộ của mã di động jquery (Tôi ghét làm điều này nhưng đó là cách duy nhất):

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