Как создать всплывающий пузырь jquery для строго типизированных представлений в asp.net mvc - PullRequest
Новая
       7

Как создать всплывающий пузырь jquery для строго типизированных представлений в asp.net mvc

0 голосов
/ 09 апреля 2011

Здравствуйте, я пытаюсь создать всплывающий пузырь jquery для элементов, созданных в строго типизированном представлении из базы данных на asp.net

Я нашел несколько примеров, но ничего, что действительно помогает.Буду признателен за любую помощь.

Вот пример моего строго типизированного представления с таблицей и элементами в столбцах таблицы: 

  <table>
      <tr>
          <th>
              name
          </th>

  <% foreach (var item in Model) { %>

      <tr>
          <td>
              <%= (item.name) %>
          </td>
      </tr>

  <% } %>

  </table>

1 Ответ

1 голос
/ 09 апреля 2011

Поместите информацию о пузыре где-нибудь на странице, возможно, внутри тега div.Поместите класс в тег div, который делает его (1) скрытым и (2) абсолютно позиционированным относительно тега td.

Далее, при наведении курсора мыши или событии щелчка <% = item.name%>,вы будете использовать jQuery для показа () или скрытия () всплывающего окна. 

<style>
    .myTable td { position:relative; top:0; left:0; }
    .myBubble { display:none; position:absolute; top:-100px; background:#CCC; }
</style>

<table class="myTable">
    <tr>
        <th>name</th>
    </tr>
    <% foreach (var item in Model) { %>
    <tr>
        <td>
           <div class="myTrigger"><%= (item.name) %></div>
           <div class="myBubble">
               <%= item.description %><br />
               <%= item.publishDate %>
           </div>
        </td>
    </tr>
    <% } %>
</table>

<script>

    // presuming you've already included a reference to the jQuery library...

    $('.myTrigger').hover( function () {
        // show the adjacent bubble content
        $(this).parent().find('.myBubble').show();  
    },   
    function () {
        // hide the adjacent bubble content
        $(this).parent().find('.myBubble').hide();
    });

</script>
...