1. дома
  2. Вопрос и ответ
  3. Javascript calendar onmouseover

Javascript calendar onmouseover

2013-07-03 2 views
0

У меня есть проблема в скрипте, чтобы показать всплывающую подсказку по событию в календаре. Не работайте в firefox и сафари. Зачем? Кто-нибудь может мне помочь?Javascript calendar onmouseover

<tr> 
     <td class="" valign="top"><div WebPartID="64596a6f-6d15-4eac-92b9-df6bc836d31d" HasPers="false" id="WebPartctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d" width="100%" class="ms-WPBody noindex ms-wpContentDivSpace" allowDelete="false" allowExport="false" style="" > 
<div id="ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d"> 
<div id="ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_uPanel"> 
<table id="ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_cln" class="cld" cellspacing="0" cellpadding="2" Title="" border="0" style="border-width:1px;border-style:solid;border-collapse:collapse;"> 
<tr> 
<td colspan="7" style="background-color:Silver;"> 
<table class="cld_title" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"> 
<tr> 
<td class="cld_nextPrev" style="width:15%;"> 
<a href="javascript:__doPostBack('ctl00$m$g_64596a6f_6d15_4eac_92b9_df6bc836d31d$cln','V4900')" style="color:Black" title="Go to the previous month"><span title='Ir para o mês anterior'>&lt;</span></a></td> 
<td align="center" style="width:70%;">julho de 2013</td><td class="cld_nextPrev" align="right" style="width:15%;"> 
<a href="javascript:__doPostBack('ctl00$m$g_64596a6f_6d15_4eac_92b9_df6bc836d31d$cln','V4961')" style="color:Black" title="Go to the next month"><span title='Ir para o próximo mês'>&gt;</span></a></td></tr> 
            </table></td></tr><tr> 
    <th class="cld_weekDayName" align="center" abbr="domingo" scope="col">dom</th> 
    <th class="cld_weekDayName" align="center" abbr="segunda-feira" scope="col">seg</th> 
    <th class="cld_weekDayName" align="center" abbr="terça-feira" scope="col">ter</th> 
    <th class="cld_weekDayName" align="center" abbr="quarta-feira" scope="col">qua</th> 
    <th class="cld_weekDayName" align="center" abbr="quinta-feira" scope="col">qui</th> 
    <th class="cld_weekDayName" align="center" abbr="sexta-feira" scope="col">sex</th> 
    <th class="cld_weekDayName" align="center" abbr="sábado" scope="col">sáb</th></tr> 
    <tr> 
    <td class="cld_otherMonth" align="center" style="width:14%;">30</td> 
    <td class="cld_day" align="center" style="width:14%;">1</td> 
    <td class="cld_day" align="center" style="width:14%;">2</td> 
    <td class="cld_today" align="center" style="width:14%;">3</td> 
    <td class="cld_day" align="center" style="width:14%;">4</td> 
    <td class="cld_day" align="center" style="width:14%;">5</td> 
    <td class="cld_weekendDay" align="center" style="width:14%;">6</td> 
    </tr> 
    <tr> 
    <td class="cld_weekendDay" align="center" style="width:14%;">7</td> 
    <td class="cld_day" align="center" style="width:14%;">8</td> 
    <td class="cld_day" align="center" style="width:14%;">9</td> 
    <td class="cld_day" align="center" style="width:14%;">10</td> 
    <td class="cld_day" align="center" style="width:14%;">11</td> 
    <td class="cld_day" align="center" style="width:14%;">12</td> 
    <td class="cld_weekendDay" align="center" style="width:14%;">13</td> 
    </tr> 
    <tr> 
    <td class="cld_weekendDay" align="center" style="width:14%;">14</td> 
    <td class="cld_day" align="center" style="width:14%;">15</td> 
    <td class="cld_day" align="center" style="width:14%;">16</td> 
    <td class="cld_day" align="center" style="width:14%;">17</td> 
    <td class="cld_day" align="center" style="width:14%;">18</td> 
    <td class="cld_selected" align="center" ***onmouseover="showMessage***(event,'&lt;font style=&quot;font-size:8pt;&quot;>&lt;b>12:00&lt;/b>&lt;/font> - Pagamento de Benefícios &lt;/br>');" onmouseout="hideMessage();" onclick="location.replace('http://www.banesprev.com.br/SitePages/Eventos.aspx?day=19&amp;month=7&amp;year=2013')" style="color:White;background-color:Silver;width:14%;">19</td> 
    <td class="cld_weekendDay" align="center" style="width:14%;">20</td> 
    </tr> 
    <tr> 
    <td class="cld_weekendDay" align="center" style="width:14%;">21</td> 
    <td class="cld_day" align="center" style="width:14%;">22</td> 
    <td class="cld_day" align="center" style="width:14%;">23</td> 
    <td class="cld_day" align="center" style="width:14%;">24</td> 
    <td class="cld_day" align="center" style="width:14%;">25</td> 
    <td class="cld_day" align="center" style="width:14%;">26</td> 
    <td class="cld_weekendDay" align="center" style="width:14%;">27</td> 
    </tr> 
    <tr> 
    <td class="cld_weekendDay" align="center" style="width:14%;">28</td> 
    <td class="cld_day" align="center" style="width:14%;">29</td> 
    <td class="cld_day" align="center" style="width:14%;">30</td> 
    <td class="cld_day" align="center" style="width:14%;">31</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">1</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">2</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">3</td> 
    </tr> 
    <tr> 
    <td class="cld_otherMonth" align="center" style="width:14%;">4</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">5</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">6</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">7</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">8</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">9</td> 
    <td class="cld_otherMonth" align="center" style="width:14%;">10</td> 
    </tr> 
           </table> 
    <div id="ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_dv_message" style="display:none;position:fixed;"> 
    <table id='ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_bTip' border='0' cellpadding='0' cellspacing='0'> 
    <tr> 
    <td style='font-size:0px !important;'> 
    <img src='/_layouts/Helper/balloon/top_left.png' width='34' height='32' alt=''></td> 
    <td style='background:url(/_layouts/Helper/balloon/top.png);font-size:0px !important; background-repeat:repeat-x; vertical-align:bottom !important;' v-align='bottom' height='32'><img src='/_layouts/Helper/balloon/callout.png'/></td> 
    <td style='font-size:0px !important;'><img src='/_layouts/Helper/balloon/top_right.png' width='34' height='32' alt=''></td> 
    </tr> 
    <tr> 
    <td style='background:url(/_layouts/Helper/balloon/left.png); background-repeat:repeat-y' width='34'></td> 
    <td style='background:url(/_layouts/Helper/balloon/content.png);font-size:10pt;' id='ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_bTip_content'></td> 
    <td style='background:url(/_layouts/Helper/balloon/right.png); background-repeat:repeat-y' width='34'></td> 
    </tr> 
    <tr> 
    <td><img src='/_layouts/Helper/balloon/bottom_left.png' width='34' height='34' alt=''></td><td style='background:url(/_layouts/Helper/balloon/bottom.png); background-repeat:repeat-x'></td> 
    <td><img src='/_layouts/Helper/balloon/bottom_right.png' width='34' height='34' alt=''></td> 
    </tr> 
    </table> 
    </div> 
          </div> 
         </div></div></td> 
        </tr>

