Difference: TwistyContrib (1 vs. 18)
Revision 182018-07-06 - TWikiContributor
TwistyContrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib IntroductionThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki and used by TwistyPlugin. It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg . Examples require SpreadSheetPlugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique
You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
 You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation InstructionsThis module is pre-installed. TWiki administrators can upgrade the module as needed on the TWiki server.<--/twistyPlugin twikiMakeVisibleInline-->
%*INSTALL_INSTRUCTIONS%
<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>
<--/twistyPlugin--> Contrib Info
| |||||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||||
<--/twistyPlugin twikiMakeVisibleInline--> | |||||||||||||||||||||||||||||
| Added: | |||||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||||
<--/twistyPlugin-->
| |||||||||||||||||||||||||||||
Revision 172015-04-28 - TWikiContributor
TwistyContrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib | |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < | |||||||||||||||||||||||||||
| > > | |||||||||||||||||||||||||||
| Added: | |||||||||||||||||||||||||||
| > > | |||||||||||||||||||||||||||
| Added: | |||||||||||||||||||||||||||
| > > | |||||||||||||||||||||||||||
Twisty section Javascript library to open/close content dynamically
IntroductionThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki and used by TwistyPlugin. It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique
You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation InstructionsThis module is pre-installed. TWiki administrators can upgrade the module as needed on the TWiki server.<--/twistyPlugin twikiMakeVisibleInline-->
%*INSTALL_INSTRUCTIONS%
<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>
<--/twistyPlugin--> Contrib Info
| |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
<--/twistyPlugin twikiMakeVisibleInline--> | |||||||||||||||||||||||||||
| Added: | |||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
<--/twistyPlugin-->
| |||||||||||||||||||||||||||
Revision 162013-02-16 - TWikiContributor
TwistyContrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib IntroductionThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki and used by TwistyPlugin. It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique
You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions | |||||||||||||
| Added: | |||||||||||||
| > > | This module is pre-installed. TWiki administrators can upgrade the module as needed on the TWiki server.
<--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||
%*INSTALL_INSTRUCTIONS%
<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>
| |||||||||||||
| Added: | |||||||||||||
| > > | <--/twistyPlugin--> | ||||||||||||
Contrib Info | |||||||||||||
| Added: | |||||||||||||
| > > | |||||||||||||
| |||||||||||||
| Changed: | |||||||||||||
| < < |
| ||||||||||||
| > > |
| ||||||||||||
| |||||||||||||
| Changed: | |||||||||||||
| < < |
| ||||||||||||
| > > |
| ||||||||||||
| Added: | |||||||||||||
| > > | showlink="Show Change History https://g3.dmuk.ac.uk/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif"
hidelink="Hide Change History https://g3.dmuk.ac.uk/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif"
}%
| ||||||||||||
| |||||||||||||
| Changed: | |||||||||||||
| < < |
| ||||||||||||
| > > |
| ||||||||||||
| Added: | |||||||||||||
| > > | </> <--/twistyPlugin--> | ||||||||||||
| |||||||||||||
Revision 152011-07-10 - TWikiContributor
TwistyContrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib IntroductionThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki and used by TwistyPlugin. It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique
You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>
Contrib Info
| |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
Revision 142011-07-10 - TWikiContributor
TwistyContrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib IntroductionThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki and used by TwistyPlugin. It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique
You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>
Contrib Info
| |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
Revision 132011-07-10 - TWikiContributor
TwistyContrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib IntroductionThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki and used by TwistyPlugin. It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique
You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>
Contrib Info
| |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
| |||||||||||||||||||||||||||
Revision 122011-07-10 - TWikiContributor
TwistyContrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib IntroductionThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki and used by TwistyPlugin. It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique
You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>
Contrib Info | |||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
| |||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
| |||||||||||||||||||||||
| Added: | |||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
| |||||||||||||||||||||||
Revision 112010-05-16 - TWikiContributor
TwistyContrib | |||||||||||||||||
| Added: | |||||||||||||||||
| > > | <-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/TwistyContribTwisty section Javascript library to open/close content dynamically | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. | ||||||||||||||||
| > > | Introduction | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin. | ||||||||||||||||
| > > | This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. | ||||||||||||||||
| Added: | |||||||||||||||||
| > > | TwistyContrib is installed by default in TWiki and used by TwistyPlugin. | ||||||||||||||||
| It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib. | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | This Contrib should work with TWiki 4 and newer.
| ||||||||||||||||
Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty | |||||||||||||||||
| Added: | |||||||||||||||||
| > > | |||||||||||||||||
<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text | |||||||||||||||||
| Added: | |||||||||||||||||
| > > | |||||||||||||||||
<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easy | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | Manual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default). | ||||||||||||||||
| > > | Manual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default). | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!" | ||||||||||||||||
| > > | Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!" | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copypasting sometimes fails in embarrassing ways if non-unique id attributes are present in a topic. Maybe it is easy for a power user, but it surely isn't easy enough. There ought to be a way to make it easier. | ||||||||||||||||
| > > | They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique id attributes are present in a topic. Maybe it is easy for a power user, but it surely isn't easy enough. There ought to be a way to make it easier. | ||||||||||||||||
Well, here you are.
Just set a couple of site preferences, and your users will immediately understand your examples and start writing their own twisties. And what's more: They'll do so in a consistent way, across all your topics in all webs.
You Write | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | In your Main.TWikiPreferences write: | ||||||||||||||||
| > > | |||||||||||||||||
| Added: | |||||||||||||||||
| > > | In your Main.TWikiPreferences write: | ||||||||||||||||
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
| |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | You can include the text in a verbatim block if you want (like I have done here). | ||||||||||||||||
| > > | You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML! | ||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML! | ||||||||||||||||
Your Users Write | |||||||||||||||||
| Added: | |||||||||||||||||
| > > | |||||||||||||||||
| In any topic, your users can now write things like this: | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | |||||||||||||||||
| > > | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | That is, place the opening brace at the end of the construct that controls the block. ... | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | |||||||||||||||||
| > > | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | of control structures are the most critical components of a program. ... | ||||||||||||||||
You See | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | |||||||||||||||||
| > > | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | |||||||||||||||||
| > > | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | of control structures are the most critical components of a program. ... | ||||||||||||||||
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">Collapse all</button>Creates these controls: When you want to use links, write: #VarTOGGLE | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | |||||||||||||||||
| Expand all Collapse all | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | |||||||||||||||||
| Expand all Collapse all | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | |||||||||||||||||
Settings | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < |
| ||||||||||||||||
| > > |
| ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems. | ||||||||||||||||
| > > | You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed Javascript sources, in the event of problems. | ||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | |||||||||||||||||
Installation Instructions | |||||||||||||||||
| Added: | |||||||||||||||||
| > > | |||||||||||||||||
| %*INSTALL_INSTRUCTIONS% | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < |
| ||||||||||||||||
| > > |
| ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | |||||||||||||||||
| > > | |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | |||||||||||||||||
Contrib Info | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < |
| ||||||||||||||||
| > > |
| ||||||||||||||||
| |||||||||||||||||
| Changed: | |||||||||||||||||
| < < |
| ||||||||||||||||
| > > |
| ||||||||||||||||
| |||||||||||||||||
| Added: | |||||||||||||||||
| > > |
| ||||||||||||||||
| |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | Related Topics: TWikiPreferences | ||||||||||||||||
| > > | Related Topics: TwistyPlugin, TWikiPreferences | ||||||||||||||||
| |||||||||||||||||
Revision 102006-02-22 - TWikiContributor
TwistyContribThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.
It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.
This Contrib should work with TWiki 4 and newer.
On this page:
Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here).
Additionally I've added plenty of newlines and spaces to make it readable.
This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing.
That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behaviour of a program, so the keywords
of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
Contrib Info
| |||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
| |||||||||||||||||||||||
Revision 92006-02-22 - TWikiContributor
TwistyContribThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.
It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.
This Contrib should work with TWiki 4 and newer.
On this page:
Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here).
Additionally I've added plenty of newlines and spaces to make it readable.
This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing.
That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behaviour of a program, so the keywords
of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
Contrib Info
| |||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
| |||||||||||||||||||||||
Revision 82006-02-22 - TWikiContributor
TwistyContribThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.
It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.
This Contrib should work with TWiki 4 and newer.
On this page:
Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here).
Additionally I've added plenty of newlines and spaces to make it readable.
This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing.
That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behaviour of a program, so the keywords
of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
Contrib Info
| |||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
| |||||||||||||||||||||||
Revision 72006-02-22 - TWikiContributor
TwistyContribThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.
It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.
This Contrib should work with TWiki 4 and newer.
On this page:
Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here).
Additionally I've added plenty of newlines and spaces to make it readable.
This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing.
That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behaviour of a program, so the keywords
of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
Contrib Info
| |||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
| |||||||||||||||||||||||
Revision 62006-02-22 - TWikiContributor
TwistyContribThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.
It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.
This Contrib should work with TWiki 4 and newer.
On this page:
Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here).
Additionally I've added plenty of newlines and spaces to make it readable.
This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing.
That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behaviour of a program, so the keywords
of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
Installation Instructions%*INSTALL_INSTRUCTIONS%
Contrib Info
| |||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
| |||||||||||||||||||||||
Revision 52006-02-22 - TWikiContributor
TwistyContribThis contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.
It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib. | |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < | This Contrib should work in all versions of TWiki. It has been tested against TWiki 3 and TWiki 4. | ||||||||||||||||||||||||||
| > > | This Contrib should work with TWiki 4 and newer. | ||||||||||||||||||||||||||
|
On this page:
Usage examplesIf the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content Twisty with placeholder text<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.
Twisty made easyManual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here).
Additionally I've added plenty of newlines and spaces to make it readable.
This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing.
That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behaviour of a program, so the keywords
of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Settings
| |||||||||||||||||||||||||||
| Deleted: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < | Installation Instructions | ||||||||||||||||||||||||||
| > > | You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems. | ||||||||||||||||||||||||||
| Deleted: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| > > | Installation Instructions%*INSTALL_INSTRUCTIONS%
| ||||||||||||||||||||||||||
| Added: | |||||||||||||||||||||||||||
| > > |
<style type="text/css" media="all">
@import url("%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.js"></script>
| ||||||||||||||||||||||||||
Contrib Info | |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
| Added: | |||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
| Related Topics: TWikiPreferences | |||||||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||||||
Revision 42006-02-22 - TWikiContributor
TwistyContrib | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | |||||||||||||||||
| > > | This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections. | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | Summary | ||||||||||||||||
| > > | TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin. | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | This contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections. | ||||||||||||||||
| > > | It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib. | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | See the attached file for a demo and an example of usage. | ||||||||||||||||
| > > | This Contrib should work in all versions of TWiki. It has been tested against TWiki 3 and TWiki 4. | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | To use the libraries, you must place the following scriplet either in the head section of the page (by modifying the TWikiSkins) or putting it somewhere in the topic: | ||||||||||||||||
| > > | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | |||||||||||||||||
| > > | Usage examples | ||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | |||||||||||||||||
| > > | If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below. | ||||||||||||||||
| Added: | |||||||||||||||||
| > > |
Basic Twisty<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span> | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib. | ||||||||||||||||
| > > | Generates: | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | Caution: If the previous scriplet is put in the HEAD section of the page or the TWiki:Plugins.TwistyPlugin is used, it won't work if the <body onload=""> manager is set by the skin. Check the twist.js file for an idea on how to register an eventmanager for the onload event without overwriting the previous one. | ||||||||||||||||
| > > | |||||||||||||||||
| Added: | |||||||||||||||||
| > > | my twisty content | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease. | ||||||||||||||||
| > > | Twisty with placeholder text | ||||||||||||||||
| Added: | |||||||||||||||||
| > > | <span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span> | ||||||||||||||||
| Changed: | |||||||||||||||||
| < < | Customization | ||||||||||||||||
| > > | Generates: | ||||||||||||||||
| Added: | |||||||||||||||||
| > > | Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. | ||||||||||||||||
Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style. | |||||||||||||||||
| Added: | |||||||||||||||||
| > > | Twisty made easyManual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin You WriteIn your Main.TWikiPreferences write:
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here).
Additionally I've added plenty of newlines and spaces to make it readable.
This works, and you don't have to care for invalid HTML!
Your Users WriteIn any topic, your users can now write things like this:
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing.
That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behaviour of a program, so the keywords
of control structures are the most critical components of a program. ...
%FLOP%
You See
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 twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 | ||||||||||||||||
Settings
Installation Instructions
| |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < |
| ||||||||||||||||
| |||||||||||||||||
| Added: | |||||||||||||||||
| > > |
| ||||||||||||||||
| |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | None | ||||||||||||||||
| > > |
| ||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | Demo & Text | ||||||||||||||||
| Deleted: | |||||||||||||||||
| < < | If the contrib is properly installed (and Javascript is enabled in your browser!), then you should see some folding sections below. Look at /twiki/bin/view/TWiki.TwistyContrib?raw=on to see how it's done.
Click on the button above to fold this section.
Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.
More...
Hide more
For more Shakespeare plays, see Wikipedia:WilliamShakespeare
| ||||||||||||||||
Contrib Info | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < |
| ||||||||||||||||
| > > |
| ||||||||||||||||
| |||||||||||||||||
| Changed: | |||||||||||||||||
| < < |
| ||||||||||||||||
| > > |
| ||||||||||||||||
| Added: | |||||||||||||||||
| > > |
| ||||||||||||||||
| Related Topics: TWikiPreferences | |||||||||||||||||
| Changed: | |||||||||||||||||
| < < | -- TWiki:Main.SamHasler - 12 Sep 2005 | ||||||||||||||||
| > > |
| ||||||||||||||||
| Deleted: | |||||||||||||||||
| < < |
| ||||||||||||||||
| |||||||||||||||||
| Deleted: | |||||||||||||||||
| < < |
| ||||||||||||||||
Revision 32006-02-22 - TWikiContributor
TwistyContribOn this page:
SummaryThis contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections. See the attached file for a demo and an example of usage. To use the libraries, you must place the following scriplet either in the head section of the page (by modifying the TWikiSkins) or putting it somewhere in the topic:
<style type="text/css" media="all">
@import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>
It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.
Caution: If the previous scriplet is put in the HEAD section of the page or the TWiki:Plugins.TwistyPlugin is used, it won't work if the <body onload=""> manager is set by the skin. Check the twist.js file for an idea on how to register an eventmanager for the onload event without overwriting the previous one.
This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.
CustomizationSkins can customize the color of the twisty placeholder by modifiying the.twistyPlaceholder style.
Settings
Installation Instructions
| |||||||||||||||||||||||
| Changed: | |||||||||||||||||||||||
| < < |
| ||||||||||||||||||||||
| > > |
| ||||||||||||||||||||||
Demo & TextIf the contrib is properly installed (and Javascript is enabled in your browser!), then you should see some folding sections below. Look at /twiki/bin/view/TWiki.TwistyContrib?raw=on to see how it's done.Click on the button above to fold this section.
Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.
More...
Hide more
For more Shakespeare plays, see Wikipedia:WilliamShakespeare
Contrib Info
- 12 Sep 2005
| |||||||||||||||||||||||
Revision 22006-02-22 - TWikiContributor
| Changed: | |||||||||||
| < < | TwistyContrib | ||||||||||
| > > | TwistyContrib | ||||||||||
| Changed: | |||||||||||
| < < | Summary | ||||||||||
| > > | Summary | ||||||||||
| This contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections. | |||||||||||
| Added: | |||||||||||
| > > | See the attached file for a demo and an example of usage. | ||||||||||
To use the libraries, you must place the following scriplet either in the head section of the page (by modifying the TWikiSkins) or putting it somewhere in the topic:
<style type="text/css" media="all">
@import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>
It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.
Caution: If the previous scriplet is put in the HEAD section of the page or the TWiki:Plugins.TwistyPlugin is used, it won't work if the <body onload=""> manager is set by the skin. Check the twist.js file for an idea on how to register an eventmanager for the onload event without overwriting the previous one.
This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.
CustomizationSkins can customize the color of the twisty placeholder by modifiying the.twistyPlaceholder style.
Settings | |||||||||||
| Changed: | |||||||||||
| < < |
| ||||||||||
| > > |
| ||||||||||
| Changed: | |||||||||||
| < < |
| ||||||||||
| > > | Installation Instructions | ||||||||||
| Deleted: | |||||||||||
| < < |
| ||||||||||
| Deleted: | |||||||||||
| < < | Installation Instructions | ||||||||||
| |||||||||||
| Changed: | |||||||||||
| < < |
| ||||||||||
| > > |
| ||||||||||
| |||||||||||
| Changed: | |||||||||||
| < < | Demo & Text | ||||||||||
| > > | Demo & Text | ||||||||||
|
If the contrib is properly installed (and Javascript is enabled in your browser!), then you should see some folding sections below. Look at /twiki/bin/view/TWiki.TwistyContrib?raw=on to see how it's done.
Click on the button above to fold this section.
Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.
More...
Hide more
For more Shakespeare plays, see Wikipedia:WilliamShakespeare
| |||||||||||
| Changed: | |||||||||||
| < < | Contrib Info | ||||||||||
| > > | Contrib Info | ||||||||||
| |||||||||||
| Changed: | |||||||||||
| < < |
| ||||||||||
| > > |
| ||||||||||
| |||||||||||
| Changed: | |||||||||||
| < < |
| ||||||||||
| > > | -- TWiki:Main.SamHasler - 12 Sep 2005
| ||||||||||
Revision 12005-09-12 - RafaelAlvarez
TwistyContribOn this page:
SummaryThis contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections. To use the libraries, you must place the following scriplet either in the head section of the page (by modifying the TWikiSkins) or putting it somewhere in the topic:
<style type="text/css" media="all">
@import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>
It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.
Caution: If the previous scriplet is put in the HEAD section of the page or the TWiki:Plugins.TwistyPlugin is used, it won't work if the <body onload=""> manager is set by the skin. Check the twist.js file for an idea on how to register an eventmanager for the onload event without overwriting the previous one.
This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.
CustomizationSkins can customize the color of the twisty placeholder by modifiying the.twistyPlaceholder style.
Settings
Installation Instructions
Demo & TextIf the contrib is properly installed (and Javascript is enabled in your browser!), then you should see some folding sections below. Look at /twiki/bin/view/TWiki.TwistyContrib?raw=on to see how it's done.Click on the button above to fold this section.
Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.
More...
Hide more
For more Shakespeare plays, see Wikipedia:WilliamShakespeare
Contrib Info
|
View topic | History: r18 < r17 < r16 < r15 | More topic actions...
Copyright &© 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors. Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TwistyContrib.