 %SITEMAPWHAT%
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TwistyPluginA "twisty" is an interface toggle control to show and hide content. TwistyPlugin gives you several options to control the appearance of a twisty:
On this page:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}%
(there may be other things between buttons and content)
%TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE%
ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY%:
%TWISTY{}%
my twisty content
%ENDTWISTY%
Will generate:
my twisty content
%TWISTY{}% but the show and hide links do have text! The default values are fetched from plugin settings TWISTYSHOWLINK and TWISTYHIDELINK, see Plugin Settings below.
Block or inlineThe default display mode of Twisty isdiv, that is, the contents is displayed as block element, displayed on the next line.
If you want to show the Twisty contents on the same line - inline - use mode="span":
%TWISTY{
mode="span"
}%
my twisty content
%ENDTWISTY%
Will generate:
my twisty content
Note that if animations are on (using TWISTYPLUGIN_TWISTYANIMATIONSPEED), you won't see animations with inline mode.
Twisty with icons
%TWISTY{
showlink="Show..."
hidelink="Hide"
showimgleft="%ICONURLPATH{toggleopen-small}%"
hideimgleft="%ICONURLPATH{toggleclose-small}%"
}%
my twisty content
%ENDTWISTY%
It will look like this:
my twisty content
%TWISTY{
showlink="Show"
hidelink="Hide"
showimgright="%ICONURLPATH{toggleopen-small}%"
hideimgright="%ICONURLPATH{toggleclose-small}%"
}%
my twisty content
%ENDTWISTY%
my twisty content
Make it rememberTo store the last state in a FOSWIKIPREF cookie, add the parameterremember="on".To test this, reload the page after toggling.  WARNING: If you really want it to be remembered, best to provide an id with
it, otherwise it might not work.
%TWISTY{
showlink="Show..."
hidelink="Hide"
remember="on"
}%
my twisty content
%ENDTWISTY%
my twisty content
remember="off":
%TWISTY{
showlink="Show..."
hidelink="Hide"
remember="off"
}%
my twisty content
%ENDTWISTY%
my twisty content
%TWISTY{
id="currentCustomerList"
showlink="Show..."
hidelink="Hide"
remember="on"
}%
my customer list
%ENDTWISTY%
Note that id sets a site wide cookie. To create a unique id, add topic or web macros:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show".
%TWISTY{
showlink="Show..."
hidelink="Hide"
start="show"
}%
my twisty content
%ENDTWISTY%
my twisty content
start="hide" to start with hidden content.
%TWISTY{
showlink="Show..."
hidelink="Hide"
start="hide"
}%
my twisty content
%ENDTWISTY%
my twisty content
Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="show".
If remember="on" is used, subsequential visits to the page will display the Twisty according the cookie setting.
%TWISTY{
showlink="Show..."
hidelink="Hide"
firststart="show"
}%
my twisty content
%ENDTWISTY%
my twisty content
Other use: hide interface parts in case of no JavaScript
Foswiki 1.1 and higher uses the CSS class
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.
Put the "JavaScript content" in an almost bare bones Twisty. Write foswikiJs to indicate the availability of JavaScript (the class is set to the html tag if JavaScript is available).
showlink="" hidelink="" to not display any default link texts.
%TWISTY{
link=""
noscript="hide"
start="show"
}%
<input type="submit" class="foswikiButton" value="You surely have !JavaScript" />
%ENDTWISTY%
start="show" to show the Twisty content at all.
When JavaScript is off, the button should be invisible.
This code will show the button when JavaScript is off:
%TWISTY{
link=""
start="show"
}%
<input type="submit" class="foswikiButton" value="You might have !JavaScript" />
%ENDTWISTY%
Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{
showlink="Show..."
hidelink="Hide"
class="foswikiHelp"
}%
my twisty content
%ENDTWISTY%
Generates:
my twisty content
Styling the Twisty link or buttonUse parameterlinkclass to style the twisty links:
%TWISTY{
showlink="Show..."
hidelink="Hide"
linkclass="foswikiButton"
}%
my twisty content
%ENDTWISTY%
Generates:
my twisty content
All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll.
<button class="twistyExpandAll foswikiButton">Expand all</button> <button class="twistyCollapseAll foswikiButton">Collapse all</button>Creates these controls: When you want to use links, write: #VarTOGGLE <a href="#TOGGLE" class="twistyExpandAll">Expand all</a> <a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>Expand all Collapse all Special syntax: format tokensIf you use other macros inside TWISTY parameters chances are it will mess up the macro, 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:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get:
my twisty content
link="Count: (%CALC{"$GET(infoCount)"}%)"
but use format tokens:
link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)"
Generation of the twisty IDIf you do not define anid, the plugin autogenerates an ID based on web and
topic names.
ID is then appended with either a counter that counts from 1 for each
twisty if remember option is set, or a random number (useful for AJAX calls).
SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closingENDTWISTY tag.
Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
Notes for developersCSS classes
Plugin SettingsYou can override some default settings in the plugin by setting the following preferences.
Plugin Installation InstructionsYou do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server. Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install". If you have any problems, or if the extension isn't available inconfigure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.
Plugin Info
 |
Copyright © by the contributing authors. All material on this site is the property of the contributing authors. Ideas, requests, problems regarding Foswiki? Send feedback