Elementy pływające: Wypełnij dolną linię najpierw

Question

Jeden z projektów, nad którym pracuję, korzysta z nawigacji z kartami. Ponieważ liczba zakładek jest obliczana dynamicznie i może osiągać wysokie liczby, czasami te zakładki (które w istocie są elementami <li> z deklaracją stylu) przeniosą się do następnej linii, używając do wyświetlania karty wartości, efekt końcowy wygląda coś takiego:

[###] [###] [###] [###] [###] [###] 
[###] [###] 
[Rest of the content..............] 

Ponieważ ostatnie 4 elementy na górnym rzędzie nie mają one element „łączyć się”, to po prostu wygląda okropnie.

Czy jest to możliwe, przy pomocy Javascript (frameworki takie jak jQuery lub MooTools akceptowalne, jeśli zapewniają krótsze/łatwiejsze rozwiązanie), aby wypełnić dolny wiersz jako pierwszy i umieścić pozostałe elementy na wierzchu?

Jak to:

[###] [###] 
[###] [###] [###] [###] [###] [###] 
[Rest of the content..............] 

(pytanie oznaczone MooTools, ponieważ jest to framework JS jesteśmy aktualnie wykorzystuje Odpowiedź podana w inny ram byłoby dobrze, ponieważ może to prawdopodobnie być tłumaczone na MT. szybko)

Answer 1

Poniżej znajduje się kod, którego użyłem do rozwiązania tej sprawy. Zasadniczo, używając JS, obliczamy szerokość kontenera, a wraz z szerokością zakładek (wszystkie zakładki mają tę samą szerokość) obliczamy liczbę zakładek w rzędzie i resztę. Za pomocą prostego porównania modulo możemy wstawić styl clear: both (zmuszając kartę do przejścia do pustego wiersza).

var allTabs = $$('#tab-container li'); 
var tabNum = allTabs.length; 
var tabWidth = allTabs[0].offsetWidth; 
var oWidth = $('tab-container').offsetWidth; 
var tabRowNum = Math.floor(oWidth/tabWidth); 
var tabRowOffset = (tabNum % tabRowNum); 

for(var i = 0; i < tabNum; i++) { 
    if((i % tabRowNum) == tabRowOffset) { 
     allTabs[i].setStyle('clear', 'both'); 
    } 
    else { 
     allTabs[i].setStyle('clear', 'none'); 
    } 
} 

Answer 2

Obawiam się, że nie ma prostego rozwiązania, aby zrobić dokładnie to, co chcesz. Pływaki są spławikami. Najlepiej będzie liczyć wymiary i liczbę kart w locie za pomocą javascript, a następnie ustawić je ręcznie za pomocą position:absolute. Nie ładne.

Ale problem z dopasowaniem wielu zakładek do małej przestrzeni jest możliwy do rozwiązania. Najprostszą metodą jest nadanie kartom w drugim rzędzie dodatkowej klasy css i użycie jej do umieszczenia ich na pierwszym rzędzie. Można to zrobić po stronie serwera lub po stronie klienta, używając javascript. Lub, jeśli znasz dokładną liczbę zakładek i dokładną szerokość ich kontenera, możesz ustawić dla nich max-width i pozwolić im trochę się skurczyć. Lub możesz przejść z overflow: scroll dla kontenera kart, ale to na pewno wygląda brzydko :)

Answer 3

Łatwo z JS. Kod mniej niż pseudo:

• Tworzenie div (opcjonalnie)
• Utwórz ul
• napełnić go li s aż albo określona liczba maksymalna jest osiągana lub ich połączona szerokość „tylko poniżej”potrzebnym szerokość
• dodać div do dokumentu HTML, oszczędność odniesienie do id
• r epeat, ale jeśli masz zapisane odniesienie do zapisanego div, dodaj nowe przed , że.

Answer 4

Proponuję zachować wszystkie zakładki w jednym wierszu (ułóż tak szeroki, jak jest to wymagane) i przewiń do bieżącej zakładki. (Będziesz potrzebować rozwijanego menu z listą wszystkich dostępnych zakładek, do nawigacji.)

Problem z tym, co próbujesz zrobić, to, że jeśli uzyskasz dostać to, co chcesz, co się dzieje, gdy wybrana jest karta w górnym wierszu?

• mieć wybrany występ, który nie jest podłączony do aktualnej centrali (oddzielonej od dolnego rzędu języczków), który jest brzydki lub
• Poruszanie górny rząd języczków do spodzie (obok panel), w którym to przypadku masz sytuację, której próbujesz uniknąć lub
• Ponownie uporządkujesz zakładki, aby umieścić wybrany na dole, co powoduje bałagan w nawigacji (niemożliwe jest, aby użytkownik dowiedział się, gdzie zakładki są).