المنبثقة للحصول على التقويم الكامل في jQuery

Question

أحتاج إلى إظهار نافذة منبثقة (منبثقة بالون كما في تقويم Google) أثناء إنشاء حدث في التقويم الكامل JQuery.

أي أفضل ملحقات مكونات من المنبثقة التي تظهر باسم بالون وأيضًا التي تتعامل مع أحداث النقر (التي أستخدمها لإنشاء/تحرير/حذف الأحداث من popup)؟

Answer 1

كتبت منبثقة خاصة بي والتي تعرض باستخدام 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>

اتصل ب $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); مع بعض javascripting لحساب موضع النقر الماوس وإظهار المنبثقة.

Answer 2

لقد استخدمت qtip مع FullCalendar وهو يعمل بشكل رائع!

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

فقط تأكد من تحديد QTIP الخاص بك في حدث EventRender الخاص بـ FullCalendar. قون

المشكلة الوحيدة التي لاحظتها (w/ jQuery 1.3) هي أنه عندما تتلاشى QTIP المنبثقة ، فإنها تبدأ في شبكة Fullcalendar المصممة. بعد ذلك الإطارات القليلة الأولى ، لا بأس. أيضًا ، قد تكون هذه مشكلة في بعض الأشياء الأخرى التي أجرى في مشروعي. أنا كسول جدًا لدرجة لا يمكن تصحيحه بشكل أكبر حتى تختلف عدد الأميال. ؛ ص

Answer 3

ال qtip يمكن للمكون الإضافي التعامل مع المحتوى التعسفي في تلميحات الأدوات بما في ذلك القدرة على تعيين معالجات الأحداث وما إلى ذلك للحصول على وظائف أكثر ثراءً.

انظر العروض التوضيحية.

Answer 4

ها هو تنفيذي. لقد فعلت ذلك على Hover ، BT إذا كنت تريد النقر ، فقط قم بتغيير معالج الأحداث

$('#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}

Answer 5

لا يحتاج المكون الإضافي "البالون" نفسه إلى التعامل مع حدث النقر ، حيث يوفر FullCalender بالفعل رد اتصال تم تكوينه لذلك ...

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

إذا كنت تبحث عن نمط تلميح الأدوات "بالونات" ، فإن QTIP كما هو موصى به هو خيار جيد. يمكنك إنشاء تلميح الأدوات أثناء الطيران مع وظيفة eventclick على أساس تمس الحاجة إليها ، وربما يجلب محتويات الحافة من مكان آخر.

Answer 6

جرب هذا ... إنه يعتمد على AJAX ولكن يمكنك إزالته إذا أردت .. يمكنك أيضًا ربط الأحداث الخاصة بك بعناصر التحكم التي تريدها.

Jquery Ajax Tooltip

Answer 7

إذا كان المنبثقة لا تعمل من أجلك ، فحاول استخدام إصدار أقدم من jQuery.

حاولت مع jQuery-1.4 وهو يعمل الآن. حاولت مع jQuery-1.2.6 وهو يعمل بشكل مثالي.

يرى مناقشة حول استخدام jQuery الأقدم لجعل Qtips تعمل