2017-01-17 5 views
1

Я хочу добавить таблицу html внутри всплывающей подсказки для каждой ячейки без запроса сервера. Kendo предоставляет эту функцию при вызове api.Как добавить таблицу html внутри подсказки кендо для каждой ячейки без каких-либо api или ajax?

$(document).ready(function() { 
var tooltip = $("#target").kendoTooltip({ 
    iframe: false, 
    content: { 
    url: "*http://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html*" 
    }, 
    width: 220, 
    height: 280 
    }).data("kendoTooltip"); 
}); 

Есть ли способ добавить html без запроса?

ответ

0

Конфигурация содержимого всплывающей подсказки может принимать не только URL-адрес, но и строку. Эта строка может содержать HTML, например:

td { 
 
    background: red; 
 
    width: 10px; 
 
    height: 10px; 
 
}
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css" rel="stylesheet" /> 
 
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" rel="stylesheet" /> 
 
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css" rel="stylesheet" /> 
 
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet" /> 
 

 
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 

 

 
<body> 
 
    <span id="target"> 
 
    Some content 
 
    </span> 
 

 
    <script> 
 
    $(document).ready(function() { 
 
     $("#target").kendoTooltip({ 
 
     content: "<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>" 
 
     }); 
 
    }); 
 
    </script> 
 
</body>

0

content option также может быть установлена ​​как функция, которая выставляет данные события, содержащие целевой элемент, так что вы можете вернуть динамическую строку (в том числе HTML-элементы, как упоминалось ранее) на основе содержимого целевого элемента, например:

Example