Question

使用数据声明语法时是否可以配置Kendo UI工具提示的内容模板。

以下简单地使用单词template作为内容创建工具提示。

<div data-role="tooltip" data-content="template">
   Lorum ipsum....
</div>

Answer 1

你可以，但我不知道它是否实际可用，因为这样做，你应该有它在元素中引用的元素。

为了初始化它，你应该有一个像：

这样的JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        kendo.init($("body"));
    });
</script>

然后你的HTML很好。

或者你可以让HTML更复杂，如：

<div>
    <ol data-role="tooltip" data-content="message" data-filter="li>span">
        <li><span>item 1</span></li>
        <li><span>item 22</span></li>
        <li><span>item 333</span></li>
        <li><span>item 4444</span></li>
        <li><span>item 55555</span></li>
        <li><span>item 666666</span></li>
    </ol>
</div>

JSFiddle中的示例：http://jsfiddle.net/OnaBai/GerEN/

您还可以使用以下内容：

<div>
    <ol data-role="tooltip" data-content="{ url : 'url.html'} " data-filter="li>span">
        <li><span>item 1</span></li>
        <li><span>item 22</span></li>
        <li><span>item 333</span></li>
        <li><span>item 4444</span></li>
        <li><span>item 55555</span></li>
        <li><span>item 666666</span></li>
    </ol>
</div>

您传递content.url以检索实际内容的位置。

Answer 2

数据内容标记可以使用HTML作为其属性，这意味着您可以避免使用单独的内容模板：

<script id="row-template" type="text/x-kendo-template">
    data-content="<div style='text-align: left; font-size: 11px; font-weight: bold;'><p>MVVM Property: #= mvvmPropertyName #</p></div>" 
</script>

希望这有帮助。

Answer 3

是否可以为k-content属性提供模板？在上面的示例中，它被添加到数据内容属性

<ol data-role="tooltip" data-content="{ url : 'url.html'} " data-filter="li>span">

对于k-content ?? 也可以这样做，如下所示：

<ol kendo-tooltip k-content="{ url : 'url.html'} " data-filter="li>

以声明方式配置工具提示内容模板

3 个答案: