Frage JQuery Scrolling / Paging Tabs


Ich versuche, eine einfache Tab-Leiste für eine Site zu erstellen, die die Möglichkeit bietet, nach Tabs zu scrollen, die nicht auf die Seite passen. Das ist ziemlich einfach und muss keinen Ajax oder dynamisch geladenen Inhalt haben ... es zeigt einfach alle Tabs an, und wenn Sie einen anklicken, gelangen Sie zu einer anderen Seite.

Ich habe das Internet durchforstet und finde nichts anderes als: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html aber das ist sehr schwer und kompliziert ... Ich suche ein leichtes Beispiel in jQuery. Wenn jemand helfen kann, wäre ich dankbar!


13
2017-09-24 19:17


Ursprung


Antworten:


Ich habe es selbst mit einem div geschrieben, dessen Überlauf auf versteckt eingestellt ist. Dann benutze die unten stehende jquery, um die Tabs im div zu verschieben.

    $(document).ready(function()
    {
      $('.scrollButtons .left').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var pos = content.position().left + 250;
        if (pos >= 0)
        {
            pos = 0;
        }
        content.animate({ left: pos }, 1000);
      });
      $('.scrollButtons .right').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var width = content.children('ul').width();
        var pos = content.position().left - 250;
        //var width = content.width();
        if (pos <= (width * -1) + 670)
        {
            pos = (width * -1) + 600;
        }
        content.animate({ left: pos }, 1000);
      });
    });

Mein HTML sah so aus:

    <div class="tabs">
    <div class="scrollable">
        <div class="content">
            <ul>
                <li>Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
                <li>Tab4</li>
                <li>Tab5</li>                    
                </ul>
        </div>
    </div>
    <div class="scrollButtons">
        <ul>
            <li>
                <div class="left">
                </div>
            </li>
            <li>
                <div class="right">
                </div>
            </li>
        </ul>
    </div>
</div>

13
2017-10-02 20:07



Ich habe gerade ein Plugin selbst erstellt: Projekt nach Hause: http://jquery.aamirafridi.com/jst


6
2018-05-04 14:09



Könnten Sie einfach die Registerkarten in ein DIV mit Überlauf-X: Auto-Set in der CSS?


0
2017-09-24 19:20



Ich benutze immer JQuery UI-Registerkarten als Ausgangspunkt für Tabs. Sie können den JQuery UI-Download im Downloadbereich der Website anpassen. Diese Methode sollte leichter sein als jede andere Implementierung, wenn Sie JQuery bereits auf Ihrer Website verwenden.

Die JQuery-UI-Registerkarten bieten standardmäßig nicht den gewünschten Bildlauf. Ich glaube, dass dies durch die Änderung des CSS erreicht werden könnte, aber wahrscheinlich einfacher wird, wenn Sie die Navigation Ihrer Website ändern (d. H. Mehr Ebenen erstellen, kürzere Titel verwenden).

Hoffe das hilft


0
2017-10-02 11:44