地铁风格的HTML / JS树视图

时间:2013-02-19 12:41:31

标签: javascript html5 treeview microsoft-metro tablet

我在我的网站上使用经典树视图。对于移动设备,我使用了其他特殊设计版本。我的网站显示了当前时刻的桌面设备的移动版本,但从现在开始,我将在平板电脑设备上显示桌面版。一切都很好,除了经典的树形视图 - 展开/折叠标志很小,难以挑选。

有人可以推荐一款专为平板电脑设计的树形视图吗?我认为地铁风格的东西,但我找不到好的实现或概念。

2 个答案:

答案 0 :(得分:0)

确定。如果没有人知道如何解决它,让我解释一下我为此做了什么。

看起来没有解决方案。我看了我的html / js树视图的视觉外观。在js代码和“+”/“ - ”之后唱歌。并添加简单的行为。

  • 当我点击关闭的树状视图项目时 - 它已打开且详细信息已过滤
  • 当我点击打开的树状视图项目时 - 没有任何反应。所以我不能通过点击它来关闭已打开的项目。
  • 当我点击标题(标题 - 我描述我有哪些项目的地方)时 - 已打开的项目已关闭。

所以我简化了当前树视图(混合打开/关闭和过滤操作)。它在桌面上看起来并不愚蠢,同时在Tab设备上也很有用。

PS:我已使用knockoutjs进行过滤。

答案 1 :(得分:0)

这已经很晚了,但对于发现这个问题的人来说可能仍然有用。

我需要移植使用VB.Net Treeview Control的VB.net应用程序来生成具有相同功能的HTML / JS版本。我还在研究这个项目,但Treeview转换是在一年前使用名为zTree的Jquery插件解决的。我使它与触摸屏以及鼠标事件兼容,它对我很有用。以下是相关网站的链接:

VB.Net Treeview控件: http://www.codeguru.com/columns/vb/working-with-the-treeview-control-in-vb.net.htm

zTree的: http://www.ztree.me/v3/demo.php#_101

我的旧VB Treeview应用: http://www.retirementforecaster.com

我的新HTML / JS Treeview应用程序(仍为早期测试版): http://www.moneyplan.link