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
Collapsible List
Collapsible List

Version management

Difference between version and

At line 1 added 103 lines
!! Collapsible list
%%tabbedSection
%%tab-Introduction
!Introduction
This %~%collapse %%category [JSPWikiStyle] /% turns ordinary lists into collapsible trees.
Testing the collapsible trees .. Thrusday ...Clicking the list item bullets will expand or collapse nested list items.\\
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.
(cookies are saved for favorites as well as the main page)
Collapsible lists are included in the standard JSPWiki v2.3.x.
They appeared originally in the [BrushedTemplate] --[DF|DirkFrederickx], Jun 2004, refactored Oct 2005
See also [collapsible boxes|Collapsible Box].
%%(border:2px solid #e0e0e0;float:left;)
[https://jspwiki-wiki.apache.org/attach/CollapsibleList/collapse-open.jpg]
/%
%%(border:2px solid #e0e0e0;float:left;)
[https://jspwiki-wiki.apache.org/attach/CollapsibleList/collapse-closed.jpg]
/%
%%(clear:both)
/%
/%
%%tab-Usage
!Usage
Enclose the collapsible list in {{%~%collapse}} tag.
* Unorder sublists (* bullet) are rendered by default expanded
* Ordered sublists (# bullets) are rendered by default collapsed.
{{{
%%collapse
* Europe
** France
*** Paris
*** Nice
** South-Africa
** Belgium
### Brussel (these items are by default collapsed)
### Peulis
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
/%
}}}
Reality check:
%%collapse
* Europe
** France
*** Paris
*** Nice
*** India
** South-Africa
** Belgium
### Brussel (these items are by default collapsed)
### Peulis
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
/%\\
/%
%%tab-Implementation
!Implementation
Collapsible lists only work if you have javascript turned on.
The formatting of the bullets is done through CSS. You can change
the look and feel of open/close bullets as you wannt.
Check out {{templates/default/jspwiki.css}} for the CSS stylesheet definitions, section 460-Collapsible-Lists.
* 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 bullet gets a css selector ''.collapseBullet'', ''collapseOpen'' or ''collapseClose''.
* These bullets are floated to the left, and shifted 1.5em to the left
so that they line up with the previous indentation level.
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 the different {{skin.css}} files.
Notice how the ''overflow:hidden;'' can be used to hide the default bullets and e.g. replace it by some background-images.
[https://jspwiki-wiki.apache.org/attach/CollapsibleList/brushed-collapse.jpg]
/%
/%
----
See: [JSPWikiStyle]
----
[Category.Documentation]
This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthorTop