当前位置：文江博客话题详情

jquery 中完整日历的弹出窗口

发布于 2024-08-15 19:59:20 字数 115 浏览 11 评论 0原文

我需要在 jquery 完整日历中创建事件时显示一个弹出窗口（如 google 日历中的气球弹出窗口）。

显示为气球并处理点击事件的弹出窗口有什么最好的插件（我用它来从弹出窗口创建/编辑/删除事件）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺孤伤于心 2024-08-22 19:59:20

我已经将 QTip 与 fullCalendar 一起使用，效果非常好！

$('#calendar').fullCalendar({
    ...
    eventRender: function(event, element, view)
    {
        element.qtip({ content: "My Event: " + event.title });
    }
   ...
 });

只需确保您在 fullCalendar 的 eventRender 事件中定义 qtip 即可。 :)

我注意到的唯一问题（使用 JQuery 1.3）是当 qtip 弹出窗口淡入时，它在 fullCalendar 的样式网格后面开始淡入。在前几帧之后，就很好了。另外，这很可能是我项目中正在进行的其他一些事情的问题。我懒得进一步调试它，所以你的里程可能会有所不同。 ;p

I've used QTip with fullCalendar and it's working great!

$('#calendar').fullCalendar({
    ...
    eventRender: function(event, element, view)
    {
        element.qtip({ content: "My Event: " + event.title });
    }
   ...
 });

Just make sure you're defining your qtip in fullCalendar's eventRender event. :)

The only issue I've noticed (w/ JQuery 1.3) is that when the qtip popup fades-in, it starts its fade-in behind fullCalendar's styled grid. After that first ~few frames, it's fine. Also, this could very well be a problem with some other stuff I have going on in my project. I'm too lazy to debug it further so your mileage may vary. ;p

回复收藏 0 原文

明媚殇 2024-08-22 19:59:20

qTip 插件可以处理工具提示中的任意内容，包括分配事件处理程序和获取的内容的能力更丰富的功能。

请参阅演示。

回复收藏 0 原文

青春有你 2024-08-22 19:59:20

我编写了自己的弹出窗口，它使用具有绝对位置的 div 来显示。

<div id="addEvent" style="display: none; position: absolute; width: 400px; z-index: 1000;">
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div class="PopupContainer">
                    <div class="header">
                        <img src="<%= ResolveUrl("~/Content/images/closepopup.gif") %>" id="addCalEventClose"
                            title="Close" alt="Close" class="cursorhand" />
                    </div>
                    <div class="clear" />
                    <div class="popup">
//Your content goes here
</div>
                </div>
                <div class="clear" />
                <br />
            </td>
        </tr>
        <tr>
            <td>
                <div style="margin-top: -1px">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="taC">
                                <img src="<%= ResolveUrl("~/Content/images/balloon_arrow.gif") %>" title="" alt=""
                                    id="addEventBalloon" />
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

使用一些 JavaScript 调用 $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); 来计算鼠标单击的位置并显示弹出窗口。

I wrote my own popup which displays using div with absolute position.

<div id="addEvent" style="display: none; position: absolute; width: 400px; z-index: 1000;">
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div class="PopupContainer">
                    <div class="header">
                        <img src="<%= ResolveUrl("~/Content/images/closepopup.gif") %>" id="addCalEventClose"
                            title="Close" alt="Close" class="cursorhand" />
                    </div>
                    <div class="clear" />
                    <div class="popup">
//Your content goes here
</div>
                </div>
                <div class="clear" />
                <br />
            </td>
        </tr>
        <tr>
            <td>
                <div style="margin-top: -1px">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="taC">
                                <img src="<%= ResolveUrl("~/Content/images/balloon_arrow.gif") %>" title="" alt=""
                                    id="addEventBalloon" />
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

call the $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); with some javascripting to calculate the position of mouse click and show the popup.

回复收藏 0 原文

落墨 2024-08-22 19:59:20

