This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links

Version management

Difference between version and

At line 1 added 149 lines
[{TableOfContents }]
!! Collapsable lists
Turn ordinary lists into collapsable trees by enclosing them inside a %~%collapse ... %~% tag.
When clicking a list item bullet, you can expand or collapse nested list items.
If you want the list to start uncollapsed, use a bullet list. If you want it to start collapsed, use a numbered list.
See also [collapsable boxes|http://www.jspwiki.org/wiki/BrushedTemplateCollapseBox] and %%category [JSPWikiStyles]%%
%%(border:2px dotted grey;)
[http://www.willeke.com/ASSETS/IMAGES/vanilla-collapse.jpg] [http://www.willeke.com/ASSETS/IMAGES/vanilla-collapsed.jpg]
%%
As a bonus, the status of expanded/collapsed nodes are persisted in a browsers cookie, so you don't have to redo your clicking when visiting other pages in between.
Formatting of the bullets is done through CSS. You can change
the look and feel of open/close bullets as you want. The default implementation uses
• (normal) or « (closed bullet) or » (open bullet)
but this can easily be replaced by any picture you want.
!! Usage
Enclose the collapsable list in a %~%collapse tag.
* Unorder sublists (* bullet) are rendered by default not collapsed;
* Ordered sublists (# bullets) are rendered by default collapsed.
{{{
%%collapse
* ||Europe||77||Europe||77
** |France|Europe|77|77
*** |Paris|Europe|77|77
*** |Nice|Europe|77|77
** |South-Africa|Europe|77|77
** Belgium (collapsed by default)
### Brussel
### Peulis
* Australia
**
*** Perth
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
%%
}}}
Reality check:
%%collapse
If you want the list to start uncollapsed, use a bullet list. If you want it to start collapsed, use a numbered list.
%%(border:2px dotted grey;)
[http://www.willeke.com/ASSETS/IMAGES/vanilla-collapse.jpg] [http://www.willeke.com/ASSETS/IMAGES/vanilla-collapsed.jpg]
%%
As a bonus, the status of expanded/collapsed nodes are persisted in a browsers cookie, so you don't have to redo your clicking when visiting other pages in between.
Formatting of the bullets is done through CSS. You can change the look and feel of open/close bullets as you want. The default implementation uses
• (normal) or « (closed bullet) or » (open bullet)
but this can easily be replaced by any picture you want.
!! Usage
Enclose the collapsable list in a %~%collapse tag.
* Unorder sublists (* bullet) are rendered by default not collapsed;
* Ordered sublists (# bullets) are rendered by default collapsed.
%%collapse
* ||Europe||77||Europe||77
** |France|Europe|77|77
*** |Paris|Europe|77|77
*** |Nice|Europe|77|77
** |South-Africa|Europe|77|77
* Europe
** France
*** Paris
*** Nice
** South-Africa
** Belgium (collapsed by default)
### Brussel
### Peulis
* Australia
**
*** Perth
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
%%
%%tabbedSection
%%tab-Implementation
Check out the {{scripts/jspwiki-common.js}} for the corresponding javascript routines.
After loading a page, a set of javascript routines are triggered
for each {{<div class="collapse">}} element.
All nested sub-lists are made expandable, and new clickable list bullets
to expand/collapse are inserted.
By default, a sub-list is visible when using unordered lists or
hidden when using ordered lists.
When a user clicks a list bullet, the related list item is opened or closed and
its ''collapse status'' is stored in a cookie on the users browser.
The next time the user visits this page, the last expand/collapse status is restored.
Since JSPWiki displays several wiki-pages in one screenshot ( the favorites and the main-page )
a separate cookie per page will be stored. This will keep the left menu collpase status across
page navigations.
%%
%%tab-CSS
Check out {{templates/default/jspwiki.css}} for the CSS stylesheet definitions, section 460-Collapsable-Lists.
* Nested sublists are left-indented by 1.5em (1.5 times the size of an ''m''),
* Default list-item bullets are turned off. (''list-style:none;'')
Additionaly, the list-items get a ''position:relative;'' such that the inserted ''collapse''
bullets can be positioned correctly.
* Each inserted ''collapse'' gets the css selector ''.collapseBullet'', ''collapseOpen'' or ''collapseClose''.
* These bullets are absolute positioned which shifts them back 1.5em to the left
so that they line up with the previous indentation level.
(always keep the ''left:-1.5em'' of the ''li'' equal to the ''padding-left:1.5em'' of the ''ul'')
You may be interested to replace the standard, text-based, bullets by fancy images.
This can easily be done through css updates. Some examples are available in [BrushedTemplate].
Notice how the ''overflow:hidden;'' is used to hide the default
bullets and only show the background-images.
Please adapt ''width:16px; text-indent:16px'' according
the sizes of the images you want to use. Enjoy css !
[brushed-collapse.jpg]
{{{
/* +++ 460 Collapsable lists +++ */
.collapseBullet,
.collapseOpen,
.collapseOpen:hover,
.collapseClose,
.collapseClose:hover { width: 16px; text-indent: 16px; overflow: hidden;
background-color: transparent;
background-repeat: no-repeat;
background-position: 0 center; }
.collapseBullet { background-image: url(images/li-leaf.png); }
.collapseOpen,
.collapseOpen:hover { background-image: url(images/li-open.png); }
.collapseClose,
.collapseClose:hover { background-image: url(images/li-close.png); }
}}}
%%
%%
----