如何创建由 selectMenu 小部件创建的下拉列表的固定 header？

Question

我使用 selectMenu jQuery 小部件创建了一个下拉列表。这是它的代码。

$(function() {
  
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      ul.append("<li class='ui-header'>" + "CODE" +"&nbsp;&nbsp;&nbsp;"+"DESCRIPTION"+"</li>" + "<br>");
      
      
      
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>"  +item.optgroup + "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        // console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

.ui-menu .ui-menu-item {
  display: table;
  width: 100%;
}
.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
  font-style: italic;
}

.ui-header {
  font-weight: bold;
  position: absolute;
  background-color: #004600;
  color: white;
  z-index: 1;
}
.ui-header::after {
  content: "PRICE";
  float: right;
  padding-right: 70px;
}
/* .ui-selectmenu-category::after {
  content: "PRICE";
  float:right;
  padding-right: 50px;
} */

.ui-menu-item .ui-menu-item-wrapper {
  display: table-cell;
  vertical-align: top;
  padding: 1em 2px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
  background-color: #e4ebf1;
  color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;
  position: relative;
}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;
}

.overflow {
  height: 150px;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
    <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="[=13=].00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="[=13=].00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price=".00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price=".00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price=".00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>

</body>

</html>

现在，问题是我想固定 header，因为它显示在下拉列表的顶部。但问题是这个 header 与 scroll-bar 重叠。我尝试将 position: fixed 赋予此 header 但这创建了一个固定的 header 覆盖页面的整个宽度。与此同时，当我将位置更改为相对位置时，header 完全按照我想要的方式显示，但它没有固定。那么，有没有办法固定这个header的位置呢？如果 header 完全位于下拉列表上方，即不是 covering/overlapping 而不是 scroll-bar，我也将能够完成我的任务。请帮忙。

Answer 1

将包含真实下拉列表的 header 添加到 ul 元素并使用适当的 CSS 可以实现您的目标：

  ul.parent().prepend("<ul class='ui-header ui-menu ui-corner-bottom ui-widget ui-widget-content'><li class='ui-menu-item'><span class='ui-menu-item-wrapper'>" + "CODE" + "</span><span class='ui-menu-item-wrapper'>" + "DESCRIPTION" + "</span><span class='ui-menu-item-wrapper'>"+ "PRICE" + "</span></li></ul>");

CSS:

.ui-header {
  font-weight: bold;
  position: absolute;
  background-color: #004600;
  color: white;
  z-index: 1;
  height: 25px;
  width: 100%;
}

.ui-header .ui-menu-item .ui-menu-item-wrapper {
  padding: 0px;
}

#options-menu {
  margin-top: 25px;
}

代码片段：

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      ul.parent().prepend("<ul class='ui-header ui-menu ui-corner-bottom ui-widget ui-widget-content'><li class='ui-menu-item'><span class='ui-menu-item-wrapper'>" + "CODE" + "</span><span class='ui-menu-item-wrapper'>" + "DESCRIPTION" + "</span><span class='ui-menu-item-wrapper'>"+ "PRICE" + "</span></li></ul>");
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-optgroup ui-menu-divider ui-selectmenu-category'>" + item.optgroup + "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        // console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );
        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

.ui-menu .ui-menu-item {
  display: table;
  width: 100%;
}

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
  font-style: italic;
}

.ui-header {
  font-weight: bold;
  position: absolute;
  background-color: #004600;
  color: white;
  z-index: 1;
  height: 25px;
  width: 100%;
}

.ui-header .ui-menu-item .ui-menu-item-wrapper {
  padding: 0px;
}

#options-menu {
  margin-top: 25px;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: table-cell;
  vertical-align: top;
  padding: 1em 2px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
  background-color: #e4ebf1;
  color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;
  position: relative;
}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;
}

.overflow {
  height: 150px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
  <label for="options">Select an Option:</label>
  <select id="options">
    <optgroup label="PREFERRED OPTIONS">
      <option data-short="L" data-price="[=14=].00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
      <option data-short="K" data-price="[=14=].00">Standard Screw Adjustment</option>
    </optgroup>
    <optgroup label="STANDARD OPTIONS">
      <option data-short="C" data-price=".00">Tamper Resistant - Factory Set</option>
      <option data-short="K" data-price=".00">Handknob</option>
    </optgroup>
    <optgroup label="ADDITIONAL OPTIONS">
      <option data-short="F" data-price=".00">Hex Head Screw with Locknut</option>
      <option data-short="G" data-price=".00">Hex Head Screw with Locknut</option>
      <option data-short="H" data-price=".00">Hex Head Screw with Locknut</option>
    </optgroup>
  </select>
</div>

或fiddle：http://jsfiddle.net/beaver71/h5s8o0kb/

如何创建由 selectMenu 小部件创建的下拉列表的固定 header？

How to create a fixed header of the dropdown list created by the selectMenu widget?

jquery

jquery-ui

drop-down-menu

jquery-ui-selectmenu