个人中心
gpt4 book ai didi

jquery - 如何使用 jQuery UI selectMenu 小部件在下拉列表中创建 3 列？

转载 作者：太空宇宙 更新时间：2023-11-03 21:10:14 25 4
gpt4 key购买 nike

我的任务是创建一个包含 3 列(每行)的下拉列表，如下图所示。

dropdown image

现在，我意识到 jQuery UI 的 Selectmenu 小部件可以满足我的要求，因此，我使用了以下代码(在 their official documentation page 上给出)。

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>selectmenu demo</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

<style>

label { display: block; }

select { width: 200px; }

.overflow { height: 200px; }

</style>

<script src="//code.jquery.com/jquery-1.12.4.js"></script>

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>

<label for="number">Select a number:</label>

<select name="number" id="number">

<option value="1">1</option>

<option value="2" selected>2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

</select>

<script>

$( "#number" )

.selectmenu()

.selectmenu( "menuWidget" )

.addClass( "overflow" );

</script>

</body>

</html>

问题是我想创建 3 列而不是 1 个默认列。因此，我尝试了两种选项来对齐选项标签内的文本内容。

  1. 将文本放在 span 标签内。
  2. 将文本放入由一行三列(单元格)组成的表格中。

下面是我试过的代码。

<option value="1">
        <span align="left">Apple</span>
        <span align="center">Mango</span>
        <span align="right">Orange</span>
        </option>
      <option value="2" selected>
      <table>
        <tr>
          <td align="left">1</td>
          <td align="center">2</td>
          <td align="right">3</td>
        </tr>
        </table>
      </option>

但这并没有解决我的问题，因为我得到的输出如下图所示。

wrong output

由于我是 HTML、CSS 和 jQuery 的初学者，因此，我不知道下一步该怎么做才能创建一个每行包含 3 列的下拉列表。请注意，我将选择包含所有 3 列的整行(如下图所示)，而不是任何特定列的任何单元格。任何人都可以建议如何解决此问题并创建下拉列表如第一张图片所示？

最佳答案

首先，我们要创建一个合适的 HTML 结构。有一个 select 元素你会想了解:<optgroup> .这是一个基本的建议结构。

<label for="options">Select an Option:</label>
<select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option value="L">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option value="C">Tamper Resistant - Factory Set</option>
    <option value="K">Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option value="F">Hex Head Screw with Locknut</option>
  </optgroup>
</select>

这只是一个开始。您可以使用 $("#options").selectmenu();你离你想要的更近了。我们仍然需要添加更多元素并合并额外数据。

The selectmenu widget is built with the widget factory and can be extended. When extending widgets, you have the ability to override or add to the behavior of existing methods.

这正是我们要做的，以 .autocomplete() 中的示例为例.请在此处查看此示例:http://jqueryui.com/autocomplete/#categories

我们将在 .selectmenu() 内执行相同类型的覆盖.小部件工厂及其代码有时可能有点高级并且有点难以理解，因此您必须自己深入研究。

HTML

<label for="options">Select an Option:</label>
<select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00" value="L">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" value="C">Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" value="K">Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="-$4.00" value="F">Hex Head Screw with Locknut</option>
  </optgroup>
</select>

您在上面看到的是我们最初构建的内容的扩展。我添加了 data属性。它们对我们的 HTML 意义不大，但对我们的 jQuery 很有用。这里的好处是，如果我们遇到不支持 JavaScript 的浏览器(因此无法加载 jQuery 库)，代码将回退到基本的 HTML 标记，并且仍然为用户提供类似的体验。

CSS

.ui-selectmenu-category {
  color: #5F5F5F;
  padding: .5em .25em;
}
.ui-menu-item {
}
.ui-menu-item .ui-menu-item-wrapper {
  display: inline-block;
  padding: 1em 2px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  border-width: 1px 0 1px 0;
  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: 295px;
}

.ui-menu-item .short {
  color: #2E6D99;
  font-weight: strong;
  width: 30px;
  padding-left: .5em;
}

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

我们将为 .selectmenu() 覆盖和扩展一些主题元素.这一切只是为了帮助它符合所需的外观和感觉。

JavaScript

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.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: 400
  });
});

工作示例: https://jsfiddle.net/Twisty/sn1z5vzn/7/

这里是我们将 $.ui.selectmenu 带到的地方并将其扩展到我们自己的用途。你可以看到我们只为 _renderMenu 编写了一个函数。扩展点。选择菜单的其他所有内容都将保持不变。

这很重要，因为我们需要定义一个 width选项。我们需要知道宽度，以便我们可以从本质上创建适当的列。

这将遍历每个 items并创建 li与 ul 一起使用的元素这是由 selectmenu 创建的。生成的元素将如下所示:

<li aria-label="PREFERRED OPTIONS : Standard Screw Adjustment" class="ui-menu-item">
  <span class="short ui-menu-item-wrapper ui-state-active" id="ui-id-1" tabindex="-1" role="option">L</span>
  <div id="ui-id-2" tabindex="-1" role="option" class="ui-menu-item-wrapper ui-state-active">Standard Screw Adjustment</div>
  <span class="price ui-menu-item-wrapper ui-state-active" id="ui-id-3" tabindex="-1" role="option">$0.00</span>
</li>

jQuery UI 为我们做了很多额外的工作，分配唯一的 ID 和应用悬停类等。我们添加的内容允许我们为每个元素的不同部分设置样式和主题。

类别项不想玩好。到目前为止，我发现如果我尝试将任何 HTML 元素添加到其中是 li ，它无法正确呈现菜单的其余部分。我可能会回去看看是否_renderItem将在这里提供帮助。

很简单，对吧!？如果您有任何问题，请发表评论。

引用资料

更新

如果您像这样更改选项:

<option data-icon-url="https://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16" data-price="$0.00" value="L">Standard Screw Adjustment</option>

然后您可以更新 <span>将其用作背景。

CSS 片段

.ui-menu-item .icon {
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center center; 
  color: #2E6D99;
  font-weight: strong;
  width: 30px;
  padding-left: .5em;
}

JavaScript 代码段

    li.prepend($("<span>", {
      class: "icon",
      style: "background-image: url('" + iconUrl + "')"
    }).html("&nbsp;"));

&nbsp;呈现不间断空格字符。

A common character entity used in HTML is the non-breaking space: &nbsp;

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

工作示例:https://jsfiddle.net/Twisty/sn1z5vzn/12/

关于jquery - 如何使用 jQuery UI selectMenu 小部件在下拉列表中创建 3 列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47679590/

25 4 0
文章推荐： python - 如何向现有 DataFrame 添加新列？
文章推荐： c# - 如何用双引号替换文件中的字符串
文章推荐： python - Dask 中的索引存在数据左移 q 的问题
文章推荐： c# - 如何模拟 OwinContext.Request.Query
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com