Thiết kế lịch tuần phản hồi động

Question

Tôi đang tạo lịch tuần phản hồi động, sử dụng Twitter Bootstrap.

Dưới đây là thực hiện hiện tại của tôi: http://jsfiddle.net/dvirazulay/Lhe7C/ (là một chút thời gian để dán ở đây đầy đủ)

Và đây là một ảnh chụp màn hình hiện tại của nó:

Những gì tôi đang cố gắng để đạt được là một thiết kế sẽ được đầy đủ năng động - tạo ra cái nhìn ban đầu từ back-end của tôi là không có vấn đề, nhưng là một chút phức tạp, như thực hiện hiện tại của tôi sử dụng bảng. Tôi sợ sẽ rất khó để duy trì nó ở phía bên JavaScript của mọi thứ, tức là loại bỏ sự kiện/thêm chúng trên bay.

Rõ ràng, tôi đã chọn các bảng phù hợp với tôi - một lịch tuần về cơ bản là một bảng. Tôi sẽ mô tả thiết kế của tôi:

1. Sự kiện có thể kéo dài hơn 30 phút, vì vậy tôi sử dụng rowspan để xác định khoảng thời gian bao lâu.
2. Có thể có hai sự kiện xung đột (Tôi không cho phép nhiều hơn hai). Khi thiết lập hiện tại, chúng hiển thị cạnh nhau, mỗi phần chiếm 50% chiều rộng của sự kiện và lấy chiều cao theo chiều cao mà chúng cần để biểu thị thời gian kết thúc.
3. Về phía back-end, tôi tính toán bao nhiêu td tôi cần phải bỏ qua để không có cột thêm vào cuối của bảng (như rowspan đẩy một số bên phải)

Câu hỏi của tôi như sau:

• Đây có phải là phương pháp phù hợp không?
• Tôi có nên áp dụng cùng một logic back-end cho front-end hay không và tính lại số tiền tr/td để hiển thị theo số lượng sự kiện tôi có hoặc giải pháp tốt hơn cho điều này?

Lý tưởng nhất, câu trả lời hay nên mô tả cách xử lý sự kiện ở mặt trước mà không gặp biến chứng hoặc thiết kế thay thế (phản hồi!) Cho vấn đề này.

Tôi không muốn sử dụng plugin hiện có, vì tôi đã tìm kiếm và thử nhiều plugin và tôi muốn giữ trọng lượng thực sự nhẹ này, nhưng nếu bạn có đề xuất tuyệt vời cho plugin đáp ứng yêu cầu - tôi rất thích kiểm tra nó! (Lịch tuần jQuery quá chậm và lộn xộn chẳng hạn)

Lưu ý: Tôi không có ý định hỗ trợ các trình duyệt cũ hơn IE9.

Answer 1

Sau khi nghiên cứu các vấn đề và tư vấn với một số chuyên gia front-end, tôi đã kết luận rằng giữ nó như bảng là lựa chọn tốt nhất, ngay cả khi tạo ra nó không phải là tầm thường.

Trong khi quyết định này làm cho việc tự động thay đổi lịch biểu mà không tạo lại toàn bộ bảng, lợi ích của các yếu tố tạo kiểu nên là bảng làm bảng thanh toán - sắp xếp, chiều rộng, chiều cao, đường viền, v.v. là tất cả dễ dàng để kiểm soát và làm việc tuyệt vời qua trình duyệt.

Một lưu ý quan trọng là cách tiếp cận này là làm cho sự đáp ứng của lịch trình là một chất lượng tầm thường.

Answer 2

Đó là cách hoàn toàn có thể chấp nhận để thực hiện.

Nếu tôi là bạn tôi có lẽ sẽ sử dụng div mặc dù vì chúng dễ quản lý hơn và dễ sử dụng CSS hơn và tiêu chuẩn hơn.

