Question

我正在尝试在当前正在悬停的KendoComboBox列表中的项目右侧显示一个按钮。这可能吗？我该怎么做呢？

（最终目标是，如果单击此按钮，相应的项目文本应成为可编辑的字段。）

我是从以下demo开始的，我一直在浏览documentation，但我似乎没有发现在列表中的项目旁边显示弹出按钮（几乎就像一个侧面弹出菜单，只有一个项目，按钮，对于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>

Answer 1

使用工具提示怎么样？ 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");

在悬停时，获取按钮以显示在KendoComboBox中的项目旁边

1 个答案: