阻止jquerymobile多选择控件的对话视图与大量选项列表 [英] prevent dialog view for jquerymobile multi select control with large list of options

问题描述

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

So I like the custom multi select control that jquery-mobile has and want to use it. So please don't suggest put data-role="none". But I just don't want the default behavior of the select list to open up in a new dialog window if the list of options is long.

我没有理由希望这个行为是在ipad上运行不好的。使用对话框左侧的X来关闭它变得很困难。由于某些原因，它在ipad上变得没有反应，但在桌面上工作正常。

Reason I don't want that behaviour is that it is not working so well on the ipad. It becomes tough to close it using the "X" on the left of the dialog. For some reason, it is becoming unresponsive on the ipad, but works fine on the desktop.

推荐答案

所以深入挖掘jquery手机javascript（这是痛苦的），找出这个决定是全屏显示在多选择列表。这段代码告诉我，没有任何标志可以设置为避免它。

So dug really deep into the jquery mobile javascript (it was painful) to find out where this decision of going full screen is made for the multi select list. This code tells me that there is no flag as such that I can set to avoid it.

但是，由于它取决于列表的高度（menuHeight），对我来说，修复是为了进行一些css更改（每个列表项减少填充） ），以减少我的列表大小：

However, since it is dependent on the height of the list (menuHeight), the fix that worked for me was to make some css changes (reduced padding for each list item) so that my list size was reduced:

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

如果你想要确定不显示对话框，那么一个脏修复将是你的本地拷贝的jQuery手机代码（我讨厌这样做，但这是唯一的方法）：

If you want to be dead sure to not show the dialog, then a dirty fix would be to put some override in your local copy of the jquery mobile code (I hate to do this but that's the only way):

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

这篇关于阻止jquerymobile多选择控件的对话视图与大量选项列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！