I developed a prototype of a graphical time scheduler but need to re-code most of it since the JS is a mess at the moment. And I realized this is the best time to make any major changes to my design as well.

我開發了一個圖形時間調度程序的原型,但需要對其中的大部分進行重新編碼,因為JS目前很亂。我意識到這是對我的設計進行任何重大改變的最佳時機。

It uses an html table and looks like:

它使用一個html表,看起來像:

Currently:

• starts off empty and grows/shrinks via jquery rewriting it

從空開始,通過jquery重寫它來增長/縮小

• fairly dynamic (time scale, sizes, etc can all be changed at run time)

相當動態(時間刻度,大小等都可以在運行時更改)

• horizontal lines are halfway through cells, they aren't cell borders (like here).

水平線是細胞的中間,它們不是細胞邊界(就像這里)。

• red boxes are anchored in a cell and given an offset and size via JS. same with blue box.

紅色框固定在一個單元格中,並通過JS給出偏移量和大小。與藍盒子相同。

• time tags are divs inside cells and not really fun to work with

時間標簽是單元格內的div,並不是很有趣

I need to add a bunch more functionality:

我需要添加更多功能:

• some basic/limited zooming

一些基本/有限的縮放

• multi-day tags
• labels on the redboxes

redboxes上的標簽

• hover/click effects
• possibly some drag effects

可能有些拖拽效果

I can figure out all of the above but I'm unsure if it's better to go with a table or list (or something else?). Technically, it's a "timetable" but it looks more like a graph. My experience with lists is very limited so I'm looking for someone's advice that's done this kind of thing before before. I don't want to switch to a list and realizing I need to change my base html type partway through.

我可以弄清楚以上所有內容,但我不確定是否最好使用表格或列表(或其他內容?)。從技術上講,這是一個“時間表”,但它看起來更像是一個圖表。我對列表的體驗非常有限,所以我正在尋找某人之前做過這種事情的建議。我不想切換到列表並意識到我需要在中途更改我的基本html類型。

Also, this is not a "public" app (it's behind a login), if that makes a difference. And my key priorities are smooth development and easy maintenance/customization. Though thoughts about JS performance would be useful too.

此外,這不是一個“公共”應用程序(它在登錄后面),如果這有所作為。我的主要優先事項是順利開發和易於維護/定制。雖然對JS性能的想法也很有用。

EDIT:

Rereading, my question is a bit vague (the 'why' part of it).

重讀,我的問題有點模糊('為什么'部分)。

What I'm interested in is which html element makes it easier in regards to:

我感興趣的是哪個html元素使得它更容易:

• positioning, alignment
• absolute positioned things like red boxes

絕對定位的東西,如紅盒子

• effects and events (of the type previously mentioned)

效果和事件(前面提到的類型)

Or are they fairly similar?

還是他們相當相似?

Conclusion Edit:

I eventually changed my design to a grid like div system. Tables worked up until I tried to add Firefox compatibility. Firefox and Chrome handle tables differently when it comes to complicated positioning and trying to get it pixel perfect was a nightmare.

我最終將我的設計改為像div系統一樣的網格。表一直工作,直到我嘗試添加Firefox兼容性。 Firefox和Chrome處理表的方式不同,涉及復雜的定位,並試圖讓像素完美是一場噩夢。

1 个解决方案