个人中心
gpt4 book ai didi

jquery - 如何在 jquery ui selectmenu 中对齐字符串

转载 作者：行者123 更新时间：2023-11-28 02:14:14 26 4
gpt4 key购买 nike

我有一个有趣的问题没有找到任何答案:我在 Jquery Selectmenu 小部件中有一组字符串公司名称 + ID:

喜欢:

  • 公司 1 - 00000023
  • 非常大的公司名称 - 00000028
  • 另一家名气很大的公司 - 09900023

所以我们得到了这个选择菜单:

enter image description here

但是我想这样配置:

  • 公司 1 - 00000023
  • 非常大的公司名称 - 00000028
  • 另一家名气很大的公司 - 09900023

最终结果:

enter image description here

这是我的初始代码:

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>Teste alignment</title>
    <link href="jquery-ui.css" rel="stylesheet">
</head>
<body>

<h1>Test Selectmenu</h1>

<select id="selectmenu">
    <option>Company 1 - 00000023</option>
    <option>Company very large name - 00000028</option>
    <option>Another Company that have a very very very large name - 09900023</option>
</select>

<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
    $( "#selectmenu" ).selectmenu( {width: 800});
</script>
</body>
</html>

最佳答案

如前所述，您将需要使用 _renderItem。根据您的描述，您的字符串有特定格式:

[item] - [id number]

首先要做的是拆分和包装每个部分，以便我们可以使用 CSS 设置样式。

function styleString(s){
  var result = "";
  parts = s.split(" - ");
  result += "<span class='item-title'>" + parts[0] + "</span> - <span class='item-id'>" + parts[1] + "</span>";
  return result;
}

现在我们必须将它添加到我们的元素中。

$("#selectmenu").selectmenu({
  width: 800
}).selectmenu("instance")._renderItem(function(ul, item){
  var $li = $("<li>");
  var item = styleString(item.value);
  $li.append("<div>" + item + "</div>");
  return $li.appendTo(ul);
});

您可以使用 item.value 或 item.label。

现在我们只需为元素设置样式。

$(function() {
  function styleString(s) {
    var result = "";
    parts = s.split(" - ");
    result += "<span class='item-title'>" + parts[0] + "</span> - <span class='item-id'>" + parts[1] + "</span>";
    return result;
  }
  $("#selectmenu").selectmenu({
    width: 800,
    change: function(e, ui){
      $("#selectmenu-button .ui-selectmenu-text").html(styleString(ui.item.value));
    }
  }).selectmenu("instance")._renderItem = function(ul, item) {
    var $li = $("<li>");
    var item = styleString(item.value);
    $li.append("<div>" + item + "</div>");
    return $li.appendTo(ul);
  };

  $("#selectmenu-button .ui-selectmenu-text").html(styleString($("#selectmenu-button .ui-selectmenu-text").text()));
});
.ui-selectmenu-text .item-id {
  position: absolute;
  right: 3em;
}

.ui-menu-item .item-id {
  float: right;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<h1>Test Selectmenu</h1>
<select id="selectmenu">
    <option>Company 1 - 00000023</option>
    <option>Company very large name - 00000028</option>
    <option>Another Company that have a very very very large name - 09900023</option>
</select>

更新

在打开和更改的适当元素上使用相同的功能。也为其添加了 CSS。您没有在所选元素和菜单项中提到对此的需求。

关于jquery - 如何在 jquery ui selectmenu 中对齐字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48569871/

26 4 0
文章推荐： javascript - 在 Grails 应用程序中隐藏 url
文章推荐： html - 浏览器之间的渲染问题
文章推荐： php - html2fpdf 中的多页表格
文章推荐： html - 如何在内容区域制作一个具有最大高度和滚动条的收缩容器？
行者123
个人简介

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

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