| At line 1 changed 144 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. |
|
| 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 |
| ** France |
| *** Paris |
| *** Nice |
| ** South-Africa |
| ** Belgium (collapsed by default) |
| ### Brussel |
| ### Peulis |
| * Australia |
| ** |
| *** Perth |
| * Australia |
| *** Sydney |
| **** Kangeroo |
| **** Huppeldepup |
| %% |
| }}} |
|
| Reality check: |
| %%collapse |
| * 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); } |
| }}} |
| %% |
| %% |
| ---- |
|
| Back to [BrushedTemplate] |
|
|
|
| ---- |
|
| ... |
|
| --Robin, 18-Oct-2006 |
|
|
| ---- |
|
| ... |
|
| --George, 18-Oct-2006 |
| See [CollapsibleList] |
