20

应用于在工具提示中创建内容的 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 事件

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>&gt;&gt;</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 ToolTip”，其中包括两个按钮关闭按钮 (x) 和创建事件按钮

当我单击创建事件时，它会提醒当天的日期，当我单击关闭按钮时，它会隐藏该 qTip（最初我正在销毁该 qTip）但是当我再次单击同一天qTip 时不再出现如何处理多个 qTip在dayClick上触发并单击关闭按钮或单击其他日期消失我还想使用qTip中的createEvent按钮创建事件

4

3 回答 3

1

您需要将 qTip 构造的隐藏属性从“false”设置为如下所示：

例子：

hide: show: {
             target: $(this).find('#bubbleClose1'),
             when: { event: 'click' },
             ready: true 
             }              
});

我从未使用过 qTip，但似乎应该这样做。它将隐藏事件绑定到当前实例的子层次结构中的关闭按钮。Qtip 可能正在使用切换类或其他东西来处理隐藏/显示方法。如果是这种情况，您可能会破坏模式。即使在“live”的约束下从外部调用它。

于 2013-01-24T04:09:36.013 回答
0

以下代码应该可以工作。并且还需要修复 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>&gt;&gt;</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>
于 2012-12-25T15:10:47.137 回答
0

您的 hide 选项似乎与 apidoc 不匹配，您是否尝试过不将其设置为 hide:false 而是指定隐藏它的事件（请参阅 qtip 文档），让 qtip 进行所有显示和隐藏？

于 2012-09-14T16:37:02.893 回答