所以我喜欢jquery-mobile的自定义多选控件,并且想要使用它。所以请不要建议把data-role =“none”。但是,如果选项列表很长,我只是不希望选择列表的默认行为在新的对话框窗口中打开。
原因我不希望这种行为是因为它在ipad上运行得不好。使用对话框左侧的“X”关闭它变得很困难。出于某种原因,它在ipad上变得没有响应,但在桌面上工作正常。
答案 0 :(得分:8)
因此深入挖掘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
});
}
答案 1 :(得分:0)
也许我找到了使用CSS的简单解决方案
.ui-selectmenu{
max-height: 500px;
}
这将阻止jquery mobile识别较长的选项列表,并且不会创建对话框。
请注意,所有选择控件都将发生这种情况。
最好只对桌面用户限制此选项,以便在移动设备中使用整页对话框,这非常有用。 例如使用
@media screen and (min-width: 768px) {
.ui-selectmenu{
max-height: 500px;
}
}
答案 2 :(得分:0)
以下是一些简单的CSS,可以防止出现对话框版本,并在列表内提供滚动条。
.ui-selectmenu { max-height: calc(95vh - 100px); }
.ui-selectmenu-list { max-height: calc(95vh - 150px); overflow-y: auto; }