Это код javascript, который называется whem onmouseover.

function showMessage(event, message){ 
var x = window.document.getElementById('ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_dv_message'); 
x.style.top = ''+(event.clientY + 10)+'px'; 
x.style.left = ''+(event.clientX - 25)+'px'; 
x.style.display = 'block'; 
if (navigator.userAgent.toLowerCase().indexOf('safari') > -1 &&  navigator.userAgent.toLowerCase().indexOf('chrome') == -1) 
{ 
    x.style.position = 'absolute'; 
    x.style.top = event.clientY + '2px'; 
    x.style.display = 'block';        
} 
var balloon = window.document.getElementById('ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_bTip_content'); 
balloon.innerHTML = message; 
} 
function hideMessage(){ 
window.document.getElementById('ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_dv_message').style.display = 'none'; 
}

У меня возникла проблема в скрипте, чтобы показать всплывающую подсказку по событию в календаре. Не работайте в firefox и сафари. Зачем? Кто-нибудь может мне помочь?

Мой код выдаётся сообщение:

private string getMessage(DateTime date) 
     { 
      var events = from evts in _events 
         where evts.Start.Day == date.Day && evts.Start.Month == date.Month && evts.Start.Year == date.Year 
         select evts; 

      StringBuilder sb = new StringBuilder(); 

      foreach (var evt in events) 
       sb.AppendFormat("<font style=\"font-size:8pt;\"><b>{0:HH:mm}</b></font> - {1}</br>", evt.Start, evt.Title); 

      string sOutput = sb.ToString(); 

      return string.IsNullOrEmpty(sOutput) ? "Não há eventos para este dia." : sOutput; 
     }

источник

2013-07-03 Rodrigo Waldow

ответ

1

Вы не проходит событие, но вы пытаетесь ссылаться на него:

x.style.top = event.clientY + 10;

передать его в вас наведении курсора мыши:

onmouseover="showMessage(event,'message here')"

и вам необходимо обеспечить положение вычисляется в строка

x.style.top = ""+(event.clientY + 10)+"px";

Этот пример работает: http://jsbin.com/ecovoj/1/edit

источник

2013-07-03 13:28:02 Moob

+0

Ошибка возврата .. В onmouseover = "showMessage (event, '< font style = " font-size: 8pt; "> < б> 18:00 </b> </FONT> - Evento2 </ш> ');» –

+0

я редактировать свой пост с кодом GetMessage @moob вы мне помочь Танки –

+0

Ваш метод GetMessage не является частью.? проблема. Посмотрел ли вы на рабочий пример [link] (http://jsbin.com/ecovoj/1/edit)? Все, что вам нужно сделать, это передать объект события в наведении курсора мыши и обновить функцию showMessage для его получения .! – Moob

0 
var balloon = window.document.getElementById('ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_bTip_content').style.display = 'block';

Я также хотел бы предложить использовать angular.js сервис для передачи значений вокруг, и сделать все более динамичными меньше кода. Надеюсь это поможет?

источник

2013-07-03 13:11:38 neoeahit

Смежные вопросы

 Смежные вопросы