Clever Geek Handbook

Metro style HTML / JS tree

I am using classic tree view on my site. For mobile devices, I used another dedicated version. My site has shown a mobile version for connected devices at the moment, but now I'm going to show a desktop version on tablet devices. Everything is in order, except for the classic tree-like look. Expand / Collapse signs become small and difficult to select.

Can anyone suggest a tree view well designed for tablet devices? I am thinking of something metro style, but I cannot find good implementations or concepts.

+3


source to share


2 answers


Ok. If no one knows how to solve this, let me explain what I did for this.

There doesn't seem to be a solution for this. I got a visual of my html / js tree view. I took js for the code and "+" / "-" sings. And add simple behavior.

  • When I click on a closed tree item, it opens and the details are filtered accordingly.
  • When I click on an open tree item, nothing happens. So I cannot close the open item by clicking on it.
  • When I click on the title (title is the place where I described what items I have) - the open element is closed.


So, I am simplifying the current tree view (mixing open / closed and filtering actions). It doesn't look silly on the desktop, and is useful for Tab devices at the same time.

PS: I used knockoutjs for filtering.

0


source


This is late, but might be helpful for those who find this question.

I needed to port my VB.net application, which used the VB.Net Treeview Control to generate an HTML / JS version with the same functionality. I am still working on this project, but the Treeview transformation was solved a year ago using a JQuery plugin named zTree. I made it compatible with touchscreens as well as mouse events and it works well for me. Here are the links to the relevant sites:

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



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

My old VB Treeview app: http://www.retirementforecaster.com

New HTML / JS Treeview App (still early beta): http://www.moneyplan.link

0


source






More articles:


All Articles