Kendo UI(调度程序)- 悬停时显示说明工具提示 (jQuery)
Kendo UI (Scheduler) - Show Description Tooltip on Hover (jQuery)
我正在使用 Kendo UI 调度程序...
如何在 jQuery 中悬停时在工具提示中显示说明?
var _data = new kendo.data.SchedulerDataSource({
data: [ {
eventID: 8,
title: "Group meeting.",
start: new Date(),
end: new Date(),
pending:false,
recurrenceRule: "",
recurrenceException: "",
description: "Take my brother to his group meeting.",
isAllDay:false,
ownTimeSlot:true,
careAssistantId: 5,
clientId: 6
},{
eventID: 9,
title: "Make dinner.",
start: new Date("2013/06/13 11:00"),
end: new Date("2013/06/13 13:30"),
pending:true,
recurrenceRule: "",
recurrenceException: "",
description: "Make dinner for my mom.",
isAllDay:false,
ownTimeSlot:true,
careAssistantId: 5,
clientId: 6
} ],
schema: {
model : {
id : "eventID"
}
}
});
function save(){
console.log(_data);
}
$('#scheduler').kendoScheduler({
date: new Date(),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
{ type: "agenda", title: "Agenda" },
{ type: "month", selected: true },
],
save: save,
dataSource:_data
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.timezones.min.js"></script>
<div id="scheduler"></div>
是的,他们在下面有一个例子,但是它在 Angular JS 中:(
http://docs.telerik.com/kendo-ui/web/scheduler/how-to/AngularJS/show-tooltip
是啊……
我是通过如下修改得到的..
<script>
var _data = new kendo.data.SchedulerDataSource({
data: [ {
eventID: 8,
title: "Group meeting.",
start: new Date(),
end: new Date(),
pending:false,
recurrenceRule: "",
recurrenceException: "",
description: "Take my brother to his group meeting.",
isAllDay:false,
ownTimeSlot:true,
careAssistantId: 5,
clientId: 6
},{
eventID: 9,
title: "Make dinner.",
start: new Date("2013/06/13 11:00"),
end: new Date("2013/06/13 13:30"),
pending:true,
recurrenceRule: "",
recurrenceException: "",
description: "Make dinner for my mom.",
isAllDay:false,
ownTimeSlot:true,
careAssistantId: 5,
clientId: 6
} ],
schema: {
model : {
id : "eventID"
}
}
});
function save(){
console.log(_data);
}
$('#scheduler').kendoScheduler({
date: new Date(),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
{ type: "agenda", title: "Agenda" },
{ type: "month", selected: true },
],
save: save,
dataSource:_data
});
$(function () {
$("#scheduler").kendoTooltip({
filter: ".k-event",
position: "top",
width: 250,
content: kendo.template($('#template').html())
});
});
</script>
<script id="template" type="text/x-kendo-template">
#var uid = target.attr("data-uid");#
#var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
#var model = scheduler.occurrenceByUid(uid);#
#if(model) {#
<strong>event start:</strong> #=kendo.format('{0:d}',model.start)#<br />
<strong>event end:</strong> #=kendo.format('{0:d}',model.end)#<br />
<strong>event description:</strong> #=model.description#<br />
#} else {#
<strong>No event data is available</strong>
#}#
</script>
我正在使用 Kendo UI 调度程序...
如何在 jQuery 中悬停时在工具提示中显示说明?
var _data = new kendo.data.SchedulerDataSource({
data: [ {
eventID: 8,
title: "Group meeting.",
start: new Date(),
end: new Date(),
pending:false,
recurrenceRule: "",
recurrenceException: "",
description: "Take my brother to his group meeting.",
isAllDay:false,
ownTimeSlot:true,
careAssistantId: 5,
clientId: 6
},{
eventID: 9,
title: "Make dinner.",
start: new Date("2013/06/13 11:00"),
end: new Date("2013/06/13 13:30"),
pending:true,
recurrenceRule: "",
recurrenceException: "",
description: "Make dinner for my mom.",
isAllDay:false,
ownTimeSlot:true,
careAssistantId: 5,
clientId: 6
} ],
schema: {
model : {
id : "eventID"
}
}
});
function save(){
console.log(_data);
}
$('#scheduler').kendoScheduler({
date: new Date(),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
{ type: "agenda", title: "Agenda" },
{ type: "month", selected: true },
],
save: save,
dataSource:_data
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.timezones.min.js"></script>
<div id="scheduler"></div>
是的,他们在下面有一个例子,但是它在 Angular JS 中:(
http://docs.telerik.com/kendo-ui/web/scheduler/how-to/AngularJS/show-tooltip
是啊……
我是通过如下修改得到的..
<script>
var _data = new kendo.data.SchedulerDataSource({
data: [ {
eventID: 8,
title: "Group meeting.",
start: new Date(),
end: new Date(),
pending:false,
recurrenceRule: "",
recurrenceException: "",
description: "Take my brother to his group meeting.",
isAllDay:false,
ownTimeSlot:true,
careAssistantId: 5,
clientId: 6
},{
eventID: 9,
title: "Make dinner.",
start: new Date("2013/06/13 11:00"),
end: new Date("2013/06/13 13:30"),
pending:true,
recurrenceRule: "",
recurrenceException: "",
description: "Make dinner for my mom.",
isAllDay:false,
ownTimeSlot:true,
careAssistantId: 5,
clientId: 6
} ],
schema: {
model : {
id : "eventID"
}
}
});
function save(){
console.log(_data);
}
$('#scheduler').kendoScheduler({
date: new Date(),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
{ type: "agenda", title: "Agenda" },
{ type: "month", selected: true },
],
save: save,
dataSource:_data
});
$(function () {
$("#scheduler").kendoTooltip({
filter: ".k-event",
position: "top",
width: 250,
content: kendo.template($('#template').html())
});
});
</script>
<script id="template" type="text/x-kendo-template">
#var uid = target.attr("data-uid");#
#var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
#var model = scheduler.occurrenceByUid(uid);#
#if(model) {#
<strong>event start:</strong> #=kendo.format('{0:d}',model.start)#<br />
<strong>event end:</strong> #=kendo.format('{0:d}',model.end)#<br />
<strong>event description:</strong> #=model.description#<br />
#} else {#
<strong>No event data is available</strong>
#}#
</script>