Показать / скрыть div при наведении на свою "родительскую" таблицу - PullRequest
Новая
       2

Показать / скрыть div при наведении на свою "родительскую" таблицу

0 голосов
/ 14 июля 2011

Я пытаюсь добавить функциональность к своим элементам в моем RadComboBox подобно комментариям на YouTube. Когда вы пылесосите комментарий, вы видите набор кнопок. Это классная функция, и я пытаюсь добиться чего-то подобного. Я работаю с asp.net и C #.

Я не хочу использовать Jquery, просто стандартный JS.

HTML: 

<ItemTemplate>
        <table width="100%">
            <tr onmouseover="ShowContent('buttonDiv'); return true;" onmouseout="HideContent('buttonDiv'); return true;" id="parentrow">
                <td style="width:45px;"><asp:Image runat="server" ID="img_Avatar" /></td>
                <td style="width:280px;"><asp:Literal runat="server" ID="lbl_literal"></asp:Literal></td>
                <td style="width:80px;"><div id="buttonDiv" style="display:none;">
                        <asp:Button ID="requestFriend" runat="server" Text="Fr" />
                        <asp:Button ID="groupInvite" runat="server" Text="Gr" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="height:1px; border-bottom:1px solid #d2d2d2;"></td>
            </tr>
        </table>
    </ItemTemplate>

JavaScript: 

<script type="text/javascript" language="JavaScript">
var cX = 0;
var cY = 0;
var rX = 0;
var rY = 0;

function UpdateCursorPosition(e) {
    cX = e.pageX;
    cY = e.pageY;
}

function UpdateCursorPositionDocAll(e) {
    cX = event.clientX;
    cY = event.clientY;
}
if (document.all) {
    document.onmousemove = UpdateCursorPositionDocAll;
}
else {
    document.onmousemove = UpdateCursorPosition;
}

function AssignPosition(d) {
    if (self.pageYOffset) {
        rX = self.pageXOffset;
        rY = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        rX = document.documentElement.scrollLeft;
        rY = document.documentElement.scrollTop;
    }
    else if (document.body) {
        rX = document.body.scrollLeft;
        rY = document.body.scrollTop;
    }
    if (document.all) {
        cX += rX;
        cY += rY;
    }
    d.style.left = (cX + 10) + "px";
    d.style.top = (cY + 10) + "px";
}

function HideContent(d) {
    if (d.length < 1) {
        return;
    }
    document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
    if (d.length < 1) {
        return;
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
}

function ReverseContentDisplay(d) {
    if (d.length < 1) {
        return;
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    if (dd.style.display == "none") {
        dd.style.display = "block";
    }
    else {
        dd.style.display = "none";
    }
}
</script>

Поскольку я заполняю свой комбинированный список, идентификаторы для каждой строки различны. Так что, когда я буду грести, я всегда показываю его кнопку первым. Как я могу убедиться, что у меня есть идентификатор правильного div для показа? Я знаю, что, вероятно, что-то связано с ClientID, но мои знания JS очень и очень просты.

1 Ответ

0 голосов
/ 14 июля 2011

Я не уверен, что вполне понимаю ваш вопрос, но я попробую:

Вам не всегда нужно передавать объект с помощью getElementById. Что вы можете сделать, так это для каждой строки в таблице подключить события «onmouseover» и «onmouseout» программно. это будет выглядеть примерно так в зависимости от вашей текущей структуры: 

window.onload = function () {
   var rows = document.getElementsByTagName('tr');
   for (i in rows){ 
      if (rows[i].nodeType == 1){
          var thisRow =rows[i];
          thisRow.addEventListener("mouseover",ShowContent(thisRow.lastChild.firstChild),false);
          thisRow.addEventListener("mouseout",HideContent(thisRow.lastChild.firstChild),false);
      }
   }
}
...