0

カレンダーのイベントごとにツールチップを表示するスクリプトに問題があります。firefox と safari では動作しません。なんで？誰かが私を助けることができますか？

<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>

whem onmouseover と呼ばれる JavaScript コードを次に示します。

 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 と safari では動作しません。なんで？誰かが私を助けることができますか？

メッセージを取得するための私のコード:

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;
        }
4

2 に答える 2

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-03T13:28:02.300 に答える
0 
var balloon = window.document.getElementById('ctl00_m_g_64596a6f_6d15_4eac_92b9_df6bc836d31d_bTip_content').style.display = 'block';

angular.js サービスを使用して値を渡し、より少ないコードですべてをより動的にすることもお勧めします。お役に立てれば？

于 2013-07-03T13:11:38.993 に答える