防止jquerymobile多選控件的對話框視圖與選項的大列表

Question

所以我喜歡jquery-mobile有和想要使用它的自定義多選控件。所以請不要建議把data-role =「none」。但是如果選項列表很長，我不想讓選擇列表的默認行爲在新的對話窗口中打開。

原因我不希望這種行爲是因爲它不能很好地工作在ipad上。使用對話框左側的「X」關閉它變得非常困難。出於某種原因，它在ipad上變得沒有響應，但在桌面上工作正常。

Answer 1

因此，深入瞭解jQuery的移動javascript（這是很痛苦的），以找出在多選列表中進行全屏顯示的決定。這段代碼告訴我沒有這樣的標誌，我可以設置避免它。

然而，由於它是依賴於列表（menuHeight）的高度，這對我工作的修復是使一些CSS改變（減少每個列表項的填充），使我的名單尺寸減小：

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

如果你想死的肯定不會顯示對話框，那麼一個骯髒的修復將是在您的本地副本jquery移動代碼（我討厭這樣做，但這是唯一的方法）的一些重寫：

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