如何修复jQuery Mobile子菜单标题下的搜索字段 [英] How to fix search field below header in submenu of jQuery mobile
本文介绍了如何修复jQuery Mobile子菜单标题下的搜索字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个主菜单，单击主菜单会打开一个包含多个项目的子菜单. sub-header下方是search-field.
I have a main menu and a click on the main menu opens a sub menu with multiple items. Below the sub-header is a search-field.
我想修复sub-header下面的search-field，以使其不再与所有选项一起滚动.
I want to fix the search-field below the sub-header so that it doesn't scroll with all the options any longer.
我不确定CSS是否可以做到这一点.我没有通过将overflow-y: scroll添加到.ui-input-search来使其工作.
I am not sure whether this can be done with CSS. I didn't get it to work by adding overflow-y: scroll to .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>
推荐答案
来自JQM文档:
自定义选择菜单
自定义选择使用带有列表视图的弹出窗口显示菜单. 对于长列表，将使用一个对话框.
The custom select uses a popup with a listview to display the menu. For long lists a dialog will be used.
如果您需要在其中粘贴一些元素并仅滚动一长串项目，则框架将始终显示一个弹出窗口，因为列表项的总高度将永远不会超过屏幕高度.
If You need to stick some elements inside, and scroll only the long list of items, the framework will always display a popup, because the resulting total height of the list items will never exceed the screen height.
因此，这里的问题是计算不超过屏幕高度的子菜单列表视图的最大高度，以告诉框架此处不再需要可滚动对话框页面.
So, the problem here is to compute the maximum height of the submenu-listview that does not exceed the screen height, to tell the framework that the scrollable dialog page is not needed here anymore.
移动弹出窗口重新定位的修补程序到:调整窗口大小的来源"
$(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键或在其外部单击/轻击来关闭弹出窗口.
Just a note aside: a popup can be also closed by hitting the ESC key or by clicking/tapping outside of it.
这篇关于如何修复jQuery Mobile子菜单标题下的搜索字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
