jQuery Examples – Horizontal Accordion - Tabelle anstelle der Un-geordnete Listen - AKTUALISIERT

Ok, ich habe es funktioniert für jeden, der Sie braucht 🙂

[Ursprüngliche Aussage/Frage]

Hier ist und Beispiel dafür, was ich versuche zu tun (Aber klicken Sie nicht schweben): Das Beispiel

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>

Tisch-Layout (große überläuft):

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

[Ursprüngliche Aussage/Frage]

Nach vielen Bearbeiten/überarbeitet am code/Frage, dass ich irgendwie das es funktioniert, aber nur im IE (6 & 7), es funktioniert nicht korrekt im Firefox (Au!!). Ich denke, es ist die animation-Aufrufe aufgerufen, zur gleichen Zeit und nicht gleichzeitig, versucht die callback-option, aber kann man das nicht zu funktionieren. jede Hilfe wäre toll 🙂
Ein weiteres Problem, aber ich könnte damit Leben: wenn die animation geschieht die white-space:normal aus der CSS ist auch Arbeit verursacht, die animation, um den Bildschirm wirklich lange (Höhe) und korrigieren Sie dann selbst, wie die Spalte, Zelle wird größer. Sowieso zum Aufruf der CSS nach der animation und vielleicht sogar animieren?
BTW: hier ist eine FUNKTIONIERENDE DEMO
Was ich versuche zu erreichen, hier ist die Anzeige einer Tabelle auf einer Seite ohne horizontale Scrollbalken oder scrollen, und ermöglicht die Tabelle zeigt die ausgewählte Daten-und ausblenden, die anderen Spalten für die spätere Anzeige, wenn auf Sie geklickt wird.
EXTREMES BEISPIEL: wenn ich eine Tabelle mit 30 Spalten möchte ich ihn anzeigen, ohne die Notwendigkeit für den Benutzer zu scrollen oder verschieben Sie die Seite in einer horizontalen Art und Weise, sondern auf die Spalte klicken, die Daten zum anzeigen der gewählten.

Vielen Dank für alle Hilfe und Ideen, um dieses Problem zu lösen 🙂

In deinem Beispiel nach dem Klick auf "Zelle 4", um die Spalte "versteckt", wie Sie erwarten, zu einem Umschalten wieder sichtbar, wenn Sie es nicht sehen können?
Ich habe das HTML-tag colgroup aber es sieht nicht zu viel unterstützt
Dies tut müssen Arbeit im IE6?
Ja muss den IE6 unterstützen und auch verwenden Sie bitte nur den angegebenen HTML-Tabellen-tags für jede code, den Sie entwickeln, ich bin stecken mit jemand elses code für die Tabelle, sondern muss die Implementierung der Funktionalität 🙁

InformationsquelleAutor |

jquery

Okay, ich bin komplett neu Bearbeiten, denn ich sah mehr in Ihr problem und sah, dass die weiße Raum war ein Problem.

Wie ich schon sagte, verwenden Sie white-space: pre-wrap nicht vor, um Verzerrung zu vermeiden. Es ist ein IE-äquivalent als gut.

Erste, hier ist ein Beispiel demonstriert, re-Dimensionierung der td-Elemente und entfernen Sie den Stil für andere. Es ist hart codiert, aber kann manipuliert werden, um Ihre Bedürfnisse anzupassen.

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

Hier ist der 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>

Hier ist das 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>

So, einige Dinge zu beachten. Ich benutze den nth-child Selektor, um die Elemente der td entspricht dem th, indem die Schleife über jedes th und die Anwendung eine Funktion, verbraucht die Umwelt (um zu vermeiden, Verweise). Dies kann natürlich in mehreren Möglichkeiten.

Sie anwenden können, - CSS-mit 'kompletten' Rückruf animieren und tun es so.

Ich absichtlich voll qualifizierten die Selektoren, so dass Sie sehen können, wie Sie funktionieren sollte. Sie können add-IDS/- Klassen, was bedeutet, notwendig ist.

Lassen Sie mich wissen, wenn dieses für Sie arbeitet.

Für Ihren Fall, Ihre Elemente haben sollte "white-space: pre-wrap', nicht 'vor', um zu verhindern, verzerren die breiten der container, da die Tabelle ist nicht dazu gedacht zu sein, dies zu tun.
Wieder, dies ist ______nicht______ IE6-Lösung aufgrund der begrenzten CSS2 'table-cell' - Unterstützung. Es funktioniert unter IE7, IE8, Firefox 3.5, Chrome... Wenn überhaupt verwenden Sie es als eine Lernerfahrung.
Vielen Dank Justin für Ihre Lösung, aber was ich brauche, ist eine Reine HTML-Tabelle ohne div-tags sowie IE6 & 7 (vielleicht 8), FF2 & 3 kompatibel Horizontale Akkordeon-Tabelle.
Vielen Dank für diese code-Zeile: display: table-cell !wichtig; ich denke, dass könnte gelöst werden, das Problem bei der Anzeige war ich mit
Ich gebe Ihnen die bounty, da Sie half mir mit die einzige Verbleibende Frage, die ich hatte, aber als für den code, ich habe die Lösung in der oben gestellten Frage.

InformationsquelleAutor Justin Van Horne

0

Dies ist wahrscheinlich eine dumme Idee - aber wenn Sie fest mit dem html (das heißt, Sie können ihn nicht Bearbeiten), aber Sie haben die Fähigkeit zur Anwendung von javascript auf der Seite - warum nicht einfach das Lesen der Daten, die die Tabelle enthält, den Speicher (das ist, konvertieren Sie es in einigen js-Datenstruktur), dann entfernen Sie einfach die original-Tabelle mit javascript und dann es schaffen, alle html-Code, der zu Ihren Bedürfnissen passt.

Das wird wohl einfacher sein als die Tabelle hacken.

es könnte einfacher gewesen, danke für den Tipp

InformationsquelleAutor Ramuns Usovs

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.