代码之家 › 专栏 › 技术社区 › gizmo

jquery示例“水平手风琴-表而不是未排序列表-更新

jquery

gizmo · 技术社区 · 5 年前

好的,我可以为任何需要这个的人工作:)

[原始陈述/问题]
下面是我要做的事情的示例(但单击“不悬停”): The Example

JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        // Get original font size
        var originalFontSize = $('html').css('font-size');

        // Get active column
        var activeColumn = $(".activeColumn");

        // Set max width using percentage %
        var maxWidth = 50;

        // Get width % ratio for min width by getting the children (count) in the header
        var table_header_children = $('tr:first-child').children().size();

        // Divide the column header count by 100 to get the average width
        var table_column_width_average = (100 / table_header_children);

        // Get the outer height of the header
        var table_header_height = $('th').outerHeight();

        // Set min width for the columns
        var minWidth = table_column_width_average;

        // Animate table by clicking the table header ( <th> )
        $("tr th").click(function(){
            if ($(this).hasClass('correct_text_spacing')) {
                // Check for double click, do nothing
                var doubleClicked = true;
            }
            else {
                // Animates the last active column
                $(activeColumn).animate({
                    width: minWidth + "%"
                }, {
                    queue: false,
                    duration: 600
                });

                // Animates the table header
                $(this).animate({
                    width: maxWidth + "%"
                }, {
                    queue: false,
                    duration: 600
                });

                activeColumn = this;

                // Reset the table header CSS
                $('tr:first-child').children().css({
                    'width': minWidth,
                    'overflow': 'hidden',
                    'white-space': 'nowrap',
                    'height': table_header_height
                });

                // Remove class if found
                $('table.tbl tr').children().removeClass('correct_text_spacing');

                // Reset the font size to zero
                var index = $(this).parent().children().index(this);
                $('table.tbl tr').each(function(){
                    $(':nth-child(' + (index + 1) + ')', this).css('font-size', '0px');
                });

                // Fix text spacing on selected column
                var index = $(this).parent().children().index(this);
                $('table.tbl tr').each(function(){
                    $(':nth-child(' + (index + 1) + ')', this).addClass('correct_text_spacing').animate({
                        fontSize: originalFontSize
                    }, {
                        queue: true,
                        duration: 950
                    });
                });
            }
        });
    });
</script>

CSS:

<style type="text/css">
    .tbl {
        table-layout: fixed;
        border-top: 5px solid #ccc;
        border-collapse: collapse;
        background: #fff;
        width: 100%;
    } .tbl td {
        border: 1px solid #ccc;
        padding: 2px 5px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
    } .tbl th {
        border-bottom: 1px solid #ccc;
        padding: 2px 5px;
        overflow: hidden;
        white-space: nowrap;
        background: #fff;
        display: table-cell !important;
    }

    td.correct_text_spacing {
        white-space: normal;
    }
</style>

表布局(大溢出):

<table class="tbl">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th>
            Cell 2:Long Heading Data
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
        <th>
            Cell 6:Heading
        </th>
        <th>
            Cell 7:Heading
        </th>
        <th>
            Cell 8:Heading
        </th>
        <th>
            Cell 9:Heading
        </th>
        <th>
            Cell 10:Heading
        </th>
        <th>
            Cell 11:Heading
        </th>
        <th>
            Cell 12:Heading
        </th>
        <th>
            Cell 13:Heading
        </th>
        <th>
            Cell 14:Heading
        </th>
        <th>
            Cell 15:Heading
        </th>
        <th>
            Cell 16:Heading
        </th>
        <th>
            Cell 17:Heading
        </th>
        <th>
            Cell 18:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td>
            Cell 2:Row 1:Overflowing Data - This has a lot of extra data that will be hidden and displayed correctly. 
            Please add more data to test the functionality of the cell data
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1: "Lorem ipsum dolor sit amet, 
            consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
            Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum."
        </td>
        <td>
            Cell 6:Row 1
        </td>
        <td>
            Cell 7:Row 1
        </td>
        <td>
            Cell 8:Row 1
        </td>
        <td>
            Cell 9:Row 1
        </td>
        <td>
            Cell 10:Row 1
        </td>
        <td>
            Cell 11:Row 1
        </td>
        <td>
            Cell 12:Row 1
        </td>
        <td>
            Cell 13:Row 1
        </td>
        <td>
            Cell 14:Row 1
        </td>
        <td>
            Cell 15:Row 1
        </td>
        <td>
            Cell 16:Row 1
        </td>
        <td>
            Cell 17:Row 1
        </td>
        <td>
            Cell 18:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td>
            Cell 2:Row 2:Overflowing Data
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
        <td>
            Cell 6:Row 2
        </td>
        <td>
            Cell 7:Row 2
        </td>
        <td>
            Cell 8:Row 2
        </td>
        <td>
            Cell 9:Row 2
        </td>
        <td>
            Cell 10:Row 2
        </td>
        <td>
            Cell 11:Row 2
        </td>
        <td>
            Cell 12:Row 2
        </td>
        <td>
            Cell 13:Row 2
        </td>
        <td>
            Cell 14:Row 2
        </td>
        <td>
            Cell 15:Row 2
        </td>
        <td>
            Cell 16:Row 2
        </td>
        <td>
            Cell 17:Row 2
        </td>
        <td>
            Cell 18:Row 2: "Lorem ipsum dolor sit amet, 
            consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
            Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum."
        </td>
    </tr>
