| Personal | Professional | Christian Stuff | Photographs | Miscellaneous | Blog |
Admin |
|
|
|
|
|||||||||
|
|||||||||||
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
Twisty made easy
Manual written by Harald Joerg
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!"
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 off
You can toggle all Twisties on or off at once by putting a link or button on the page with class
<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>
Settings
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.
Installation InstructionsThis module is pre-installed. TWiki administrators can upgrade the module as needed on the TWiki server. %*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
Related Topics: TwistyPlugin, TWikiPreferences |
I |
Attachment | History | Action | Size | Date | Who | Comment |
|---|---|---|---|---|---|---|---|
 css |
twist.css | r0 | manage | 0.1 K | 2005-09-11 - 08:27 | TWikiContributor | Style Sheet |
 js |
twist.js | r0 | manage | 3.4 K | 2005-09-11 - 08:26 | TWikiContributor | JavaScript library |