Khác với tôi nghĩ rằng bạn đang sử dụng một cách tiếp cận tốt và bạn có lẽ nên làm kết thúc trước giống như cách kết thúc trở lại bởi vì bạn biết nó hoạt động.Theo như sự kiện xử lý, tôi sẽ sắp xếp div theo loại bằng cách sử dụng các lớp và sau đó sử dụng trình xử lý sự kiện với các loại sự kiện bạn muốn sử dụng (tôi không biết bạn muốn gì ngoài việc nhấp) trên các ứng dụng tương ứng các lớp học.

Answer 3

Sử dụng bảng là cách tiếp cận tốt.

Ok, đây là giải pháp dựa trên jQuery cho vấn đề "rowspans được đẩy đúng". Nguồn gốc của vấn đề là tạo bảng sai trong phần cuối.

Ví dụ: nếu td với rowspan = "3" được hiển thị, thì td ở cùng vị trí chỉ mục cột trong hai hàng tiếp theo sẽ bị ảnh hưởng và được đẩy sang phải. Điều này là không mong muốn.

<table border="1"> 
<tr> 
    <td>07:30</td> 
    <td rowspan="3">Event 07:30 to 09:00</td> 
</tr> 
<tr> 
    <td>08:00</td> 
    <td>Should not be rendered.</td> 
</tr> 
<tr> 
    <td>08:30</td> 
    <td>Should not be rendered.</td> 
</tr> 
<tr> 
    <td>09:00</td> 
    <td>C</td> 
</tr> 

Các giải pháp đúng là một thế hệ bảng chính xác trong backend. Hiển thị td's sau khi rowspan chỉ đơn giản là không xảy ra. Nếu bạn biết, bạn đang hiển thị một rowspan = "3", sau đó hành động tương ứng. :)

Dù sao, nếu nó không thể thay đổi vẽ bảng, sau đó sử dụng jQuery để sửa chữa nó:

http://jsfiddle.net/9tQvu/3/

Answer 4

gì xảy ra khi một sự kiện được chồng chéo chỉ một phần với nhau, tôi có nghĩa là, 2 các sự kiện chồng chéo chiếm 50% của witdh, nhưng nếu một trong số chúng kết thúc sớm hơn và cái kia sau đó, cái tiếp theo, nó có lấy toàn bộ chiều rộng của hàng "tiếp theo" hay tiếp tục ở 50% chiều rộng không? Điều gì xảy ra nếu sự kiện A diễn ra từ 8:00 đến 8:30 và sự kiện B là từ 8:00 đến 18:00? nó sẽ được tốt đẹp rằng sự kiện B sẽ fullup chiều rộng cho đến khi có một sự kiện chồng chéo .. nhưng tôi đoán nó có thể là một chút khôn lanh. chỉ là một ý nghĩ. Happy coding, đây thực sự là một dự án hay.

Answer 5

dhtmlxScheduler - Ajax/Javascript sự kiện Lịch

dhtmlxScheduler là một cuốn lịch sự kiện JavaScript cho phép bạn thêm một lịch trình Google như để ứng dụng web của bạn hoặc trang web. Giao diện kéo và thả trực quan cho phép người dùng cuối quản lý nhanh chóng các sự kiện và các cuộc hẹn trong các chế độ xem khác nhau: Ngày, Tuần, Tháng, Năm, Chương trình làm việc, Dòng thời gian, ... Rất nhẹ (khoảng 20Kb gzipped), tùy biến cao và nhanh chóng, dhtmlxScheduler cung cấp một cách nhanh chóng để thêm lịch sự kiện dựa trên Ajax trên một trang web.

Answer 6

Sử dụng CSS và div, thay vì ô bảng, có thể chính xác hơn và chắc chắn sẽ dễ dàng hơn để tính toán phía máy khách và duy trì phản hồi.Dưới đây là ví dụ về pseduo-CSS/JS cho sự kiện đầu tiên:

.event:first-child { 
    height: `(1.5/24)*100`%; /* 6.25%, based on duration */ 
    position: absolute; 
    top: `(10/24)*100`%; /* 41.7%, based on event start */ 
}