Question

是否可以点击图标/图片，然后获得一个剑道下拉列表，显示在他的图标/图像下方？

（换句话说，我只想使用下拉列表的弹出窗口，我希望隐藏输入编辑器并将其替换为图像，当用户单击图像时，应显示弹出下拉列表）

我最接近解决方案是隐藏输入元素

<div style="display:none;"> <input id="dropdownlist"/> </div>

点击图片/图标后，我打开kendo下拉列表弹出窗口

$("#dropdownlist").data("kendoDropDownList").open();

问题在于弹出菜单显示在左上角，我还没有办法让弹出窗口显示在图标/图像下方。

Answer 1

以下是一些可能满足您需求的代码片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>

  <div style="position: absolute; visibility: hidden;">
    <input id="dropdownlist" style="height: 100px;" />
  </div>

  <img src="https://cdn2.scratch.mit.edu/get_image/gallery/1778374_200x130.png" style="height: 100px; position: absolute;" onclick="$('#dropdownlist').data('kendoDropDownList').open()" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  index: 1
});
</script>
</body>
</html>

请注意，图像高度和下拉高度应相同。

单击图像时显示kendo下拉列表弹出窗口

1 个答案: