Ticket #1457 (closed bug: worksforme)
treeview does not display lastCollapsable
| Reported by: | jgriffin316 | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.1.4 |
| Component: | plugin | Version: | 1.1.3 |
| Keywords: | treeview | Cc: | |
| Blocking: | Blocked by: |
Description
If the last item in a sublist is another sublist the lastCollapsable icon is not displayed. This has been tested on Firefox 2.0 and IE 6.0. In the example listed below Item 2.2 should have lastCollapsable as a class, instead it has last. I am using jQuery 1.1.3 and treeview 1.2.
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head>
<title>Treeview Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul").Treeview(); }); </script>
<style type="text/css">
.treeview, .treeview ul {
padding: 0; margin: 0; list-style: none;
}
.treeview li {
margin: 0; padding: 4px 0 3px 20px;
}
.treeview li { background: url(images/tv-item.gif) 0 0 no-repeat; } .treeview .collapsable { background-image: url(images/tv-collapsable.gif); } .treeview .expandable { background-image: url(images/tv-expandable.gif); } .treeview .last { background-image: url(images/tv-item-last.gif); } .treeview .lastCollapsable { background-image: url(images/tv-collapsable-last.gif); } .treeview .lastExpandable { background-image: url(images/tv-expandable-last.gif); }
</style>
</head> <body> <ul>
<li>Item 1
<ul>
<li>Item 1.1</li>
</ul>
</li> <li>Item 2
<ul>
<li>Item 2.1
<ul>
<li>Item 2.1.1</li> <li>Item 2.1.2</li>
</ul>
</li> <li>Item 2.2
<ul>
<li>Item 2.2.1</li> <li>Item 2.2.2</li>
</ul>
</li>
</ul>
</li>
</ul> </body> </html>
Change History
comment:2 Changed 6 years ago by mbirth
Just for the curious ones:
0186: .swapClass( CLASSES.collapsable, CLASSES.expandable )
can be replaced by
0186: .toggleClass( CLASSES.collapsable ).toggleClass( CLASSES.expandable )
and
0195: .replaceclass( CLASSES.collapsable, CLASSES.expandable )
with
0195: .filter( CLASSES.collapsable ).removeClass( CLASSES.collapsable ).addClass( CLASSES.expandable ).end()
Then you can remove lines 138 through 153 (swapClass and replaceClass).
comment:3 Changed 6 years ago by gnattali
this problem occurs when the target "ul" is not specified uniquely.
so in this example case
$(document).ready(function(){ $("ul").Treeview(); });
this part should be like following
$(document).ready(function(){ $("body > ul").Treeview(); });
or
if you don't like to care about these kind of trivial things,
change the source as follows
0216: .swapClass(CLASSES.last, CLASSES.lastExpandable)
to
0216: .replaceclass(CLASSES.last, CLASSES.lastExpandable)
and
221: .swapClass(CLASSES.last, CLASSES.lastCollapsable)
to
221: .replaceclass(CLASSES.last, CLASSES.lastCollapsable)
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
This can be solved by removing these lastCollapsable and lastExpandable appearances (lines# 113, 114, 187, 196, 216 and 221) from the treeview source code so that all last elements have both classes, "last" and "collapsable", assigned. You just have to change the CSS code to:
.treeview .last.collapsable { background-image: url(img/treeview/tv-collapsable-last.gif); } .treeview .last.expandable { background-image: url(img/treeview/tv-expandable-last.gif); }Works fine for me. You can even replace the remaining few replaceClass() and swapClass()-calls by chained toggleClass() or removeClass().addClass() statements and then remove those two functions.