如何修复jQuery mobile子菜单中标题下方的搜索字段
Posted
技术标签:
【中文标题】如何修复jQuery mobile子菜单中标题下方的搜索字段【英文标题】：How to fix search field below header in submenu of jQuery mobile 【发布时间】：2020-06-10 15:46:30 【问题描述】：我有一个主菜单，单击主菜单会打开一个包含多个项目的子菜单。在sub-header 下方是search-field。
我想修复sub-header 下方的search-field，使其不再滚动显示所有选项。
我不确定这是否可以通过 CSS 完成。我没有通过将overflow-y: scroll 添加到.ui-input-search 来使其工作。
$(document).on("pagecreate", "#demo-dialog", function(e)
var form = $("<form><input data-type='search'/></form>"),
page = $(this);
$(".ui-content", this)
.prepend(form);
form.enhanceWithin()
.on("keyup", "input", function()
var data = $(this).val().toLowerCase();
$("li", page).addClass("ui-screen-hidden")
.filter(function(i, v)
return $(this).text().toLowerCase().indexOf(data) > -1;
).removeClass("ui-screen-hidden");
);
$(document).on("pagecontainerhide", function()
$("#demo-menu li").removeClass("ui-screen-hidden");
$("input", form).val("");
);
);
$(document).on("pagebeforeshow", ".ui-dialog", function()
$(".ui-dialog .ui-header a").buttonMarkup(
theme: "e",
iconpos: "left",
icon: "delete"
);
);
$(document).on("change", "#multi", function()
if ($("option:selected", this).length == 0)
$(".ui-dialog .ui-header a .ui-btn-text").text("Close");
if ($("option:selected", this).length > 0)
$(".ui-dialog .ui-header a .ui-btn-text").text("Done!");
);.ui-selectmenu.ui-popup .ui-input-search
margin-left: .5em;
margin-right: .5em;
.ui-selectmenu.ui-dialog .ui-content
padding-top: 0;
max-height: 85vh;
overflow-y: scroll;
.ui-selectmenu.ui-dialog .ui-selectmenu-list
margin-top: 0;
.ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn
border-top-width: 1px;
-webkit-border-radius: 0;
border-radius: 0;
.ui-selectmenu.ui-dialog .ui-header
border-bottom-width: 1px;
padding-left: 50px;
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<form>
<div class="ui-field-contain">
<label for="demo">Long list:</label>
<select name="demo" id="demo" multiple="multiple" data-native-menu="false" class="filterable-select">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</form>【问题讨论】：
【参考方案1】：来自 JQM 文档：
自定义选择菜单
自定义选择使用带有列表视图的弹出窗口来显示菜单。 对于长列表，将使用对话框。
如果您需要在里面粘贴一些元素，并且只滚动一长串项目，框架将始终显示一个弹出窗口，因为列表项目的总高度永远不会超过屏幕高度。
所以，这里的问题是计算不超过屏幕高度的子菜单列表视图的最大高度，告诉框架这里不再需要可滚动的对话框页面。
编辑：移动弹出窗口重新定位的修补程序：窗口调整大小时的“原点”
$(document).on("selectmenucreate", "select[data-native-menu=false]", function(e, ui)
var data = $(this).data("mobile-selectmenu"), hide = "display": "none";
data.list.attr("data-filter", "true").find("li[data-placeholder='true']").css(hide);
$("#" + data.menuId).css("max-height", "0");
$("#" + data.popupId)
.enhanceWithin()
.popup("option", positionTo: data.button, history: false)
.data('mobile-popup').renderData = selectId: this.id, mH: 0, hH: 0, fH: 0, iH: 0;
$(this).on("change", function ()
if ($("option:selected", this).length === 0)
data.headerClose.addClass("ui-icon-delete").removeClass("ui-icon-check");
else
data.headerClose.addClass("ui-icon-check").removeClass("ui-icon-delete");
);
);
$(document).on("popupbeforeposition", function(e, ui)
var popup = $(e.target), data = popup.data("mobile-popup"), rD = data.renderData;
if(rD)
var select = $("#" + rD.selectId);
var sH = $.mobile.getScreenHeight();
if (rD.iH === 0)
rD.mH = popup.outerHeight(true) - popup.height();
rD.hH = popup.find('.ui-header').outerHeight(true);
rD.fH = popup.find('.ui-filterable').outerHeight(true);
rD.iH = popup.find('li').outerHeight(true);
var maxItems = ((sH - rD.mH - rD.hH - rD.fH - 50) / rD.iH)|0,
maxHeight = maxItems * rD.iH;
select.data("mobile-selectmenu").list.css("max-height", maxHeight+"px");
);
$(document).on("popupafterclose", function(e, ui)
var popup = $(e.target), data = popup.data("mobile-popup"), rD = data.renderData;
if(rD)
popup.find("li").removeClass("ui-screen-hidden");
popup.find(".ui-filterable input").val("");
$("#" + rD.selectId).data("mobile-selectmenu").list.css("max-height", "0");
);/* scrollable listview for select popup */
.ui-selectmenu-list.ui-listview
overflow-x: hidden;
overflow-y: auto;
/* just some air around the popup */
.ui-selectmenu.ui-popup
padding: 0.6em;
.ui-selectmenu .ui-header .ui-icon-delete
background-color: orange !important;
border: 1px solid red !important;
.ui-selectmenu .ui-header .ui-icon-check
background-color: #90ee90 !important;
border: 1px solid green !important;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script>
$( document ).on( "mobileinit", function()
$.widget( "mobile.popup", $.mobile.popup,
_resizeTimeout: function()
if ( this._isOpen )
if ( !this._expectResizeEvent() )
if ( this._ui.container.hasClass( "ui-popup-hidden" ) )
this._ui.container.removeClass( "ui-popup-hidden ui-popup-truncate" );
this.reposition( positionTo: this.options.positionTo ); /* hotfix */
this._ignoreResizeEvents();
this._resizeScreen();
this._resizeData = null;
this._orientationchangeInProgress = false;
else
this._resizeData = null;
this._orientationchangeInProgress = false;
);
);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="page-select-country">
<div data-role="content">
<div class="ui-field-contain">
<label for="country-select">Select Country</label>
<select name="country-select" id="country-select" multiple="multiple" data-native-menu="false">
<option>Choose Your Country</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
</select>
</div>
<div class="ui-field-contain">
<label for="city-select">Select City</label>
<select name="city-select" id="city-select" multiple="multiple" data-native-menu="false">
<option>Choose Your City</option>
<option value="LA">Los Angeles</option>
<option value="NY">New York</option>
<option value="SF">San Francisco</option>
<option value="WH">Washington</option>
</select>
</div>
</div>
</div>
</body>
</html>请注意：弹出窗口也可以通过按 ESC 键或在弹出窗口外部单击/点击来关闭。
【讨论】：
如我所见，您已从对话框切换到弹出窗口以修复搜索字段。为简单起见，我在发布问题之前删除了以下功能。不幸的是，此功能不适用于弹出窗口。是否有可能修复对话窗口中的搜索字段？感谢您的耐心等待！ $(document).on("pagebeforeshow", ".ui-dialog", function () $(".ui-dialog .ui-header a").buttonMarkup( theme: "e", iconpos: "left", icon: "删除" ); ); $(document).on("change", "#country-select", function () if ($("option:selected", this).length == 0) $(".ui-dialog .ui -header a .ui-btn-text").text("Close"); if ($("option:selected", this).length > 0) $(".ui-dialog .ui-header a .ui-btn-text").text("完成！"); ); @Columbus：正确，我相信切换到弹出窗口有一些原因。关于关闭按钮，我编辑了我的示例。请检查一下。 感谢解禁器！最后一个问题：在我遇到标签问题的另一个版本中选择一个选项后，如何添加绿色复选标记？不幸的是，我认为由于计算繁忙，弹出解决方案相当慢。我试图从这里转移您的解决方案，但没有成功。 @Columbus：我对弹出版本做了一些优化。您在哪里发现了性能问题？能否请您尝试新版本并告诉我？以上是关于如何修复jQuery mobile子菜单中标题下方的搜索字段的主要内容，如果未能解决你的问题，请参考以下文章
如何修改jQuery mobile子菜单中的关闭按钮以进行初始打开