點擊圖片顯示kendo dropdownlist popup

是否可以點擊圖標/圖片，然後讓kendo下拉列表出現在他的圖標/圖片下方？點擊圖片顯示kendo dropdownlist popup

（換句話說，我只想做使用下拉列表的彈出窗口，我想輸入編輯器被隱藏，並用圖像替換它，當用戶點擊圖像彈出下拉列表應該會出現）

我來解決最接近的是隱藏輸入元素

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

，並點擊圖像/圖標，當我打開下拉列表劍道彈出

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

與此問題是，彈出式菜單顯示在左上角，我還沒有找到一種方法使彈出窗口出現在圖標/圖像下方。

來源

2016-12-31 Thomas

您正在使用哪個版本的劍道？ –

這裏是一小段代碼，可能適合您的需要：

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

注意，圖像高度，並且下拉高度應該是相同的。

來源

2017-01-01 08:44:49 Shai

點擊圖片顯示kendo dropdownlist popup

回答

相關問題