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

问题描述 投票：1回答：1

我使用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="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>

</body>

</html>

现在，问题是我想制作一个固定的标题，因为它显示在下拉列表的顶部。但问题是这个标题与滚动条重叠。我尝试将position: fixed提供给此标题，但这会创建一个覆盖整个页面宽度的固定标题。与此同时，当我将位置更改为相对时，标题显示为我想要的，但它没有修复。那么，有没有办法解决这个标题的位置？如果标题完全在下拉列表上方，即不覆盖/重叠滚动条，我也将能够完成我的任务。请帮忙。

jquery jquery-ui drop-down-menu jquery-ui-selectmenu
1个回答
1
投票

将标题添加到包含真实下拉列表的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="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
      <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
    </optgroup>
    <optgroup label="STANDARD OPTIONS">
      <option data-short="C" data-price="$5.00">Tamper Resistant - Factory Set</option>
      <option data-short="K" data-price="$6.00">Handknob</option>
    </optgroup>
    <optgroup label="ADDITIONAL OPTIONS">
      <option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
      <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
      <option data-short="H" data-price="$4.00">Hex Head Screw with Locknut</option>
    </optgroup>
  </select>
</div>

或小提琴：http://jsfiddle.net/beaver71/h5s8o0kb/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.