</table>

[原始陈述/问题]
在对代码/问题进行了多次编辑/修改之后,我有点让它正常工作,但仅在IE(6&7)中,它在Firefox中不能正常工作(augh!!!)我认为是动画调用同时调用,而不是同时调用,尝试了回调选项,但也无法使其工作。任何帮助都很好:) 另一个问题是,当动画发生时,CSS的“空白:正常”也在起作用,使动画使屏幕变长(高度),然后随着列单元格变大而自我更正。不管怎样,在动画结束后调用CSS,甚至可以对其进行动画处理? 顺便说一句: here is a WORKING DEMO 我想在这里实现的是在一个页面上显示一个表,而不使用水平滚动条或滚动,并且允许该表显示所选数据,并隐藏其他列以便以后单击时显示。极端示例:如果我有一个包含30列的表,我希望它在不需要用户以任何水平方式滚动或移动页面的情况下显示,但单击列数据以显示所选的。

感谢所有帮助和想法来解决这个问题:)

2 回复 | 直到 9 年前

Justin Van Horne 15 年前

好吧,我完全重新编辑了这个,因为我更深入地研究了你的问题,发现空白是一个问题。

如我之前所说,使用 空白:预包装 避免变形。也有一个IE等价物。

首先,这里是一个示例,演示如何重新调整td元素的大小并删除其他元素的样式。它是硬编码的,但可以根据需要进行操作。

http://ece.arizona.edu/~justinvh/test.html

这是HTML:

<!DOCTYPE HTML>
<html>
  <head>    
    <title>Testing Horizontal Accordion</title>
    <style>
      table {
        width: 100%;
      }

      th {
        display: table-cell !important;
      }

      td {
        border: 1px solid #A8A8A8;
      }

      div.content {
        max-height: 20px;
        overflow: hidden;
        white-space: pre-wrap;
      }
    </style>
    <script src="jquery-1.3.2.min.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th style="width: 70%;">A</th>
          <th>B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
          <td>                      
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            </div>
          </td>
          <td>Hello, my baby!</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

这里是javascript:

<script>
  var $active = $("thead > tr > th:first");
  var $active_td = $('div.content', 'table > tbody > tr > td:nth-child(1)');
  var min_width = $active.next().width();
  var max_width = $active.width();

  $("thead > tr > th").each(function(i, e) {
    (function(ith, element) {
      $(element).click(function() {
        $active_td.css('max-height', '20px');
        $active.animate({ width: min_width }, { queue: false, duration: 400 });
        $active_td = $('div.content', 'table > tbody > tr > td:nth-child(' + (ith + 1) + ')');
        $active_td.css('max-height', 'inherit');                        
        $(this).animate({ width: max_width }, { queue: false, duration: 400 });
        $active = $(this);
      });
    })(i, e);
  });

  $('thead > tr > th:first').click();
</script>

所以,有些事情需要注意。我使用nth子选择器通过循环遍历每个th并应用一个使用环境的函数(以避免引用)来获取与th对应的td元素。这显然可以通过多种方式实现。

你可以在动画上使用“完成”回调来应用这个CSS,然后这样做。

我有意完全胜任 选择器,这样您就可以看到它们应该如何工作。您可以通过任何必要的方式添加标识符/类。

如果这对你有用,请告诉我。

Ramuns Usovs 15 年前

这可能是一个愚蠢的想法——但是如果你坚持使用HTML(也就是说你不能编辑它),但是你确实有能力在页面上应用任何javascript——为什么不简单地将表包含的数据读取到内存中(也就是将其转换为一些JS数据结构),然后使用javascript删除原始表,然后使用CRE吃任何符合你需要的HTML。

这可能会比桌面黑客更简单。