时间戳

首页 > 解决方案 > 如何修复jQuery mobile子菜单中标题下方的搜索字段

javascript - 如何修复jQuery mobile子菜单中标题下方的搜索字段

问题描述

我有一个主菜单，单击主菜单会打开一个包含多个项目的子菜单。下面sub-header是一个search-field.

我想修复search-field下面的问题，sub-header以便它不再滚动所有选项。

我不确定这是否可以用 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>

标签： javascriptjquerycssjquery-mobile

解决方案

来自 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 键或单击/点击它外部来关闭弹出窗口。

推荐阅读