Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
jpg
brushed-collapse.jpg 5.8 kB 1 24-Oct-2005 23:00 DirkFrederickx
jpg
vanilla-collapse.jpg 17.4 kB 1 24-Oct-2005 23:00 DirkFrederickx
jpg
vanilla-collapsed.jpg 11.2 kB 1 24-Oct-2005 23:00 DirkFrederickx

This page (revision-49) was last changed on 26-Aug-2009 11:10 by Dirk Frederickx  

This page was created on 15-Jun-2004 00:05 by DirkFrederickx

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Difference between version and

At line 1 changed 186 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|Brushed Template CollapseBox] and %%category [JSPWikiStyles]%% --[DF|DirkFrederickx], Nov 05
%%(border:2px dotted grey;)
[vanilla-collapse.jpg] [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.
Collapsable lists are included in the standard JSPWiki v2.3.x.
They appeared originally in the [BrushedTemplate] --[DF|DirkFrederickx], Jun 2004, refactored Oct 2005
!! 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.
See also [collapsable boxes|Brushed Template CollapseBox] and %%category [JSPWikiStyles]%% --[DF|DirkFrederickx], Nov 05
%%(border:2px dotted grey;)
[vanilla-collapse.jpg] [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.
Collapsable lists are included in the standard JSPWiki v2.3.x.
They appeared originally in the [BrushedTemplate] --[DF|DirkFrederickx], Jun 2004, refactored Oct 2005
!! 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); }
}}}
%%
%%
----
__Problem__: using IE try collapsing the Belgium node and then clicking on the CamelCase link embedded in the tree below.
%%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
*** Brussel
*** Peulis
**[CamelCase]
**Australia
* Australia
*** Sydney
**** Kangeroo
**** Huppeldepup
%%
Back to [BrushedTemplate]
See [CollapsibleList]
Version Date Modified Size Author Changes ... Change note
49 26-Aug-2009 11:10 0.023 kB Dirk Frederickx to previous Remove spam
48 25-Aug-2009 14:41 0.203 kB Atzen Musik to previous | to last
47 20-Nov-2007 22:00 0.023 kB DirkFrederickx to previous | to last
46 15-Nov-2007 00:32 5.952 kB DirkFrederickx to previous | to last
45 15-Nov-2007 00:30 5.964 kB DirkFrederickx to previous | to last
44 12-Nov-2007 16:57 5.949 kB 217.91.61.222 to previous | to last
43 12-Nov-2007 16:56 6.132 kB 217.91.61.222 to previous | to last
42 04-May-2007 17:45 5.947 kB 205.139.184.15 to previous | to last
41 04-May-2007 17:44 6.405 kB 205.139.184.15 to previous | to last
« This page (revision-49) was last changed on 26-Aug-2009 11:10 by Dirk Frederickx