1. Trang chủ
  2. Câu hỏi và trả lời
  3. Vẽ một khung giải đấu (CSS/HTML dựa trên PHP Dataset)

Vẽ một khung giải đấu (CSS/HTML dựa trên PHP Dataset)

2010-02-02 15 views
8

Nếu bạn không quen thuộc với những gì tôi có nghĩa là bởi khung giải đấu, xem tại đây: http://baseballguru.com/bracket1.gifVẽ một khung giải đấu (CSS/HTML dựa trên PHP Dataset)

Điều đó nói rằng, tôi đã xây dựng bộ dữ liệu và tìm ra số vòng (ceil (log ($ numPlayers, 2))) và tôi cảm thấy thoải mái khi tìm số người chơi trong mỗi vòng, v.v.

Điều tôi cần làm bây giờ là di chuyển mảng đối sánh cho mỗi vòng vào một khung. Có thể là CSS, hay tabled, tôi có thể chơi với bản thân thiết kế, tôi chỉ tự hỏi làm thế nào tôi nên đi về xây dựng này (xem xét các giải đấu có thể có một số lượng thay đổi của vòng) vào một cái gì đó trực quan.

Cảm ơn!

Nguồn

2010-02-02 Matt Dunbar

+0

tôi đã làm việc trên một PHP/Laravel plugin mà tạo dấu ngoặc có/không có robin vòng sơ khảo. Có lẽ nó có thể hữu ích cho bạn, tôi không biết bạn đang sử dụng công nghệ gì. Đây là github. https://github.com/xoco70/kendo-tournaments Hy vọng điều đó sẽ hữu ích! –

Trả lời

1

Bạn có thể đi với các bảng và đặt rowspan s thích hợp để xếp hàng khung. Đây là cách dễ dàng hơn, nhưng một số sẽ nói không đúng ngữ nghĩa. Example.

Bạn cũng có thể làm điều đó với các lớp CSS'd bằng cách tính toán các vị trí thích hợp và sử dụng các div vị trí tuyệt đối để làm cho nó giống như một khung. Lưu ý rằng cách tiếp cận này sẽ không có chất lỏng trừ khi bạn di chuyển xung quanh bằng javascript. More on this.

Cuối cùng, bạn có thể làm điều đó với danh sách lồng nhau, như được mô tả trong this topic, nhưng có vẻ khá lộn xộn.

Nguồn

2010-02-02 03:41:28

+0

Tôi đã sử dụng ví dụ đầu tiên có bảng, nhưng được quản lý để sao chép nó trên cả hai mặt. Cảm ơn. Bất kỳ lời khuyên nào về cách dọn dẹp bàn trống hơn? –

3

Tôi có một dự án (TournamentsApi) đã được thực hiện để theo dõi và kết xuất các giải đấu. Bạn nên nhìn vào nó.

Trên trang web của mình, tôi sẽ hiển thị các dấu ngoặc vuông cho SVG và nhúng chúng vào HTML. Tôi rất sẵn lòng chia sẻ mã mà tôi sử dụng để tạo/nhúng SVG, nếu bạn có khuynh hướng sử dụng triển khai của mình.

Tất nhiên, tôi được viết bằng C#, vì vậy nó có thể không phù hợp với bạn sử dụng. Tuy nhiên, mã nguồn được phát hành theo giấy phép MIT và bạn có thể tự do sử dụng cấu trúc dữ liệu mà tôi đã tạo cho dự án của riêng bạn

Nguồn

2010-02-02 03:45:21

+0

hey John, đã tự hỏi nếu bạn đã có thể hoàn thành dự án này? rất thích xem và nhận ý tưởng từ mã của bạn về cách tôi nên tiếp cận vấn đề của mình với việc tạo dấu ngoặc đơn. – gdubs

+0

@gdubs, dự án Giải đấu API hoàn chỉnh hơn hoặc ít hơn. Ở đây nó đang hoạt động trên trang web của chúng tôi: http://lanlordz.net/Events/ViewTournament/8/modern-warfare-2 (cuộn xuống danh sách vòng để xem nó được hiển thị dưới dạng SVG.) –

+0

hey John, có cơ hội nào tôi có thể có mã nguồn cho điều đó không? được thử nghiệm với jquery và nó đã được một nỗi đau thực sự, đã tự hỏi nếu có sẽ là một phiên bản C# của nó. Cảm ơn bạn! – gdubs

-3

Nếu bạn đang tìm giải pháp nhanh và không có CSS ​​hoặc java cần thiết. thử này:

https://dl.dropboxusercontent.com/u/43939704/TournamentBrackets.7z

Nó chỉ là HTML Bảo hiểm tiền gửi và một vài file .png cho các dòng (xem file 7Z cho bức ảnh).

Grtz, Theo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 
<meta http-equiv="refresh" content="1" > 
<head> 
    <title>Boom16 - dubbele afvalling </title> 
</head> 
<body> 

<!-- Div info --> 

    <div id="DivInfo" style="position:absolute; top:10px; left:930px; width:300px; height:60px; "><FONT SIZE="10" COLOR="000000">DIVISIE 1</FONT></div> 

<!-- Scheiding --> 

    <div id="Scheiding" style="position:absolute; top:604px; left:0px; width:926px; height:2x; border:2px solid #000; "></div> 
    <div id="ST1"  style="position:absolute; top:585px; left:10px; width:200px; height:60px; "><FONT SIZE="3" COLOR="000000">Normale races<br>Herkansings races</FONT></div> 


