| TwistyPlugin |
|
> > | <--
Contributions to this TWiki plugin are appreciated. Please update the plugin page at
http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at
http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev .
If you are a TWiki contributor please update the plugin in the SVN repository.
-->
Twisty section JavaScript library to open/close content dynamically |
| |
|
< < | A "twisty" is an interface toggle control to show and hide content. |
> > | Introduction |
| |
|
< < | TwistyPlugin gives you several options to control the appearance of a twisty: |
> > | The TwistyPlugin gives you several options to control the appearance of a twisty: |
|
- use link text or buttons
- position an icon left or right
- remember the state at the next visit of the page
|
|
Twisty has a fallback mechanism in case JavaScript is not available: all content is displayed and the control buttons are hidden. |
|
< < | |
| Usage examples |
|
> > | |
| Triad |
|
> > | |
| A Twisty consists of 3 elements:
- Show button
- Hide button
|
| my twisty content
</> <--/twistyPlugin--> |
|
< < | |
| Make it obey only the first time |
|
< < | To let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameter firststart="show" .
If remember="on" is used, subsequential visits to the page will display the Twisty according the cookie setting. |
> > |
To let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameter firststart="show" . If remember="on" is used, subsequential visits to the page will display the Twisty according the cookie setting. |
|
%TWISTY{ |
| my twisty content
</> <--/twistyPlugin--> |
|
< < |
Other use: hide interface parts in case of no JavaScript |
> > | Other use: Hide interface if no JavaScript |
|
You can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. |
| Expand all
Collapse all |
|
< < | |
| Special syntax: format tokens |
|
> > | |
| If you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. |
|
< < | The format tokens are the same as with FormattedSearch: |
> > | The format tokens are the same as with FormattedSearch: |
|
Escape: |
Expands To: |
$n or $n() |
New line. Use $n() if followed by alphanumeric character, e.g. write Foo$n()Bar instead of Foo$nBar |
|
| my twisty content
</> <--/twistyPlugin--> |
|
< < | Or a more complex example using SpreadsheetPlugin; do not write: |
> > | Or a more complex example using SpreadSheetPlugin; do not write: |
|
link="Count: (%CALC{"$GET(infoCount)"}%)" |
|
hidelink |
Link label |
Hide link label |
optional |
showlink |
Link label |
Show link label |
optional |
mode |
"div" or "span" |
Specify if the Twisty Toggle section will use a <div> or a <span> tag. Note that if the contents contains block elements such as div , mode should be div as well to create valid HTML markup. |
optional, defaults to <span> |
|
|
< < |
showimgleft |
Image url |
Specify the url of an image that will be displayed with the show link at the left side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
hideimgleft |
Image url |
Specify the url of an image that will be displayed with the hide link at the left side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
showimgright |
Image url |
Specify the url of an image that will be displayed with the show link at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
hideimgright |
Image url |
Specify the url of an image that will be displayed with the hide link at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
|
> > |
showimgleft |
Image url |
Specify the url of an image that will be displayed with the show link at the left side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
hideimgleft |
Image url |
Specify the url of an image that will be displayed with the hide link at the left side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
showimgright |
Image url |
Specify the url of an image that will be displayed with the show link at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
hideimgright |
Image url |
Specify the url of an image that will be displayed with the hide link at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
|
|
remember |
"on" , "off" |
If "on" , the Twisty state is remembered the next time the page is shown. If "off" , the stored setting will be cleared. Note: when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. |
optional, no default |
start |
"hide" or "show" |
Initial state of the Twisty; this will override any setting stored in a cookie (see remember ). |
optional, default no initial state |
firststart |
"hide" or "show" |
Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see remember ). |
optional, default no initial state |
|
|
id |
Unique identifier |
Used to link TWISTYSHOW, TWISTYHIDE and TWISTYTOGGLE |
required |
link |
Link label |
Show link label |
optional |
mode |
"div" or "span" |
Specify if the Twisty Show link will use a <div> or a <span> tag. Note that if the contents contains block elements such as div , mode should be div as well to create valid HTML markup. |
optional, defaults to <span> |
|
|
< < |
img |
Image url |
Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
imgleft |
Image url |
Specify the url of an image that will be displayed at the left side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
imgright |
Image url |
Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
|
> > |
img |
Image url |
Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
imgleft |
Image url |
Specify the url of an image that will be displayed at the left side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
imgright |
Image url |
Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
|
|
remember |
"on" , "off" |
If "on" , the Twisty state is remembered the next time the page is shown. If "off" , the stored setting will be cleared. Note: when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. |
optional, no default |
start |
"hide" or "show" |
Initial state of the Twisty; this will override any setting stored in a cookie (see remember ). |
optional, default no initial state |
firststart |
"hide" or "show" |
Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see remember ). |
optional, default no initial state |
|
|
id |
Unique identifier |
Used to link TWISTYSHOW, TWISTYHIDE and TWISTYTOGGLE |
required |
link |
Link label |
Hide link label |
optional |
mode |
"div" or "span" |
Specify if the Twisty Hide link will use a <div> or a <span> tag. Note that if the contents contains block elements such as div , mode should be div as well to create valid HTML markup. |
optional, defaults to <span> |
|
|
< < |
img |
Image url |
Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
|
> > |
img |
Image url |
Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
|
|
remember |
"on" , "off" |
If "on" , the Twisty state is remembered the next time the page is shown. If "off" , the stored setting will be cleared. Note: when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. |
optional, no default |
start |
"hide" or "show" |
Initial state of the Twisty; this will override any setting stored in a cookie (see remember ). |
optional, default no initial state |
firststart |
"hide" or "show" |
Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see remember ). |
optional, default no initial state |
|
|
Plugin Settings |
|
< < | Plugin settings are stored as preferences variables. To reference
a plugin setting write %<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION% |
> > | Plugin settings are stored as preferences variables. To reference a plugin setting write %<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION% |
|
- Set TWISTYSHOWLINK = More...
|
| None
- Visit
configure in your TWiki installation, and enable the plugin in the {Plugins} section.
|
|
< < | |
| Plugin Info |
|
< < |
Authors: |
TWiki:Main.RafaelAlvarez, TWiki:Main.ArthurClemens |
Copyright ©: |
2005 Rafael Alvarez; 2006-2008 Arthur Clemens |
License: |
GPL |
|
> > |
Authors: |
TWiki:Main/RafaelAlvarez, TWiki:Main/ArthurClemens, TWiki:Main/PeterThoeny |
Copyright: |
© 2005 Rafael Alvarez; © 2006-2008 Arthur Clemens; © 2010 Peter Thoeny; © 2005-2010 TWiki:TWiki/TWikiContributor |
License: |
GPL (GNU General Public License ) |
|
|
|
|
< < |
Plugin Version: |
10 Oct 2008 (version 1.4.12) |
|
> > |
Plugin Version: |
2010-05-17 (version 1.6) |
|
|
Change History: |
<-- versions below in reverse order --> |
|
|
> > |
2010-05-17: |
1.6 TWikibug:Item6433 - doc improvements -- Peter Thoeny |
2010-03-31: |
1.5 TWikibug:Item6354 - make TwistyPlugin work with TWiki:Plugins/VarCachePlugin; added VarTWISTY variable documentation -- Peter Thoeny |
|
|
08 Oct 2008 |
1.4.11, 1.4.12 It is now possible to have a twisty on the same line without a linebreak. |
03 Aug 2008 |
1.4.10 TWiki 4.2.1 release version |
13 Dec 2007 |
1.4.9 fix to the loading order of javascript files in head |
|
|
|
|
> > |
Related Topics: TwistyContrib, VarTWISTY, TWikiPlugins, DeveloperDocumentationCategory, AdminDocumentationCategory |