阻止具有大量选项的jquerymobile多选控件的对话框视图

Question

所以我喜欢jquery-mobile拥有的自定义多选控件并希望使用它.所以请不要建议把data-role ="none".但是,如果选项列表很长,我只是不希望选择列表的默认行为在新的对话框窗口中打开.

原因我不希望这种行为是因为它在ipad上运行得不好.使用对话框左侧的"X"关闭它变得很困难.出于某种原因,它在ipad上变得没有响应,但在桌面上工作正常.

Answer 1

所以挖真的深入到jQuery Mobile的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
                });
            }