popup per solare in jQuery

Question

Ho bisogno di mostrare un (pop-up palloncino come nel calendario di Google) pop-up durante la creazione di un evento nel calendario completo jquery.

Alcune migliori plugin per il pop-up che mostra come palloncino e anche che gestisce gli eventi click (che sto usando per creare / modificare / eliminare gli eventi dal popup)?

Answer 1

Ho scritto il mio pop-up che mostra utilizzando div con posizione assoluta.

<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>

chiamare il $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); con qualche javascripting per calcolare la posizione di clic del mouse e mostrare il popup.

Answer 2

Ho usato QTIP con fullCalendar e che sta funzionando grande!

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

Basta fare in modo che si sta definendo il vostro qtip nell'evento eventRender di fullCalendar. :)

L'unico problema che ho notato (w / JQuery 1.3) è che quando il popup qtip svanisce-in, inizia la sua fade-in dietro griglia di stile di fullCalendar. Dopo quella prima ~ alcuni fotogrammi, va bene. Inoltre, questo potrebbe benissimo essere un problema con alcune altre cose che ho in corso nel mio progetto. Sono troppo pigro per eseguire il debug ulteriormente così il vostro chilometraggio può variare. ; P

Answer 3

Il QTIP plug-in in grado di gestire contenuti arbitrari nei tooltip compresa la possibilità di assegnare i gestori di eventi e quant'altro per ottenere funzionalità più ricco.

Vedere la demo .

Answer 4

Qui è la mia realizzazione. ho fatto questo al passaggio del mouse, bt se si desidera sceglie, basta cambiare il gestore di eventi

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

                                }

                    });

e, almeno:

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

Answer 5

Il plugin "palloncino" per sé non ha bisogno di gestire l'evento click, come fullcalender fornisce già un callback configurato per questo ...

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

Se siete alla ricerca di stile tooltip "palloncini", Qtip come raccomandato è una buona scelta. Si potrebbe creare il tooltip al volo con la funzione eventClick su una base alle necessità, forse andare a prendere il contenuto della punta da qualche altra parte.

Answer 6

Prova questo ... E 'Ajax basa ma è possibile rimuoverlo se vuoi .. si può anche associare gli eventi ai controlli i vostri desideri.

jquery ajax tooltip

Answer 7

Se la popup non funziona per voi, provate ad utilizzare una vecchia versione di jQuery.

Ho provato con jquery-1.4 e lo fa ora lavoro. Ho provato con jquery-1.2.6 e funziona perfettamente.

una discussione su come utilizzare jQuery per anziani rendendo qtips lavorano