獲取按鈕出現在懸停的KendoComboBox項目旁邊

我試圖讓按鈕顯示在當前正在懸停的KendoComboBox列表中的項目右側。這可能嗎？我會如何去做這件事？獲取按鈕出現在懸停的KendoComboBox項目旁邊

（最終的目標是，如果單擊此按鈕，相應的項目文本應成爲可編輯字段。）

我從以下demo開始，我一直在尋找通過documentation但我可以」 t似乎沒有提及在列表中的某個項目旁邊出現一個彈出式按鈕（幾乎就像一個側面彈出式菜單，只有一個項目，該按鈕，用於KendoComboBox中的每個項目）。

我已經在下面包含了我當前的原型代碼。我可以讓「licenseHoverButton」出現在列表項中，但我不確定如何使它顯示在旁邊。

<html> 
<head> 
    <title></title> 
    <link href="styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="styles/kendo.default.min.css" rel="stylesheet" /> 
    <script src="js/jquery-1.7.2.min.js"></script> 
    <script src="js/kendo.all.min.js"></script> 
</head> 
<body> 

    <div id="example" class="k-content"> 

     <div class="demo-section"> 
      <h2>Licenses</h2> 
      <input id="licenses" style="width: 400px;"/> 
     </div> 

     <script id="template" type="text/x-kendo-tmpl"> 
      <div class="licenseListItem"> 
       # if (data.expired) { # 
        <p class="licenseName">#=data.name# (Expired)</p> 
        <button class="licenseHoverButton">Remove</button> 
       #} else { # 
        <p class="licenseName">#=data.name#</p> 
        <button class="licenseHoverButton">Rename</button> 
       #} # 
       <p class="licenseUsage">#=data.remaining#/#=data.total#GB</p> 

      </div> 
     </script> 

     <script> 
      $(document).ready(function() { 

       var mydata = [{ "name":"License Name", "remaining":"24", "total":"60", "expired":false}, 
           { "name":"1234-1234-1234-1234", "remaining":"60", "total":"60", "expired":false}, 
           { "name":"Old License Name", "remaining":"2", "total":"60", "expired":true}]; 
       $("#licenses").kendoComboBox({ 
        dataTextField: "name", 
        dataValueField: "name", 
        filter:"startswith", 
        template: kendo.template($("#template").html()), 
        dataSource: mydata 
       }); 

       var combobox = $("#licenses").data("kendoComboBox"); 
      }); 

     </script> 

     <style scoped>     
      .demo-section { 
       width: 400px; 
       padding: 30px; 
      } 
      .demo-section h2 { 
       text-transform: uppercase; 
       font-size: 1.2em; 
       margin-bottom: 10px; 
      } 
      #licenses-list .k-item { 
       overflow: hidden; 
      } 
      #licenses-list .k-item .licenseHoverButton{ 
       display: none; 
      } 
      #licenses-list .k-item.k-state-hover .licenseHoverButton { 
       display: block; 
      } 
      #licenses-list .k-item.k-state-hover .licenseUsage { 
       display: none; 
      } 
      #licenses-list p { 
       margin: 0; 
      } 
     </style> 
    </div> 

</body> 
</html>

來源

2013-08-02 Matt Dietrich

怎麼樣使用工具提示？ http://jsfiddle.net/vojtiik/BfyPf/1/ （「刪除」按鈕，將它在網上與該項目，但是這不是你我猜以後有什麼？）

<script id="btnTemplate" type="text/x-kendo-template"> 
       <button class="licenseHoverButton">Rename</button> 
    </script> 

    var tooltip = $('.licenseName').kendoTooltip({ 
     position: "right", 
     content: kendo.template($("#btnTemplate").html()) 
    }).data("kendoTooltip");

來源

2013-08-02 16:31:16 Vojtiik

不幸的是，點擊按鈕關閉該組合框。是否可以保持下拉打開，這樣我可以使項目文本可編輯？（我指的是我在最初的問題中提到的最終目標） –

工具提示並不是有用的結果，因爲我無法將單擊處理程序添加到工具提示中的按鈕。嘗試在你的小提琴中添加以下幾行，看看我的意思。$（'。licenseHoverButton'）。on（'click'，function（e）{ alert（'clicked'）; }）; –

獲取按鈕出現在懸停的KendoComboBox項目旁邊

回答

相關問題