TWiki/TwistyContrib.mdwn

   1 # <a name="%TOPIC%"></a><a name=" %TOPIC%"></a> %TOPIC%
   2
   3 <div>
   4   <ul>
   5     <li><a href="#Summary"> Summary</a></li>
   6     <li><a href="#Customization"> Customization</a></li>
   7     <li><a href="#Settings"> Settings</a></li>
   8     <li><a href="#Installation Instructions"> Installation Instructions</a></li>
   9     <li><a href="#Demo  Text"> Demo &amp; Text</a></li>
  10     <li><a href="#Contrib Info"> Contrib Info</a></li>
  11   </ul>
  12 </div>
  13
  14 ## <a name="Summary"></a> Summary
  15
  16 This contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections.
  17
  18 See the [attached file](http://www.dementia.org/twiki//view/toggle-optm-jsoff-sep.html) for a demo and an example of usage.
  19
  20 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:
  21
  22     <style type="text/css" media="all">
  23     @import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
  24     </style>
  25
  26     <script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>
  27
  28 It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.
  29
  30 %RED%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](http://www.dementia.org/twiki//view/twist.js) file for an idea on how to register an eventmanager for the onload event without overwriting the previous one.%ENDCOLOR%
  31
  32 This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.
  33
  34 ## <a name="Customization"></a> Customization
  35
  36 Skins can customize the color of the twisty placeholder by modifiying the `.twistyPlaceholder` style.
  37
  38 ## <a name="Settings"></a> Settings
  39
  40 - Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically
  41 - Set STUB = TWiki::Contrib::TwistyContrib
  42
  43 ## <a name="Installation Instructions"></a> Installation Instructions
  44
  45 - Download the ZIP file from the Plugin web (see below)
  46 - Unzip <code>**%TOPIC%.zip**</code> in your ($TWIKI\_ROOT) directory. Content: <table border="1" cellpadding="0" cellspacing="0">
  47   <tr>
  48     <th bgcolor="#99CCCC"><strong> File: </strong></th>
  49     <th bgcolor="#99CCCC"><strong> Description: </strong></th>
  50   </tr>
  51   <tr>
  52     <td><code><b>data/TWiki/TwistyContrib.txt</b></code></td>
  53     <td>   </td>
  54   </tr>
  55   <tr>
  56     <td><code><b>lib/TWiki/Contrib/TwistyContrib.pm</b></code></td>
  57     <td>   </td>
  58   </tr>
  59   <tr>
  60     <td><code><b>pub/TWiki/TwistyContrib/toggle-optm-jsoff-sep.html</b></code></td>
  61     <td>   </td>
  62   </tr>
  63   <tr>
  64     <td><code><b>pub/TWiki/TwistyContrib/twist.css</b></code></td>
  65     <td>   </td>
  66   </tr>
  67   <tr>
  68     <td><code><b>pub/TWiki/TwistyContrib/twist.js</b></code></td>
  69     <td>   </td>
  70   </tr>
  71 </table>
  72
  73 - Optionally, run <code>**%TOPIC%\_installer**</code> to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
  74 - Alternatively, manually make sure the dependencies listed in the table below are resolved. None
  75
  76 ## <a name="Demo  Text"></a> Demo &amp; Text
  77
  78 If the contrib is properly installed (and Javascript is enabled in your browser!), then you should see some folding sections below. Look at [[http://www.dementia.org/twiki/view/%WEB%.%TOPIC%?raw=on|%WEB%.%TOPIC%?raw=on]] to see how it's done.
  79
  80 <span> </span>
  81
  82 <button> Unfold </button>
  83
  84 <span> </span>
  85
  86 <button> Fold </button>
  87 <div id="demotoggle">
  88   <hr /> Click on the button above to fold this section. <hr />
  89 </div>
  90
  91 <span> [Expand...](#) <span>Hamlet is without question the most famous play in the English language...</span> </span> <span> [Collapse...](#) </span>
  92
  93 <div id="no_1toggle"> 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. <p><span id="no_2show"> <a href="#">More...</a> </span> <span id="no_2hide"> <a href="#">Hide more</a> </span></p>
  94   <p>
  95   </p>
  96 </div>
  97
  98 <div id="no_2toggle"> For more Shakespeare plays, see Wikipedia:WilliamShakespeare </div>
  99
 100 ## <a name="Contrib Info"></a> Contrib Info
 101
 102 <table border="1" cellpadding="0" cellspacing="0">
 103   <tr>
 104     <td> Authors: </td>
 105     <td> Javascript created by TWiki:Main.SamHasler, Contrib packaged by TWiki:Main.RafaelAlvarez </td>
 106   </tr>
 107   <tr>
 108     <td> Copyright ©: </td>
 109     <td> 2005 Sam Hasler and Rafael Alvarez </td>
 110   </tr>
 111   <tr>
 112     <td> License: </td>
 113     <td><a href="http://www.gnu.org/copyleft/gpl.html" target="_top">GPL</a></td>
 114   </tr>
 115   <tr>
 116     <td> Dependencies: </td>
 117     <td> None </td>
 118   </tr>
 119   <tr>
 120     <td align="right"> 12 Sep 2005 </td>
 121     <td> 1.000 First Version </td>
 122   </tr>
 123   <tr>
 124     <td align="right"> Home: </td>
 125     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%</a></td>
 126   </tr>
 127   <tr>
 128     <td align="right"> Feedback: </td>
 129     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev</a></td>
 130   </tr>
 131   <tr>
 132     <td align="right"> Appraisal: </td>
 133     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal</a></td>
 134   </tr>
 135 </table>
 136
 137 **_Related Topics:_** [[TWikiPreferences]]
 138
 139 -- TWiki:Main.SamHasler - 12 Sep 2005