Кто-нибудь использовал / создал колонки "рыбий глаз"? - PullRequest
Новая
       38

Кто-нибудь использовал / создал колонки "рыбий глаз"?

3 голосов
/ 11 октября 2008

Кто-нибудь когда-нибудь давал колонкам таблицы эффект "рыбий глаз"? Я говорю о растущем эффекте столбцов таблицы при наведении на них мыши. Я хотел бы увидеть какой-нибудь код, если бы кто-нибудь попробовал это.

РЕДАКТИРОВАТЬ: ... или аккордеонный эффект

Ответы [ 8 ]

4 голосов
/ 11 октября 2008

Это не для стола, но вот эффект:

http://safalra.com/web-design/javascript/mac-style-dock/

2 голосов
/ 11 октября 2008

Хотя это не решение на основе таблиц, это быстрое доказательство концепции, которое я использовал с помощью JQuery, чтобы посмотреть, смогу ли я создать эффект аккордеона на основе столбцов. Может быть, это может дать вам вдохновение ... 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#table > div:even").addClass("row");
   $("#table > div:odd").addClass("altrow");
   $("#table > div > div").addClass("normal");
   $("div[class*='col']").hover(
      function () {
            var myclass = $(this).attr("class");
            $("div[class*='col']").css("width","20px");
            $("div[class*='"+myclass+"']").css("width","80px").css("overflow","auto");
      }, 
      function () {
            $("div[class*='col']").css("width","40px").css("overflow","hidden");
      }
   )
 });
</script>
<style type="text/css">
.row{
    background-color: #eee;
    float:left;
}
.altrow{
    background-color: #fff;
    float:left;
}
.normal{
    width: 40px;
    overflow: hidden;
    float:left;
    padding :3px;
    text-align:center;
}
</style>
</head>
<body>
<div id="table">
    <div>
        <div class="col1">Column1</div>
        <div class="col2">Column2</div>
        <div class="col3">Column3</div>
    </div>
    <br style="clear:both" />
    <div>
        <div class="col1">Column1</div>
        <div class="col2">Column2</div>
        <div class="col3">Column3</div>
    </div>
    <br style="clear:both" />
    <div>
        <div class="col1">Column1</div>
        <div class="col2">Column2</div>
        <div class="col3">Column3</div>
    </div>
</div>
</body>
</html>
1 голос
/ 14 мая 2013

Может быть, Magic Table - это то, что вы ищете: http://www.grvisualisation.50webs.com/examples.html

1 голос
/ 15 октября 2008

никакой JavaScript не требуется, это заняло у меня всего несколько минут, чтобы потренироваться 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Example</title>
        <style type="text/css">
            td {
                border: thin black solid;
                width: 3em;
                height: 3em;
            }

            td:hover {
                background-color: red;
                width: 5em;

                /*height: 5em;*/
                /*uncomment the above if you also want to zoom the rows*/
            }
            </style>
        </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                </tr>
            </table>
        </body>
    </html>
0 голосов
/ 23 апреля 2013

приведенный ниже код использует css для расширения ячейки: hover и jquery для переключения (отображения) дополнительного содержимого в данной ячейке ... и его переключения (скрытия), когда вы больше не наводите курсор на ячейку.

http://jsfiddle.net/berteh/QDhcR/12/

CSS: 

 td {
     border: thin black solid;
     width: 3em;
 }
 td:hover {
     background-color: YellowGreen;
     max-width: 5em;
     font-size: 130%;
 }

Javascript: 

$(document).ready(function() {
    $('td').hover(function () {
        $(this).find('.desc').toggle(300);
    });
});

работает на простой таблице HTML: 

<table>
  <tr>
        <th>row1</th>
        <td>1<div class="desc">descZ</div></td>
        <td>2<div class="desc">descU</div></td>
        <td>3<div class="desc">descI</div></td>
        <td>4<div class="desc">descO</div></td>
    </tr>

  <tr>
        <th>row2</th>
        <td>1<div class="desc">descZ</div></td>
        <td>2<div class="desc">descU</div></td>
        <td>3<div class="desc">descI</div></td>
        <td>4<div class="desc">descO</div></td>
    </tr>
</table>
0 голосов
/ 13 октября 2008

Это некрасивый эффект, но он работает только с CSS: но вы можете использовать JS, чтобы он выглядел более плавно: 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <style>
    table{
      width: 150px;
      height: 150px;
    }
    tr{
      height: 20px;
    }
    tr:hover{
      height: 30px;
    }
    td{
      width: 20px;
      border: 1px solid black;
      text-align:center;
    }
    td:hover{
      width: 30px;
    }

  </style>

  </head>

  <body>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
  </body>
  </html>
0 голосов
/ 11 октября 2008

Я думаю, Джонатан на правильном пути. Вам понадобятся методы для поиска всех ячеек в столбце, а также смежных столбцов и строк. Я думаю, что вы могли бы получить приличный эффект только с тремя уровнями «увеличения».

0 голосов
/ 11 октября 2008

Столбцы намного сложнее, чем строки, однако я бы сделал так:

  • Применение уникального класса CSS к каждому TD для каждого столбца
  • Присоединение событий MouseIn и MouseOut
  • Выберите все элементы с именем класса столбцов и примените второй класс "рыбий глаз"
  • При наведении мыши удалить класс.

РЕДАКТИРОВАТЬ: я неправильно понял рыбий глаз, чтобы быть похожим на чередование зебры с бликами ... Чтобы сделать рыбий глаз на столбцах было бы сложно, сделать тот же процесс, как я перечислил выше, но применить анимацию к каждой ячейке вместо нового CSS класс.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...