阻止带有大量选项列表的 jquerymobile 多选控件的对话框视图答案

【问题标题】：prevent dialog view for jquerymobile multi select control with large list of options阻止带有大量选项列表的 jquerymobile 多选控件的对话框视图
【发布时间】：2012-06-25 00:07:31
【问题描述】：

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

我不希望这种行为的原因是它在 ipad 上运行不佳。使用对话框左侧的“X”关闭它变得很困难。由于某种原因，它在 ipad 上变得无响应，但在桌面上可以正常工作。

【问题讨论】：

标签： jquery-mobile dialog multi-select

【解决方案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
                });
            }

【讨论】：

我也有类似的愿望，可惜没有更好的方法来做到这一点。我需要在我的多个选择列表上处理 popupafterclose 事件（因为这是我保存数据的地方）。但是，此事件仅在以弹出模式显示时才会触发，而不是在页面模式下。处理此类案件有什么更好的想法吗？
嗨@dreamerkumar，我有类似的问题。你有没有找到更好的解决方案。
对不起@sham.y 自从我从事 jQuery Mobile 工作以来已经有很长时间了。我不记得找到更好的解决方案了。

【解决方案2】：

也许我找到了一个使用 css 的更简单的解决方案

.ui-selectmenu{
    max-height: 500px;
}

这会阻止 jquery mobile 识别选项的长列表并且它不会创建对话框。

请注意，所有选择控件都会发生这种情况。

最好将此选项限制为仅适用于桌面用户，以便在移动设备中使用整页对话框，这非常有用。例如使用

@media screen and (min-width: 768px) {
    .ui-selectmenu{
        max-height: 500px;
    }
}

【讨论】：

【解决方案3】：

这里有一段简单的 CSS 可以阻止对话框版本，并在列表中给你一个滚动条。

.ui-selectmenu { max-height: calc(95vh - 100px); } 
.ui-selectmenu-list { max-height: calc(95vh - 150px); overflow-y: auto; }

【讨论】：