Bug Tracker

Modify

Ticket #1457 (closed bug: worksforme)

Opened 7 years ago

Last modified 2 years ago

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:1 Changed 7 years ago by mbirth

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.

comment:2 Changed 7 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 7 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)

comment:4 Changed 7 years ago by joern

  • Status changed from new to closed
  • Resolution set to worksforme

I can't replicate the initial issue.

From the suggested code improvements, only the last one actually works. Commited in revision [3471].

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.