所以我喜欢 jquery-mobile 的自定义多选控件,并且想使用它。所以请不要建议放置 data-role="none"。但如果选项列表很长,我只是不希望在新的对话框窗口中打开选择列表的默认行为。
我不希望这种行为的原因是它在 ipad 上运行得不太好。使用对话框左侧的“X”来关闭它变得很困难。由于某些原因,它在 iPad 上变得无响应,但在桌面上运行良好。
因此,深入研究了 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
});
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)