HTML
<td time='10:00 AM'>
<span timeStart="00" timeEnd="10" class="entry deletable">Entery 1 from 10:00-10:15</span>
<span timeStart="15" timeEnd="30" class="entry deletable">Entery 2</span>
</td>
这是 td 在我的 jquery/php 日历中的外观示例。
我的问题是
- 我如何根据时间开始和时间设置这些跨度的 Css 位置和高度,以及如何避免重叠?
- 我应该还是不应该在 html 中包含 timeStart 和 end?我可以在 php 上动态设置样式,这将是一种更简洁的方法!
我想我没有说清楚。
这是我到目前为止尝试过的内容
html
<td style='width:60px;'>
<div style="position:relative">
<span style="position:absolute;top:00px;" title="Time:10:00 AM">demo patient</span>
<span style="position:absolute;top:40px;" title="Time:10:20 AM">new patient</span>
</div>
</td>
PHP 用于生成这个
echo"<span style='position:absolute;top:".
date("i", strtotime($data['time_booked']))."px;' title='{$data['time_booked']}'>{$data['name']}</span>";
现在我可以根据需要定位跨度,唯一的问题是如果 2 个预订同时重叠,我该如何避免这种情况?
最佳答案
试一试。它利用数据属性来确定要使用的 block 的大小。我还将您的跨度更改为 div,如果您需要它们内联 block ,您可以相应地更改 css。 jsFiddle Example
HTML
<table>
<tr>
<td time='10:00 AM'>
<div data-time-start="00" data-time-end="15" class="entry deletable">Entry 1 from 10:00-10:15</div>
<div data-time-start="15" data-time-end="45" class="entry deletable">Entry 2 from 10:15-10:45</div>
<div data-time-start="45" data-time-end="60" class="entry deletable">Entry 3 from 10:45-11:00</div>
</td>
</tr>
</table>
CSS
.entry{
border-top:1px solid #000;
background:#bad;
}
jQuery
$('.entry').each(function (i) {
var $this = $(this);
timestart = $this.data('time-start'),
timeend = $this.data('time-end');
$this.height(timeend - timestart);
});
关于php - 如何根据时间在 td 中定位 div 看起来像谷歌日历,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14217632/