Phần tử nổi: Điền vào dòng dưới cùng trước tiên

Question

Một dự án tôi đang thực hiện để sử dụng điều hướng theo tab. Vì số lượng tab được tính toán động và có thể đạt số cao, đôi khi các tab này (thực chất là <li> các phần tử có khai báo kiểu float: left;) tràn vào dòng tiếp theo, Sử dụng [###] để hiển thị tab, kết quả cuối cùng một cái gì đó như thế này:

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

Vì 4 phần tử cuối cùng trên hàng đầu không có phần tử mà chúng kết nối ', điều này trông thật khủng khiếp. Có thể, với sự trợ giúp của Javascript (các khung công tác như jQuery hoặc MooTools có thể chấp nhận được không, nếu chúng cung cấp một giải pháp ngắn hơn/dễ dàng hơn) để điền vào hàng dưới cùng trước tiên, và đặt phần còn lại của các phần tử lên trên không?

Như thế này:

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

(Câu hỏi tagged MooTools, vì đó là khuôn khổ JS chúng tôi hiện đang sử dụng Một câu trả lời được đưa ra trong bất kỳ khuôn khổ khác sẽ là tốt, vì nó có thể có thể được dịch ra tiếng MT. nhanh chóng)

Answer 1

Dưới đây là mã tôi đã sử dụng để giải quyết vấn đề này. Về cơ bản, sử dụng JS, chúng tôi tính chiều rộng của vùng chứa và cùng với chiều rộng của các tab (tất cả các tab có cùng chiều rộng) tính số lượng tab trên mỗi hàng và phần còn lại. Sử dụng so sánh modulo đơn giản, sau đó chúng tôi có thể chèn kiểu clear: both (buộc tab di chuyển đến hàng trống).

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

Tôi e rằng không có giải pháp đơn giản nào để thực hiện chính xác những gì bạn muốn. Nổi là nổi. Đặt cược tốt nhất của bạn sẽ được tính kích thước và số lượng tab đang hoạt động với javascript, sau đó định vị chúng theo cách thủ công với position:absolute. Không đẹp.

Nhưng vấn đề lắp nhiều tab vào không gian nhỏ là khả năng giải quyết được. Phương pháp đơn giản nhất là cung cấp cho các tab trong hàng thứ hai một lớp css bổ sung và sử dụng nó để định vị chúng ở trên cùng của hàng đầu tiên. Điều này có thể được thực hiện trên phía máy chủ hoặc phía khách hàng, với javascript. Hoặc, nếu bạn biết chính xác số lượng tab và độ rộng chính xác của vùng chứa, thì bạn có thể đặt max-width cho chúng và để chúng co lại một chút. Hoặc bạn có thể đi với overflow: scroll cho các vùng chứa tab, nhưng điều này chắc chắn sẽ trông xấu xí :)

Answer 3

Dễ dàng với JS. mã ít hơn giả:

• Tạo một div (tùy chọn)
• Tạo một ul
• điền nó với li s cho đến khi một trong hai cho số tối đa đạt được hoặc kết hợp chiều rộng của họ là "chỉ bên dưới "cần thiết chiều rộng
• thêm div vào tài liệu html của bạn, lưu tham chiếu đến id
• r epeat, nhưng nếu bạn có một tài liệu tham khảo đã lưu vào div đã lưu, hãy thêm số mới trước .

Answer 4

Tôi khuyên bạn nên giữ tất cả các tab trên một dòng (làm cho nó rộng bằng yêu cầu) và cuộn đến tab hiện tại. (Bạn sẽ muốn trình đơn thả xuống liệt kê tất cả các tab có sẵn, để điều hướng.)

Sự cố với những gì bạn đang cố gắng làm là nếu bạn làm nhận những gì bạn muốn, cái gì gì xảy ra khi một tab ở hàng trên cùng được chọn?

• Bạn có một tab chọn mà không được kết nối với bảng điều khiển hiện tại (ngăn cách bởi dòng dưới cùng của tab), mà là xấu xí hay
• Bạn di chuyển hàng đầu tiên của tab xuống cuối (tiếp giáp với bảng điều khiển) trong trường hợp này, bạn có tình huống bạn đang cố gắng tránh hoặc
• Bạn sắp xếp lại các tab để đặt tab đã chọn ở dưới cùng, điều này tạo ra sự lộn xộn trong điều hướng (người dùng không thể tìm hiểu các tab là).