用於圖形時間表的HTML表或列表

[英]HTML table or list for graphical time schedule


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表,看起來像:

schedule app

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 个解决方案

#1


1  

Why lists? seems like each "box" should be a div. That would give you the most freedom when it comes to positioning and drag and drop functionality.

為何列出?似乎每個“盒子”應該是一個div。在定位和拖放功能方面,這將為您提供最大的自由度。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/07/25/72108490f53bb791c921d487c512e92.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com