<!-- Lijnen --> 

    <div id="H" style="position:absolute; top:606px; left:1132px;width:24px; height:2x;  border:2px solid #000; "></div> 
    <div id="HL2" style="position:absolute; top:315px; left:900px; width:130px; height:260px; background-image: url(Rood1.png); background-size:100% 100%;"></div> 
    <div id="HL3" style="position:absolute; top:635px; left:900px; width:130px; height:260px; background-image: url(Blauw1.png); background-size:100% 100%;"></div> 
    <div id="HL4" style="position:absolute; top:145px; left:670px; width:130px; height:110px; background-image: url(Rood1.png); background-size:100% 100%;"></div> 
    <div id="HL5" style="position:absolute; top:785px; left:670px; width:130px; height:110px; background-image: url(Rood1.png); background-size:100% 100%;"></div> 
    <div id="HL6" style="position:absolute; top:315px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div> 
    <div id="HL7" style="position:absolute; top:955px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div> 
    <div id="HL8" style="position:absolute; top:75px; left:440px; width:130px; height:40px; background-image: url(Rood1.png); background-size:100% 100%;"></div> 
    <div id="HL9" style="position:absolute; top:715px; left:440px; width:130px; height:40px; background-image: url(Rood1.png); background-size:100% 100%;"></div> 
    <div id="HL10" style="position:absolute; top:175px; left:440px; width:130px; height:40px; background-image: url(Blauw1.png); background-size:100% 100%;"></div> 
    <div id="HL11" style="position:absolute; top:815px; left:440px; width:130px; height:40px; background-image: url(Blauw1.png); background-size:100% 100%;"></div> 
    <div id="HL12" style="position:absolute; top:355px; left:440px; width:130px; height:40px; background-image: url(Rood1.png); background-size:100% 100%;"></div> 
    <div id="HL13" style="position:absolute; top:995px; left:440px; width:130px; height:40px; background-image: url(Rood1.png); background-size:100% 100%;"></div> 
    <div id="HL14" style="position:absolute; top:455px; left:440px; width:130px; height:40px; background-image: url(Blauw1.png); background-size:100% 100%;"></div> 
    <div id="HL15" style="position:absolute; top:1095px;left:440px; width:130px; height:40px; background-image: url(Blauw1.png); background-size:100% 100%;"></div> 
    <div id="HL16" style="position:absolute; top:30px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> 
    <div id="HL17" style="position:absolute; top:670px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> 
    <div id="HL18" style="position:absolute; top:105px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> 
    <div id="HL19" style="position:absolute; top:745px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> 
    <div id="HL20" style="position:absolute; top:170px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> 
    <div id="HL21" style="position:absolute; top:810px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> 
    <div id="HL22" style="position:absolute; top:245px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> 
    <div id="HL23" style="position:absolute; top:885px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> 
    <div id="HL24" style="position:absolute; top:310px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> 
    <div id="HL25" style="position:absolute; top:950px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> 
    <div id="HL26" style="position:absolute; top:385px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> 
    <div id="HL27" style="position:absolute; top:1025px;left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> 
    <div id="HL28" style="position:absolute; top:1090px;left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> 
    <div id="HL28" style="position:absolute; top:450px; left:210px; width:130px; height:15px; background-image: url(Rood3.png); background-size:100% 100%;"></div> 
    <div id="HL30" style="position:absolute; top:525px; left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> 
    <div id="HL31" style="position:absolute; top:1165px;left:210px; width:130px; height:15px; background-image: url(Blauw3.png); background-size:100% 100%;"></div> 

<!-- Blokken --> 

    <div id="H0" style="position:absolute; top:575px; left:1160px;width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H0 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H1" style="position:absolute; top:575px; left:930px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H1 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H2" style="position:absolute; top:255px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H2 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H3" style="position:absolute; top:895px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H3 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H4" style="position:absolute; top:115px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H4 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H5" style="position:absolute; top:755px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H5 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H6" style="position:absolute; top:395px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H6 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H7" style="position:absolute; top:1035px;left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H7 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H8" style="position:absolute; top:45px ; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H8 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H9" style="position:absolute; top:685px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H9 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H10" style="position:absolute; top:185px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H10 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H11" style="position:absolute; top:825px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H11 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H12" style="position:absolute; top:325px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H12 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H13" style="position:absolute; top:965px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H13 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H14" style="position:absolute; top:465px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H14 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H15" style="position:absolute; top:1105px;left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H15 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H16" style="position:absolute; top:10px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H16 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H17" style="position:absolute; top:650px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H17 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H18" style="position:absolute; top:80px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H18 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> 
    <div id="H19" style="position:absolute; top:720px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H19 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> 
    <div id="H20" style="position:absolute; top:150px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H20 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H21" style="position:absolute; top:790px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H21 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H22" style="position:absolute; top:220px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H22 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> 
    <div id="H23" style="position:absolute; top:860px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H23 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> 
    <div id="H24" style="position:absolute; top:290px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H24 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H25" style="position:absolute; top:930px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H25 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H26" style="position:absolute; top:360px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H26 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> 
    <div id="H27" style="position:absolute; top:1000px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H27 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> 
    <div id="H28" style="position:absolute; top:1070px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H28" style="position:absolute; top:430px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1 </FONT></div> 
    <div id="H30" style="position:absolute; top:500px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H30 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> 
    <div id="H31" style="position:absolute; top:1140px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1 <br>H31 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div> 


</body> 
</html>

Nguồn

2014-06-15 11:01:21 user3742089

Các vấn đề liên quan

 Các vấn đề liên quan