jqueryフルカレンダーでイベントを作成しているときに、ポップアップ(Googleカレンダーのバルーンポップアップ)を表示する必要があります。
バルーンとして表示され、クリックイベントを処理するポップアップに最適なプラグイン(ポップアップからイベントを作成/編集/削除するために使用しています)?
26840 次
7 に答える
5
fullCalendarで QTip を使用しましたが、うまく機能しています。
$('#calendar').fullCalendar({
...
eventRender: function(event, element, view)
{
element.qtip({ content: "My Event: " + event.title });
}
...
});
fullCalendar の eventRender イベントで qtip を定義していることを確認してください。:)
私が気付いた唯一の問題 (JQuery 1.3 を使用) は、qtip ポップアップがフェードインすると、fullCalendar のスタイル設定されたグリッドの背後でフェードインが開始されることです。その後、最初の ~ 数フレームは問題ありません。また、これは私のプロジェクトで行っている他のいくつかの問題である可能性が非常に高いです。私はそれをさらにデバッグするのが面倒なので、マイレージは異なる場合があります。;p
于 2010-03-27T10:06:42.190 に答える
2
絶対位置の 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();マウス クリックの位置を計算し、ポップアップを表示するには、JavaScript を使用して を呼び出し ます。
于 2009-12-26T14:46:49.483 に答える
1
これが私の実装です。ホバーでこれを行いましたが、クリックしたい場合は、イベントハンドラーを変更するだけです
$('#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}
于 2013-01-24T15:13:31.707 に答える
0
"balloon" プラグイン自体はクリック イベントを処理する必要はありません。
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent){
// ... your code here ...
}
});
ツールチップ スタイルの「バルーン」を探している場合は、推奨される Qtip が適しています。必要に応じて eventClick 関数を使用してオンザフライでツールチップを作成し、おそらく別の場所からヒントの内容を取得することができます。
于 2009-12-22T05:18:46.173 に答える
0
これを試してください...これはajaxベースですが、必要に応じて削除できます..イベントを必要なコントロールにバインドすることもできます。
于 2009-12-22T05:20:34.663 に答える
-1
ポップアップが機能しない場合は、古いバージョンの jquery を使用してみてください。
jquery-1.4 で試してみましたが、動作するようになりました。jquery-1.2.6 で試してみましたが、完全に動作します。
于 2010-11-01T17:41:45.110 に答える