0

HTML

<td title='10:00 AM-wed 09-01-2013'><div style="position:relative;height:60px">
        <div style="position:absolute;top:00px;" class='entry'>Demo patient</div>
        <div style="position:absolute;top:20px;" class='entry'>New patient</div>
        <div style="position:absolute;top:40px;" class='entry'>fool patient</div>
</div></td>

写真

ここに画像の説明を入力

エントリの生成に使用される PHP

echo"<div style='position:absolute;top:".date("i", strtotime($data['time_booked']))."px;'>{$data['name']}</div>";

上記のように、単純なjquery/phpデイスケジューラ（カレンダー）を作成しました。

ご覧のとおり、親divの高さ:60px(1分ごとに1px)と相対位置があり、子divをその分に応じて絶対に配置します(例:デモ患者は10:00なのでtop:00px、ばか患者は10:40なのでその上：40px）。これは、時間が重複している場合を除いて正常に機能しています。たとえば、同じ時間に2つのエントリがある場合、両方が互いの上に配置されます。

質問どうすればこれを回避できますか? 2 つの予約が存在する場合、Google カレンダーのように、互いの上ではなく横に移動します。

ありがとう

問題が解決しました：

このプラグインと次のコードを使用して

var n=$('div.entry').overlaps().length;var vol=(100/n);var round=0;
    $('div.entry').overlaps().each(function(){
        $(this).css('left',((vol-1)*round)+'%');
        $(this).css('width',(vol-n)+'%')
        round=round+1;
    });

今ではGoogleカレンダーとして完全に機能します:D..ありがとう

4

3 に答える 3

1

出力を次のように変更します。

<td title='10:00 AM-wed 09-01-2013'><div style="position:relative;height:60px">
    <div style="position:absolute;top:00px;"><span>Demo patient</span></div>
    <div style="position:absolute;top:20px;"><span>New patient</span><span>2nd patient at this time</span></div>
    <div style="position:absolute;top:40px;"><span>fool patient</span></div>
</div></td>

それから彼らは隣同士に浮かびます

于 2013-01-08T16:57:34.417 に答える
1

jquery ソリューションで要素が重複しているかどうかを確認する場合は、このプラグインbrandonaaron/jquery-overlapsを使用できます。各要素のチェックを実行して、オーバーラップがあるかどうかをチェックし、親内でイベントを再配置する機能を実行できます

于 2013-01-08T16:57:42.353 に答える
0

解決策は何になりたいですか？アイテムを並べて配置しますか、それとも並べて配置しますか？いずれにせよ、オーバーラップの可能性を考慮に入れるために、おそらくポジショニングを少し微調整する必要があります。

それらを配置するために生の時間を使用しないでください。ただし、最初にオーバーラップの解決を行い、どの要素がオーバーラップするかを確認し、相対的な位置を指定します。

(0,0)
(1,0)   (1,1)  // overlap here
(2,0)

次に、相対位置をピクセル座標に変換します。これで、すべての要素に合わせるために列の高さもわかっているはずです。

于 2013-01-08T16:52:12.197 に答える