这是我的实现。我在悬停时执行此操作，如果您想单击，只需更改事件处理程序

$('#calendario').fullCalendar({



                        events: "/includes/json-events.php",

                        eventDrop: function(event, delta) {
                            alert(event.title + ' was moved ' + delta + ' days\n' +
                                '(should probably update your database)');
                        },

                        loading: function(bool) {
                            if (bool) $('#loading').show();
                            else $('#loading').hide();
                        },
                        eventMouseover: function( event, jsEvent, view ) { 
                            var item = $(this);
                            if(item.find('.nube').length == 0){
                                var info = '<span class="nube"><h2>'+event.title+'</h2><img src="'+event.avatar+'" /> <p class="text">'+event.name+'</p><p>'+event.start+' <br /> '+event.end+'</p><p><a href="/post.php?blogid='+event.id+'">read_more</a></p></span>';
                                item.append(info);
                            }
                            if(parseInt(item.css('top')) <= 200){
                                item.find('.nube').css({'top': 20,'bottom':'auto'});
                                item.parent().find('.fc-event').addClass('z0');
                            }
                            item.find('.nube').stop(true,true).fadeIn();
                        },
                        eventMouseout: function( event, jsEvent, view ) { 
                            var item = $(this);
                            item.find('.nube').stop(true,true).fadeOut();
                        },
                        header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,agendaWeek,agendaDay'
                                },
                                eventRender: function(event, element) {

                                }

                    });

，并且至少：

.nube{ position: absolute;left:0;top:0}

Here is my implementation. i did this on hover, bt if you want click, just change the event handler

$('#calendario').fullCalendar({



                        events: "/includes/json-events.php",

                        eventDrop: function(event, delta) {
                            alert(event.title + ' was moved ' + delta + ' days\n' +
                                '(should probably update your database)');
                        },

                        loading: function(bool) {
                            if (bool) $('#loading').show();
                            else $('#loading').hide();
                        },
                        eventMouseover: function( event, jsEvent, view ) { 
                            var item = $(this);
                            if(item.find('.nube').length == 0){
                                var info = '<span class="nube"><h2>'+event.title+'</h2><img src="'+event.avatar+'" /> <p class="text">'+event.name+'</p><p>'+event.start+' <br /> '+event.end+'</p><p><a href="/post.php?blogid='+event.id+'">read_more</a></p></span>';
                                item.append(info);
                            }
                            if(parseInt(item.css('top')) <= 200){
                                item.find('.nube').css({'top': 20,'bottom':'auto'});
                                item.parent().find('.fc-event').addClass('z0');
                            }
                            item.find('.nube').stop(true,true).fadeIn();
                        },
                        eventMouseout: function( event, jsEvent, view ) { 
                            var item = $(this);
                            item.find('.nube').stop(true,true).fadeOut();
                        },
                        header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,agendaWeek,agendaDay'
                                },
                                eventRender: function(event, element) {

                                }

                    });

and, at least:

.nube{ position: absolute;left:0;top:0}

回复收藏 0 原文

烟雨凡馨 2024-08-22 19:59:20

“气球”插件本身不需要处理点击事件，因为 fullcalender 已经为此提供了配置的回调...

    $('#calendar').fullCalendar({
        eventClick: function(calEvent, jsEvent){
            // ... your code here ...
        }
    });

如果您正在寻找工具提示样式“气球”，推荐的 Qtip 是一个不错的选择。您可以根据需要使用 eventClick 函数动态创建工具提示，也许可以从其他地方获取提示的内容。

The "balloon" plugin itself doesn't need to handle the click event, as fullcalender already provides a configured callback for that...

    $('#calendar').fullCalendar({
        eventClick: function(calEvent, jsEvent){
            // ... your code here ...
        }
    });

If you are looking for tooltip style "balloons", Qtip as recommended is a good choice. You could create the tooltip on the fly with the eventClick function on an as-needed basis, perhaps fetching the contents of the tip from somewhere else.

回复收藏 0 原文