Kendo ui 单击图像时显示剑道下拉列表弹出窗口_Kendo Ui

Kendo ui 单击图像时显示剑道下拉列表弹出窗口

kendo-ui

Kendo ui 单击图像时显示剑道下拉列表弹出窗口,kendo-ui,Kendo Ui,是否可以单击图标/图像，然后在图标/图像下方显示剑道下拉列表（换句话说，我只想使用下拉列表的弹出窗口，我希望输入编辑器被隐藏并替换为图像，当用户单击图像时，弹出的下拉列表应该出现）我最接近的解决方案是隐藏输入元素 <div style="display:none;"> <input id="dropdownlist"/> </div> 问题是弹出菜单显示在左上角，我没有找到使弹出菜单显示在图标/图像下方的方法。这里有一段代码可以满足您的需要： <!

是否可以单击图标/图像，然后在图标/图像下方显示剑道下拉列表

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

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

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

问题是弹出菜单显示在左上角，我没有找到使弹出菜单显示在图标/图像下方的方法。

这里有一段代码可以满足您的需要：

<!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>


剑道UI片段
$（“#dropdownlist”）。kendoDropDownList({
数据源：[
{id:1，名称：“Apples”}，
{id:2，名字：“橙子”}
],
dataTextField:“名称”，
dataValueField:“id”，
索引：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>