CSS应用于在工具提示中创建内容
.cl_root {
width: 100%;
font-size: 13px;
overflow: hidden;
}
.cl_root .cl_table {
background-color: #FFF;
width: 100%;
margin-bottom: 8px;
max-width: 100%;
}
.cl_table .cl-key {
vertical-align: top;
text-align: left;
white-space: nowrap;
font-weight: normal;
padding: .4em 1em .4em 0;
font-weight:bold;
}
.cl_table .cl-value{
width: 95%;
padding: .4em 0;
text-align:left;
}
.textbox-fill-input {
width:95%;
padding:2px;
border-width:1px;
border-color:#666 #ccc #ccc #666
}
.cl-example {
FONT-SIZE: 12px; PADDING-TOP: 2px;
font-style:italic
}
.lk {
WHITE-SPACE: nowrap; COLOR: #112abb; CURSOR: pointer; TEXT-DECORATION: underline;
float: left;padding-top: 6px;padding-left: 10px;
}
.bubble-table {
width: 100%; table-layout: fixed;margin-top: 17px;margin-bottom: 4px;
}
.bubble-cell-side {
WIDTH: 25px;
}
.bubble-mid {
PADDING-BOTTOM: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; BACKGROUND: #fff; PADDING-TOP: 0px
}
.cl-button-quickAddBTN{
float:left;
}
.bubble-closebutton {
POSITION: absolute; WIDTH: 15px; BACKGROUND: url(css/images/calendar/combined.gif) 0px -50px; HEIGHT: 15px; TOP: 10px; CURSOR: pointer; RIGHT: 10px
}
$.fn.qtip.styles.tipstyle = {
width:400,
background: '#FFFFFF',
color: 'black',
textAlign: 'center',
border: {
width: 2,
radius: 3
},
tip: {
corner:'bottomMiddle',
size:{x:12,y:12}
},
name: 'light'
}
完整日历上的日点击事件
dayClick: function (date, allDay, jsEvent, view) {
var d=$.fullCalendar.formatDate(date,"ddd, MMM d");
$('.qtip').remove();
if(typeof $(this).data("qtip") !== "object" && allDay) {
$(this).qtip({
content:{
text:'<div id="cl_box"><table class="bubble-table" cellspacing="0" cellpadding="0">'+
'<tbody><tr><td class="bubble-cell-side"><div id="tl1" class="bubble-corner">'+
'<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">'+
'<div class="bubble-top"></div></td><td class="bubble-cell-side">'+
'<div id="tr1" class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>'+
'<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" id="bubbleContent1">'+
'<div><div></div><div class="cl_root">'+
'<table cellspacing="0" cellpadding="0" class="cl_table">'+
'<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div id="bbit-cal-buddle-timeshow">'+d+'</div></td></tr>'+
'<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">'+
'<input id="bbit-cal-what" class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>'+
'</tr></tbody></table>'+
'<input id="bbit-cal-quickAddBTN" value="Create event" type="button" class="cl-button-quickAddBTN">'+
'<span id="bbit-cal-editLink" class="lk">Edit details <strong>>></strong></span>'+
'<input type="hidden" id="box-cl" value="'+date+'">'+
'</div></div></div></td></tr></tbody></table>'+
'<div id="bubbleClose1" class="bubble-closebutton"></div></div>',
},
position: {corner: {tooltip: 'bottomMiddle', target: 'center'}},
style: {
name : 'tipstyle'
},
adjust: {
screen: true // Keep the tooltip within the viewport at all times
},
show: {
solo: true,
when: { event: 'click' },
ready: true
},
hide: false,
});
}
}
<script>
$("#bbit-cal-quickAddBTN").live('click',function(){
alert($("#box-cl").attr('value'));
});
$("#bubbleClose1").live('click',function() {
$(this).parents('qtip').hide();
});
</script>
现在，当我单击日历中的一天时，会出现"qTip工具提示"，其中包括两个按钮关闭按钮（x）和创建事件按钮
当我单击创建事件时，它会提醒当天的日期，当我单击关闭按钮时，它会隐藏该qTip（最初我正在销毁该qTip）但是当我再次单击同一天qTip时，qTip不再出现 如何处理在当天触发的多个qTips单击并消失单击关闭按钮或单击SME其他日期我还想使用创建事件创建事件q提示中的按钮
您需要将 qTip 构造的隐藏属性从"false"设置为如下所示：
例：
hide: show: {
target: $(this).find('#bubbleClose1'),
when: { event: 'click' },
ready: true
}
});
我从未使用过qTip，但似乎应该这样做。它会将隐藏事件绑定到当前实例的子层次结构内的关闭按钮。Qtip 可能正在使用切换类或其他东西来处理隐藏/显示方法。如果是这种情况，您可能会破坏模式。甚至在"活"的约束下对外称呼。
您的隐藏选项似乎与 apidoc 不匹配，您是否尝试过不将其设置为 hide：false，而是指定隐藏它的事件（请参阅 qtip 文档），让 qtip 完成所有显示和隐藏？
以下代码应该有效。 并且还需要修复 qtip.js 中的一个错误。我使用的是 1.0.0-rc3 版本，需要将 1003 行从 for(i = 0; i < interfaces.length - 1; i++) 替换为 for(i = 0; i < interfaces.length; i++) 。
我建议更改为其他工具提示库而不是 qtip。它被过度设计而没有良好的目的，这将导致许多GHOST HTML元素。或者可以尝试 qtip2。
<script type="text/javascript">
$(function() {
var self;
$("#calendar").fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
self = this;
var d=$.fullCalendar.formatDate(date,"ddd, MMM d");
if ($(this).data('qtip') == null || $(this).data("qtip").interfaces.length < 1) {
$(this).qtip({
content: {
text: '<div><table class="bubble-table" cellspacing="0" cellpadding="0">'+
'<tbody><tr><td class="bubble-cell-side"><div class="bubble-corner">'+
'<div class="bubble-sprite bubble-tl"></div></div></td><td class="bubble-cell-main">'+
'<div class="bubble-top"></div></td><td class="bubble-cell-side">'+
'<div class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> </td></tr>'+
'<tr><td class="bubble-mid" colspan="3"><div style="overflow: hidden" >'+
'<div><div></div><div class="cl_root">'+
'<table cellspacing="0" cellpadding="0" class="cl_table">'+
'<tbody><tr><th class="cl-key">Time:</th><td class="cl-value"><div >'+d+'</div></td></tr>'+
'<tr><th class="cl-key">What:</th><td class="cl-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid">'+
'<input class="textbox-fill-input"></div></div><div class="cl-example">e.g., meeting at room 107</div></td>'+
'</tr></tbody></table>'+
'<input value="Create event" type="button" class="cl-button-quickAddBTN">'+
'<span class="lk">Edit details <strong>>></strong></span>'+
'<input type="hidden" value="'+date+'">'+
'</div></div></div></td></tr></tbody></table>'+
'<div class="bubble-closebutton">X</div></div>'
},
position: {
corner: {
tooltip: "bottomMiddle",
target: "center"
}
},
adjust: {
screen: true
},
show: {
solo: true,
when: {event: "click"},
ready: true
},
hide: false
});
}
}
});
$(".cl-button-quickAddBTN").live('click',function(){
alert($("#box-cl").attr('value'));
});
$(".bubble-closebutton").live('click',function() {
$(self).qtip("Destroy");
});
$.fn.qtip.styles.tipstyle = {
width:400,
background: '#FFFFFF',
color: 'black',
textAlign: 'center',
border: {
width: 2,
radius: 3
},
tip: {
corner:'bottomMiddle',
size:{x:12,y:12}
},
name: 'light'
}
});
</script>