[jQuery] Tree View
[jQuery] Tree View
<html xmlns:ns0="urn:schemas-microsoft-com:office:smarttags">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0pt;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
span.EmailStyle17
{font-family:Arial;
color:navy;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>That’s freakin’ sweet!
Although it doesn’t seem to work in IE 7 beta 2.</span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'> </span></font>
<div>
<p class=MsoNormal><font size=2 color="#999999" face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:#999999'> </span></font>
<p class=MsoNormal><font size=2 color="#999999" face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:#999999'>_____________________________________</span></font>
<p class=MsoNormal><font size=1 color=silver face=Verdana><span
style='font-size:3.0pt;font-family:Verdana;color:silver'><img width=206
height=56 src="cid:image001.gif@01C696B3.FCC83750" align=baseline border=0></span></font>
<p class=MsoNormal><b><font size=2 color=gray face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:gray;font-weight:bold'>Ariel Popper
| Account Executive</span></font></b>
<p class=MsoNormal><font size=2 color="#999999" face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:#999999'>Zadiggle, Inc.</span></font>
<p class=MsoNormal><font size=2 color="#999999" face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:#999999'>3626 Tamiami Trail,
Suite Z</span></font>
<p class=MsoNormal><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'><font color="#999999"><span style='color:#999999'>Port
Charlotte</span></font><font color="#999999"><span style='color:#999999'>, </span></font><font
color="#999999"><span style='color:#999999'>FL</span></font><font
color="#999999"><span style='color:#999999'> </span></font><font color="#999999"><span
style='color:#999999'>33952</span></font></span></font>
<p class=MsoNormal><font size=2 color="#999999" face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:#999999'>Local: (941)
205-2410 x232</span></font>
<p class=MsoNormal><font size=2 color="#999999" face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:#999999'>Toll Free: (877)
851-4618 x232</span></font>
<p class=MsoNormal><font size=2 color="#999999" face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:#999999'>Email: <a
href="mailto:ariel.popper@zadiggle.com">ariel.popper@zadiggle.com</a></span></font>
<p class=MsoNormal><font size=2 color="#999999" face=Verdana><span
style='font-size:10.0pt;font-family:Verdana;color:#999999'>Website: </span></font><font
size=2 color=navy face=Verdana><span style='font-size:10.0pt;font-family:Verdana;
color:navy'><a href="http://www.zadiggle.com/" title="http://www.zadiggle.com/"><font
color=navy title="http://www.zadiggle.com/"><span
title="http://www.zadiggle.com/"><span title="http://www.zadiggle.com/"><span
style='color:navy'><span title="http://www.zadiggle.com/">http:\\www.zadiggle.com</span></span></span></font></span></a></span></font>
<p class=MsoNormal><font size=1 color="#999999" face=Verdana><span
style='font-size:5.0pt;font-family:Verdana;color:#999999'>_________________________________________________________________________</span></font>
</div>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Myles Angell
<b><span style='font-weight:bold'>Sent:</span></b> Thursday, June 22, 2006 4:08
PM
<b><span style='font-weight:bold'>To:</span></b> jQuery Discussion.
<b><span style='font-weight:bold'>Subject:</span></b> [jQuery] Tree View</span></font>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'> </span></font>
<p class=MsoNormal style='margin-bottom:12.0pt'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>Hi All,
I'm not sure if it's been done before, but I felt inspired by Dean Edward's Das
Bloat (<a href="http://dean.edwards.name/weblog/2006/05/das-bloat/"
target="_blank"> http://dean.edwards.name/weblog/2006/05/das-bloat/</a>)
referencing the large size that the Yahoo UI Tree View control was. I took a
look at it and began work on a stripped down, simple tree view using strictly
jQuery. This is no way is a replacement for the current Tree View that YUI
provides, but it is a starting point.
<a href="http://be.twixt.us/jquery/treeView.php" target="_blank">http://be.twixt.us/jquery/treeView.php</a>
What I've discovered is there was a lot to expand on:
Hover State Awareness: <a href="http://toys.localhost/jquery/treeViewHover.php"
target="_blank">http://toys.localhost/jquery/treeViewHover.php</a>
Slide Effects for show/hide: <a
href="http://be.twixt.us/jquery/treeViewEffects.php" target="_blank">http://be.twixt.us/jquery/treeViewEffects.php
</a>
... and there is surely more to do (ajaxLoads on Click, ect) ...
I've gotten it to a point of working with strictly basic functionality. In
building out the 3 bases versions, I found I was needing a couple of extra
plugins:
replaceClass - If a class exists, replace it with new class
swapClass - If either class exists, replace them with each other, respectively
I'd be intersted in hearing any ways to optomize the class controls, as some if
it is a bit overkill, but I was happy to find a solution that worked in jQuery
so nicely.
Enjoy,
Myles
p.s. thank you to Dean for star-light :)</span></font>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/