thanks for your interest, first I believe image is worth thousand word, so here you go
Unfortunately I am not in possession of mouse right now, so its drawn using IBM TrackPoint, but the main idea should be clear. I called it horizontal tree because usually tree view is vertical, you would only see one directory on one line and on the left hand side of the directory name would be just vertical lines showing how deeply nested this directory is. I am trying to have "directories" listed next to each other.
Think of it as of algorithm diagram with IFs and ENDIFs and they will always have exactly two outputs or inputs.
Now, I am trying to construct this with basic HTML elements and CSS and I thought at first that it will be piece of cake but it isn't, I spent whole afternoon on it with no luck. It will be generated by JS dynamically so I am trying to avoid tables. There could me any number of IFs, there will be exactly same amount of ENDIFs. There will be any number of other basic cells. The whole structure starts with one cell and ends with one cell
Here is html that should generate similiar picture:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFs and ENDIFs</title>
<style>
ul, li, div{
margin: 0px;
padding: 0px;
border: 0px;
}
ul.left{
border: 1px solid red;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
ul.right{
border: 1px solid green;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
}
li.parent{
border: 1px solid blue;
background-color:#CC9;
margin: 2px;
padding: 2px;
min-width: 350px;
display:block;
overflow-style:marquee-block;
}
</style>
</head>
<body>
<div id="root">
<ul>
<li class="parent">
<div class="label">1</div>
<ul class="left">
<li>
<div class="label">1.L1</div>
</li>
<li>
<div class="label">1.L2</div>
</li>
<li class="parent">
<div class="label">1.L3</div>
<ul class="left">
<li>
<div class="label">1.L3.L1</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.L3.R1</div>
</li>
<li>
<div class="label">1.L3.R2</div>
</li>
</ul>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R1</div>
</li>
<li>
<div class="label">1.R2</div>
</li>
<li class="parent">
<div class="label">1.R3</div>
<ul class="left">
<li>
<div class="label">1.R3.L1</div>
</li>
<li>
<div class="label">1.R3.L2</div>
</li>
<li>
<div class="label">1.R3.L3</div>
</li>
<li>
<div class="label">1.R3.L4</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R3.R1</div>
</li>
<li>
<div class="label">1.R3.R2</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="label">2</div>
</li>
<li>
<div class="label">3</div>
</li>
</ul>
</div>
</body>
</html>
Here is what it looks like so far :( (nothing near the result i hope for, also this is probably 7th iteration of me trying to figure this out) So if anyone could point me in the right direction I would really appreciate it.
thanks for your interest, first I believe image is worth thousand word, so here you go
Unfortunately I am not in possession of mouse right now, so its drawn using IBM TrackPoint, but the main idea should be clear. I called it horizontal tree because usually tree view is vertical, you would only see one directory on one line and on the left hand side of the directory name would be just vertical lines showing how deeply nested this directory is. I am trying to have "directories" listed next to each other.
Think of it as of algorithm diagram with IFs and ENDIFs and they will always have exactly two outputs or inputs.
Now, I am trying to construct this with basic HTML elements and CSS and I thought at first that it will be piece of cake but it isn't, I spent whole afternoon on it with no luck. It will be generated by JS dynamically so I am trying to avoid tables. There could me any number of IFs, there will be exactly same amount of ENDIFs. There will be any number of other basic cells. The whole structure starts with one cell and ends with one cell
Here is html that should generate similiar picture:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFs and ENDIFs</title>
<style>
ul, li, div{
margin: 0px;
padding: 0px;
border: 0px;
}
ul.left{
border: 1px solid red;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
ul.right{
border: 1px solid green;
margin: 2px;
padding: 2px;
list-style-type:none;
width: 150px;
float:left;
}
}
li.parent{
border: 1px solid blue;
background-color:#CC9;
margin: 2px;
padding: 2px;
min-width: 350px;
display:block;
overflow-style:marquee-block;
}
</style>
</head>
<body>
<div id="root">
<ul>
<li class="parent">
<div class="label">1</div>
<ul class="left">
<li>
<div class="label">1.L1</div>
</li>
<li>
<div class="label">1.L2</div>
</li>
<li class="parent">
<div class="label">1.L3</div>
<ul class="left">
<li>
<div class="label">1.L3.L1</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.L3.R1</div>
</li>
<li>
<div class="label">1.L3.R2</div>
</li>
</ul>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R1</div>
</li>
<li>
<div class="label">1.R2</div>
</li>
<li class="parent">
<div class="label">1.R3</div>
<ul class="left">
<li>
<div class="label">1.R3.L1</div>
</li>
<li>
<div class="label">1.R3.L2</div>
</li>
<li>
<div class="label">1.R3.L3</div>
</li>
<li>
<div class="label">1.R3.L4</div>
</li>
</ul>
<ul class="right">
<li>
<div class="label">1.R3.R1</div>
</li>
<li>
<div class="label">1.R3.R2</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="label">2</div>
</li>
<li>
<div class="label">3</div>
</li>
</ul>
</div>
</body>
</html>
Here is what it looks like so far :( (nothing near the result i hope for, also this is probably 7th iteration of me trying to figure this out) So if anyone could point me in the right direction I would really appreciate it.
Share Improve this question asked Apr 6, 2011 at 1:21 nananana 4,4911 gold badge37 silver badges49 bronze badges 5- Try hiring someone. It seems like your after someone doing this for you. What do you need help with exactly? Which part are you struggling with. The Javascript logic? The styling? – gunwin Commented Apr 6, 2011 at 1:26
- MY bad, I am struggling with floating the elements next to each other in case they are children. As in my example at the bottom, I managed to get Children "1.L" and "1.R" of parent "1" next to each other, but I had no luck with the ones deeper. But thanks, for telling me to hire someone. I am trying to do something, for myself, I am not making money, also I want to figure out where am I making mistake. After staring at my laptop for 14 hours (first 12 spent on something that works :)) straight I might be overlooking some basic stuff. Anyways, isn't this site based on helping each other? – nana Commented Apr 6, 2011 at 1:36
- That's not a tree. It's a cyclic graph. – Mark E. Haase Commented Apr 6, 2011 at 3:44
- This will do it for you. just download and use it : http://www.codeproject./KB/scripting/Horizontal_JS_Tree.aspx – Farzin Zaker Commented Apr 6, 2011 at 8:20
- @mehaase - Thanks! I was wondering what was the proper name of this structure. Now I can search for more info about it. – nana Commented Apr 6, 2011 at 17:04
1 Answer
Reset to default 3HTML a linear data structure, but your graph you are trying to recreate isn't linear. While it is possible, it's not necessarily trivial.
You should avoid using float, because nested floats are a bit difficult to control. inline-block is probably a better solution here, however support is flaky in older browsers.
Have a look at an example I made, maybe you can build on that: http://jsfiddle/uf5uM/
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745307641a4621807.html
评论列表（0条）