php - Ajax鼠标悬停显示功能对齐

Question

我尝试使用鼠标悬停功能打开一个框，但是该框始终显示在对象的右侧部分。因此，当对象位于页面右端时，无法看到整个框，如下图所示。 https://rapidshare.com/files/998669066/problem.png

这是我的ajax代码:

$(document).ready(function() {
    $('.date-available').click(function() {
        alert($(this).attr('id'));
    });
    $('.rezerve-td').mouseover(function() {
        $(this).children().show();
        }).mouseout(function() {
        $(this).children().hide();
    });
});

我应该怎么做才能防止这种情况发生？谢谢。

这是我的代码的 html 部分:

require_once 'class.dates.php';
require_once 'class.generic.php';
require_once 'connection.php';

$query = mysql_query("SELECT * FROM egitim_salonu", $baglanti);
while ($row = mysql_fetch_object($query)) {
    $salonlar[$row->id] = array('ad' => $row->ad, 'detay' => $row->detay);
}

$query = mysql_query("SELECT * FROM salon_rezervasyonu", $baglanti);
while ($row = mysql_fetch_object($query)) {
    $rezervasyonlar[$row->salon_id.'%'.$row->gun.'%'.$row->tip] = array('salon_id' => $row->salon_id, 'gun' => $row->gun, 'tip' => $row->tip, 'rezerve_edildigi_egitim' => $row->rezerve_edildigi_egitim);
}

$month = date('m', strtotime($_POST['d']));
$year = date('Y', strtotime($_POST['d']));
$date = date('F Y', strtotime('01-'.$month.'-'.$year));

if ($month == 1 || $month == 3 || $month == 5 || $month == 7 || $month == 8 || $month == 10 || $month == 12) {
    $numberOfDays = 31;
} else if ($month == 4 || $month == 6 || $month == 9 || $month == 11) {
    $numberOfDays = 30;
} else if (date('L', strtotime($year.'-01-01'))) {
    $numberOfDays = 29;
} else {
    $numberOfDays = 28;
}

// Tabloyu aç, başlığı hazırla
$output = '<table class="calendar" id="salon-rezervasyon-table">
    <thead>
        <tr><th rowspan="2">Salon</th><th colspan="'.(2 * $numberOfDays).'">'.$date.'</th></tr>
        <tr>';

for ($i = 1; $i <= $numberOfDays; $i++) {
    $output .=  '<th width="10" colspan="2" class="day-th">'.$i.'</th>';
}

// Başlığı kapat, gövdeyi aç
$output .=  '</tr></thead><tbody>';

// Her salon için...
foreach ($salonlar as $salonKey => $salonValue) {
    $output .=  '<tr id="salon-'.$salonKey.'"><td class="calendar-salon-column">'.$salonValue['ad'].'<br />'.$salonValue['detay'].'</td>';

    // ... o ay içindeki günleri kontrol et. Burada kontrol için şunu yapıyoruz: salon id'si, tarih ve gün içerisindeki saati (öğleden önce, öğleden sonra)
    // birleştirerek bir index (bu index unique bir index) oluşturuyoruz ve bu index yukarıdaki rezervasyonlar dizisinde tanımlanmış mı diye kontrol ediyoruz.
    for ($i = 1; $i <= $numberOfDays; $i++) {
        $dateCheck = date('Y-m-d', strtotime($i.'-'.$month.'-'.$year));
        $rIndexOO = $salonKey.'%'.$dateCheck.'%Öğleden önce';
        $rIndexOS = $salonKey.'%'.$dateCheck.'%Öğleden sonra';

        //Öğleden önce
        if(isset($rezervasyonlar[$rIndexOO])) {
            $egitimPlaniQuery = mysql_query("SELECT * FROM egitim_plani WHERE id = ".$rezervasyonlar[$rIndexOO]['rezerve_edildigi_egitim'], $baglanti);
            $egitimPlani = mysql_fetch_object($egitimPlaniQuery);

            $output .= '<td id="'.$dateCheck.'%o" class="calendar-td rezerve-td">';
            $output .= '<div class="rezerve">'.date('d-m-Y', strtotime($dateCheck)).' Öğleden Önce<br /><br />'.$egitimPlani->egitim_adi.'</div>';
            $output .= '</td>';
        } else {
            $output .= '<td id="'.$dateCheck.'%o" class="date-available calendar-td">';
            $output .= '';
            $output .= '</td>';
        }

        //Öğleden sonra
        if(isset($rezervasyonlar[$rIndexOS])) {
            $egitimPlaniQuery = mysql_query("SELECT * FROM egitim_plani WHERE id = ".$rezervasyonlar[$rIndexOO]['rezerve_edildigi_egitim'], $baglanti);
            $egitimPlani = mysql_fetch_object($egitimPlaniQuery);

            $output .= '<td id="'.$dateCheck.'%s" class="calendar-td rezerve-td">';
            $output .= '<div class="rezerve">'.date('d-m-Y', strtotime($dateCheck)).' Öğleden Sonra<br /><br />'.$egitimPlani->egitim_adi.'</div>';
            $output .= '</td>';
        } else {
            $output .= '<td id="'.$dateCheck.'%o" class="date-available calendar-date-separator">';
            $output .= '';
            $output .= '</td>';
        }
    }

    $output .=  '</tr>';
}

$output .=  '</tbody></table>';
echo $output;

Answer 1

你也许可以用一些 CSS 来解决这个问题。

div.rezerve { 
    position: absolute
}

如果它仍然显示在页面之外，您可以在 JavaScript 中添加类似的内容

....
var doc_width = $(document).width();
var rezerve_child = $(this).children();
rezerve_child.show();
var position = rezerve_child.offset();
var rezerve_child_width = rezerve_child.width();
if (position.left + rezerve_child_width > doc_width) {
    $(this).css('right', '2px');
}
....

jQuery Tooltip 插件也可能会有所帮助。 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/