6

jquery fullcalendarがあります。オプションのリストを表示するために日をクリックすると、jquery QTip (または他の jquery ソリューション (ライトボックスなど))をトリガーしたいと思います。この質問は、すでに投稿されたこの質問に似ていますが、新しい質問を保証するのに十分なほど異なります。

これにはイベント コールバックがありますが、これを jQuery Qtip と統合する方法がわかりません...

    $('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            alert('Clicked on the entire day: ' + date);
        }else{
            alert('Clicked on the slot: ' + date);
        }

        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

        alert('Current view: ' + view.name);

        // change the day's background color just for fun
        $(this).css('background-color', 'red');

    }
});

これにより、明らかにアラートが表示され、クリックされたセルの色が赤に変わります。

これは、QTip がイベントにホバーするように統合されていることを示す別の例です。

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

この例は、QTIP をトリガーするために使用されているホバー コールバックを示しています。

ここで、これら 2 つの例を組み合わせる必要があります...

2010 年 5 月 26 日更新

Qtip フォーラムの Craig は、あらゆる種類の問題を引き起こしているように見える DayClick コールバックの代わりに、viewDisplay コールバックを使用することを提案しています。（ブラウザをロックすることが最も顕著です）。

投稿は次のとおりです。

コードは次のとおりです。

viewDisplay: function() {
                  var calendar = $(this);

                $(this).qtip({
                   content: 'TEST',
                   position: {
                 my: 'top center',
                 at: 'top center'
                   },
                   show: 'click',
                   hide: 'click',
                   style: {
                 tip: true
                   }
                })
         },

このメソッドは、日をクリックするとツールチップを表示します。ただし、いくつかの問題があります。

  1. 私が知る限り、このコールバックからアクセスできる日付情報がないため、クリックした日付に固有のツールチップを表示するのが難しくなっています。
  2. このコールバックを介してアクセスできる X および Y クリック情報がないため、クリックされた日付の横にチップを配置することはほぼ不可能です。

すべてのヘルプは大歓迎です!

ありがとう、

ティム

4

6 に答える 6

7

これは、Qtip に適用される css として機能します。

$.fn.qtip.styles.tipstyle = {
    width: 400,
    padding: 0,
    background: '#FFFFFF',
    color: 'black',
    textAlign: 'center',
    border: {
        width: 3,
        radius: 4
    },
    tip: 'bottomMiddle',
    name: 'dark'
}

これが dayClick 関数です。

dayClick: function(date, allDay, jsEvent, view) {
    if (typeof $(this).data("qtip") !== "object") {
        $(this).qtip({
            content: {
                prerender: true,
                text: "Hello World"
            },
            position: {corner: {tooltip: 'bottomMiddle', target: 'topMiddle'}},
            style: {
                name: 'tipstyle'
            },
            show: {
                when: {event: 'click'},
                ready: true
            },
            hide: {
                fixed: true
            }
        });
    }
}

dayClick 関数内の if ステートメントは、同じ日付をクリックするたびに Qtip が作成されないようにします。

発生する可能性のある小さな問題の 1 つは、dayClick 関数内のイベント データの一部にアクセスする場合です。しかし、これにも回避策があります。

乾杯、ライオンハート

于 2010-05-26T07:09:17.457 に答える
2

私は今、fullCalendar と Qtip を 1 週間使用していますが、knepe のソリューションは理想的なケースで機能するはずです。

関数が実際に呼び出されているかどうかを最初に確認できます。次のようなものを試してください：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
         alert(date);
        }
});

日付をクリックするとその日付のアラートが表示される場合、問題は Qtip の実装にあります。アラートが表示されない場合、問題は fullCalendar の実装にあります。

knepe で提案されているように、「show: click」で Qtip が表示されます。しかし、そうでない場合は、試してください：

show: { when: { event: 'click' } }

最後に、ドキュメントを確認することを忘れないでください: http://craigsworks.com/projects/qtip/docs/reference/#show

于 2010-05-25T13:47:55.547 に答える
2

ポップアップが機能しない場合は、古いバージョンの jquery を使用してみてください。

jquery-1.4 で試してみましたが、動作するようになりました。jquery-1.2.6 で試してみましたが、完全に動作します。

qtips を fullcalendar で動作させるための古い jquery の使用に関する議論を参照してください。

于 2010-11-01T17:45:30.210 に答える
1

ツールチップに何を表示したいのか正確にはわかりませんが、これを使用することはできません:

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content' });
    }
});

コールバックの 'this' は<td>、クリックされた日の です。おそらく、「日付」に基づいてhtmlをレンダリングし、qtipトリガーから呼び出す機能を実行します。

$(this).qtip({ content: yourQtipRenderer(date) });
于 2010-05-14T07:22:53.483 に答える
1

正直言ってqTipは使っていませんが、そのドキュメントによると、「表示」オプションはツールチップをいつ表示するかを決定し、デフォルトでは「マウスオーバー」に設定されているようですので、「クリック」に変更してみてください。これ：

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content', show: 'click' });
    }
});
于 2010-05-16T18:53:37.780 に答える
1

うまくいく可能性が2つあると思います。div1 つ目は、20px × 20px 程度の非表示をドキュメントに追加することです。デイ クリック コールバックでは、それを問題のデイ テーブル セルの中央に配置し ( で取得$('td.fc-day' + dayNr))、表示可能にします (マウス ポインタに配置することもできます)。次に、それを呼び出しclick()てツールチップを表示します。

qtip2 番目の可能性:すべてのテーブル セルを (ある程度)呼び出し、$('div.fc-content').find('td')まったく使用dayClickしない。または、両方のアイデアを組み合わせて、コールバックで qtip のイベントをトリガーしdayClickます。

イベントリスナーの数が少ないため、私は可能性 1 を選びます。ただし、特定の日付に関係なく、同じツールチップがあることを前提としています (ただし、ツールチップは表示する前に構成することもできます)。

意味があることを願っています。

于 2010-05-11T04:34:09.207 に答える