Changeset 6422

Show
Ignore:
Timestamp:
08/20/08 13:21:49 (5 months ago)
Author:
PhilHawksworth
Message:

JigglyWiki? - code refactored to exist entirely in the jw namespace. jQuery library now included by default. I've backed away from the dynamic loading of jq from Google CDN for the sake of an easier life at this stage. Using jquery plugins and extensions is greatly simplified.

Location:
Trunk/contributors/PhilHawksworth/experimental/jigglywiki/proto
Files:
10 modified

Legend:

Unmodified
Added
Removed

  • Trunk/contributors/PhilHawksworth/experimental/jigglywiki/proto/jigglywiki.html

    r6418 r6422  
    1  
    2  
    3  
    4  
     1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     2   "http://www.w3.org/TR/html4/loose.dtd"> 
     3 
     4<html lang="en"> 
     5<head> 
    56        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    67        <title>JigglyWiki : a simple, web-visable, jquery supported tiddlywiki clone</title> 
    78        <meta name="generator" content="TextMate http://macromates.com/"> 
    89        <meta name="author" content="Phil Hawksworth"> 
    9         <meta name="viewport" content="initial-scale = 1.0"> 
     10        <meta name = "viewport" content = "initial-scale = 1.0"> 
    1011        <style type="text/css" media="screen"> 
    1112body{font:12px/1.7em arial;margin:0;padding:0;} 
    … …  
    115116 
    116117div.wysiwyg iframe { border: 0; margin: 5px 0 0 0; clear: left; }       </style> 
    117 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 
    118         <div id="header"> 
    119                 <h1 class="tiddlerName">JigglyWiki</h1> 
     118</head> 
     119<body> 
     120        <div id='header'> 
     121                <h1 class='tiddlerName'>JigglyWiki</h1> 
    120122                <h3>a web-visible, jQuery-based tiddlywiki clone</h3> 
    121123        </div> 
    122         <div id="controls"> 
    123                 <a class="control" href="#">close all</a> 
    124                 <a class="control" href="#">save</a> 
    125                 <a class="control" href="#">permalink</a> 
     124        <div id='controls'> 
     125                <a class='control' href='#'>close all</a> 
     126                <a class='control' href='#'>save</a> 
     127                <a class='control' href='#'>permalink</a> 
    126128                <a class="tiddlerLink" href="#tiddler:help">help</a> 
    127                 <a class="control" href="#">jiggle</a> 
     129                <a class='control' href='#'>jiggle</a> 
    128130        </div> 
    129131         
    130132         
    131133        <!-- We use this div to display content via user actions --> 
    132         <div id="story1" class="story"> 
    133                 <div style="" class="tiddler"><a class="tiddlerName" name="tiddler:JigglyWiki"></a> 
    134                         <h1 class="tiddlerName" macro="view property:title">JigglyWiki</h1> 
    135                         <span class="meta" macro="view property:modifier">PhilHawksworth</span> 
    136                         <span class="meta">at</span> 
    137                         <span class="meta" macro="view property:modified">200808010000</span> 
    138                         <a href="#" class="control">edit</a><a href="#" class="control">close</a> 
    139                         <div class="text" macro="view property:text"> 
    140                 <p><a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a> is an experiment by <a class="tiddlerLink" href="#tiddler:PhilHawksworth">PhilHawksworth</a>. It is a clone of <a href="http://TiddlyWiki.com/">TiddlyWiki</a>, the popular single page javascript wiki originally created by Jeremy Ruston and developed by <a href="http://osmosoft.com/">Osmosoft</a> and the TiddlyWiki community.</p> 
    141                 <p><a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a> is built using <a href="http://jquery.com">jQuery</a> and is intended to demonstrate an unobtrusive use of Javascript.  If you disable Javascript in your browser, this page should continue to be visible and navigable, but the more advanced features, will not be available.</p> 
    142                 <p>Since <a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a> exposes the html first, web crawlers and screen readers should be able to more easily understand it and find meaning in its contents.</p> 
     134        <div id='story1' class='story'></div> 
     135         
     136        <!-- We keep the tiddlers stored here. This represents the content of the page. --> 
     137        <!-- Displaying different tiddlers will not impact the order in which this content is stored --> 
     138        <!-- but after manipulating the order of tiddler display in the UI, we can reflect those --> 
     139        <!-- changes back here by calling jiggleStore() --> 
     140        <div id='store'> 
     141<div class='tiddler'> 
     142        <a class='tiddlerName' name='tiddler:JigglyWiki'></a> 
     143        <h1 class='tiddlerName'>JigglyWiki</h1> 
     144        <div class='text'> 
     145                <p><a class='tiddlerLink' href='#tiddler:JigglyWiki'>JigglyWiki</a> is an experiment by <a class='tiddlerLink' href='#tiddler:PhilHawksworth'>PhilHawksworth</a>. It is a clone of <a href="http://TiddlyWiki.com/">TiddlyWiki</a>, the popular single page javascript wiki originally created by Jeremy Ruston and developed by <a href="http://osmosoft.com/">Osmosoft</a> and the TiddlyWiki community.</p> 
     146                <p><a class='tiddlerLink' href='#tiddler:JigglyWiki'>JigglyWiki</a> is built using <a href="http://jquery.com">jQuery</a> and is intended to demonstrate an unobtrusive use of Javascript.  If you disable Javascript in your browser, this page should continue to be visible and navigable, but the more advanced features, will not be available.</p> 
     147                <p>Since <a class='tiddlerLink' href='#tiddler:JigglyWiki'>JigglyWiki</a> exposes the html first, web crawlers and screen readers should be able to more easily understand it and find meaning in its contents.</p> 
    143148                <p></p> 
    144149        </div> 
    145                         <div class="tags meta"> 
    146                                 <p>tags</p> 
    147                                 <div macro="view property:tags"><a class="tiddlerLink" href="#tiddler:about">about</a><a class="tiddlerLink" href="#tiddler:help">help</a><a class="tiddlerLink" href="#tiddler:documentation">documentation</a></div> 
    148                         </div> 
    149                 </div> 
    150          
    151                 <div style="" class="tiddler"><a class="tiddlerName" name="tiddler:help"></a> 
    152                         <h1 class="tiddlerName" macro="view property:title">help</h1> 
    153                         <span class="meta" macro="view property:modifier">PhilHawksworth</span> 
    154                         <span class="meta">at</span> 
    155                         <span class="meta" macro="view property:modified">200808010000</span> 
    156                         <a href="#" class="control">edit</a><a href="#" class="control">close</a> 
    157                         <div class="text" macro="view property:text"> 
     150        <ul class='tags'> 
     151                <h3>tags</h3> 
     152                <li><a class='tiddlerLink' href="#tiddler:about">about</a></li> 
     153                <li><a class='tiddlerLink' href="#tiddler:help">help</a></li> 
     154                <li><a class='tiddlerLink' href="#tiddler:documentation">documentation</a></li> 
     155        </ul> 
     156        <ul class='meta'> 
     157                <h3>metadata</h3> 
     158                <li><i>created</i> <span>200808010000</span></li> 
     159                <li><i>modified</i> <span>200808010000</span></li> 
     160                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     161                <li><i>foo</i> <span>bar</span></li> 
     162        </ul> 
     163</div><div class='tiddler'> 
     164        <a class='tiddlerName' name='tiddler:PhilHawksworth'></a> 
     165        <h1 class='tiddlerName'>PhilHawksworth</h1> 
     166        <div class='text'> 
     167                <p>Phil can't help but explore the possibilities of building a TiddlyWiki clone using jQuery in an attempt to create a version of TiddlyWiki which is based on the contents first, with functionality added via unobtrusive Javascript.</p> 
     168                <p>'tis but an experiment.</p> 
     169        </div> 
     170        <ul class='tags'> 
     171                <h3>tags</h3> 
     172        </ul> 
     173        <ul class='meta'> 
     174                <h3>metadata</h3> 
     175                <li><i>created</i> <span>200808010000</span></li> 
     176                <li><i>modified</i> <span>200808010000</span></li> 
     177                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     178                <li><i>foo</i> <span>bar</span></li> 
     179        </ul> 
     180</div><div class='tiddler'> 
     181        <a class='tiddlerName' name='tiddler:a_sample_viewable_tiddler'></a> 
     182        <h1 class='tiddlerName'>a sample viewable tiddler</h1> 
     183        <div class='text'> 
     184                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
     185                <a class='tiddlerLink' href='#tiddler:another_sample_viewable_tiddler'>another sample viewable tiddler</a> 
     186                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     187        </div> 
     188        <ul class='tags'> 
     189                <h3>tags</h3> 
     190                <li><a class="tiddlerLink" href="#tiddler:sample">sample</a></li> 
     191                <li><a class="tiddlerLink" href="#tiddler:temp">temp</a></li> 
     192        </ul> 
     193        <ul class='meta'> 
     194                <h3>metadata</h3> 
     195                <li><i>created</i> <span>200808010000</span></li> 
     196                <li><i>modified</i> <span>200808010000</span></li> 
     197                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     198        </ul> 
     199</div> 
     200<div class='tiddler'> 
     201        <a class='tiddlerName' name='tiddler:another_sample_viewable_tiddler'></a> 
     202        <h1 class='tiddlerName'>another sample viewable tiddler</h1> 
     203        <div class='text'> 
     204                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>  
     205                <a class="tiddlerLink" href='#tiddler:a_sample_viewable_tiddler'>a sample viewable tiddler</a> 
     206                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     207        </div> 
     208        <ul class='tags'> 
     209                <h3>tags</h3> 
     210                <li><a class="tiddlerLink" href="#tiddler:sample">sample</a></li> 
     211        </ul> 
     212        <ul class='meta'> 
     213                <h3>metadata</h3> 
     214                <li><i>created</i> <span>200808010000</span></li> 
     215                <li><i>modified</i> <span>200808010000</span></li> 
     216                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     217        </ul> 
     218</div><div class='tiddler'> 
     219        <a class='tiddlerName' name='tiddler:help'></a> 
     220        <h1 class='tiddlerName'>help</h1> 
     221        <div class='text'> 
    158222                <p>If javascript is not enabled, you should still be able to use tiddlerlinks to navigate the document.</p> 
    159                 <p>By default, <a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a> will display the tiddlers that you list in the <a class="tiddlerLink" href="#tiddler:DefaultTiddlers">DefaultTiddlers</a> tiddler.</p> 
     223                <p>By default, <a class='tiddlerLink' href='#tiddler:JigglyWiki'>JigglyWiki</a> will display the tiddlers that you list in the <a class="tiddlerLink" href="#tiddler:DefaultTiddlers">DefaultTiddlers</a> tiddler.</p> 
    160224                <p> 
    161225                        We keep the tiddlers stored as readable html in a div called 'store'. This represents the content of the page. Displaying different tiddlers will not impact the order in which this content is stored but after manipulating  
    … …  
    166230                <p><a class="tiddlerLink" href="#tiddler:another_sample_viewable_tiddler">another sample viewable tiddler</a></p> 
    167231        </div> 
    168                         <div class="tags meta"> 
     232        <ul class='tags'> 
     233                <h3>tags</h3> 
     234        </ul> 
     235        <ul class='meta'> 
     236                <h3>metadata</h3> 
     237                <li><i>created</i> <span>200808010000</span></li> 
     238                <li><i>modified</i> <span>200808010000</span></li> 
     239                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     240        </ul> 
     241</div><div class='tiddler'> 
     242        <a class='tiddlerName' name='tiddler:sample'></a> 
     243        <h1 class='tiddlerName'>sample</h1> 
     244        <div class='text'> 
     245                This tiddler is tagging some others. Do you See? <a class="tiddlerLink" href="#tiddler:help">help</a> 
     246        </div> 
     247        <ul class='tags'> 
     248                <h3>tags</h3> 
     249        </ul> 
     250        <ul class='meta'> 
     251                <h3>metadata</h3> 
     252                <li><i>created</i> <span>200808010000</span></li> 
     253                <li><i>modified</i> <span>200808010000</span></li> 
     254                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     255        </ul> 
     256</div><div class='tiddler'> 
     257        <a class='tiddlerName' name='tiddler:shadow'></a> 
     258        <h1 class='tiddlerName'>shadow</h1> 
     259        <div class='text'> 
     260                A shadow tiddler is a tiddler which lurks behind the scenes with a default value. You can overwrite it. If you delete it, it will revert to it's default 
     261        </div> 
     262        <ul class='tags'> 
     263                <h3>tags</h3> 
     264        </ul> 
     265        <ul class='meta'> 
     266                <h3>metadata</h3> 
     267                <li><i>created</i> <span>200808010000</span></li> 
     268                <li><i>modified</i> <span>200808010000</span></li> 
     269                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     270        </ul> 
     271</div><div class='tiddler'> 
     272        <a class='tiddlerName' name='tiddler:DefaultTiddlers'></a> 
     273        <h1 class='tiddlerName'>DefaultTiddlers</h1> 
     274        <div class='text'> 
     275                <p><a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a></p> 
     276                <p><a class="tiddlerLink" href="#tiddler:help">help</a></p> 
     277        </div> 
     278        <ul class='tags'> 
     279                <h3>tags</h3> 
     280                <li><a class='tiddlerLink' href="#tiddler:shadow">shadow</a></li> 
     281        </ul> 
     282        <ul class='meta'> 
     283                <h3>metadata</h3> 
     284                <li><i>created</i> <span>200808010000</span></li> 
     285                <li><i>modified</i> <span>200808010000</span></li> 
     286                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     287        </ul> 
     288</div><div class='tiddler'> 
     289        <a class='tiddlerName' name='tiddler:ViewTemplate'></a> 
     290        <h1 class='tiddlerName'>ViewTemplate</h1> 
     291        <div class='text'> 
     292                <div class='tiddler'> 
     293                        <h1 class='tiddlerName' macro='view property:title'></h1> 
     294                        <span class='meta' macro='view property:modifier'></span> 
     295                        <span class='meta'>at</span> 
     296                        <span class='meta' macro='view property:modified'></span> 
     297                        <a href='#' class='control'>edit</a><a href='#' class='control'>close</a> 
     298                        <div class='text' macro='view property:text'></div> 
     299                        <div class='tags meta'> 
    169300                                <p>tags</p> 
    170                                 <div macro="view property:tags"></div> 
     301                                <div macro='view property:tags'></div> 
    171302                        </div> 
    172303                </div> 
    173304        </div> 
    174          
    175         <!-- We keep the tiddlers stored here. This represents the content of the page. --> 
    176         <!-- Displaying different tiddlers will not impact the order in which this content is stored --> 
    177         <!-- but after manipulating the order of tiddler display in the UI, we can reflect those --> 
    178         <!-- changes back here by calling jiggleStore() --> 
    179         <div id="store"> 
    180 <div style="display: none;" class="tiddler"> 
    181         <a class="tiddlerName" name="tiddler:JigglyWiki"></a> 
    182         <h1 class="tiddlerName">JigglyWiki</h1> 
    183         <div class="text"> 
    184                 <p><a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a> is an experiment by <a class="tiddlerLink" href="#tiddler:PhilHawksworth">PhilHawksworth</a>. It is a clone of <a href="http://TiddlyWiki.com/">TiddlyWiki</a>, the popular single page javascript wiki originally created by Jeremy Ruston and developed by <a href="http://osmosoft.com/">Osmosoft</a> and the TiddlyWiki community.</p> 
    185                 <p><a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a> is built using <a href="http://jquery.com">jQuery</a> and is intended to demonstrate an unobtrusive use of Javascript.  If you disable Javascript in your browser, this page should continue to be visible and navigable, but the more advanced features, will not be available.</p> 
    186                 <p>Since <a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a> exposes the html first, web crawlers and screen readers should be able to more easily understand it and find meaning in its contents.</p> 
    187                 <p></p> 
    188         </div> 
    189         <ul class="tags"> 
    190                 <h3>tags</h3> 
    191                 <li><a class="tiddlerLink" href="#tiddler:about">about</a></li> 
    192                 <li><a class="tiddlerLink" href="#tiddler:help">help</a></li> 
    193                 <li><a class="tiddlerLink" href="#tiddler:documentation">documentation</a></li> 
    194         </ul> 
    195         <ul class="meta"> 
    196                 <h3>metadata</h3> 
    197                 <li><i>created</i> <span>200808010000</span></li> 
    198                 <li><i>modified</i> <span>200808010000</span></li> 
    199                 <li><i>modifier</i> <span>PhilHawksworth</span></li> 
    200                 <li><i>foo</i> <span>bar</span></li> 
    201         </ul> 
    202 </div><div style="display: none;" class="tiddler"> 
    203         <a class="tiddlerName" name="tiddler:PhilHawksworth"></a> 
    204         <h1 class="tiddlerName">PhilHawksworth</h1> 
    205         <div class="text"> 
    206                 <p>Phil can't help but explore the possibilities of building a TiddlyWiki clone using jQuery in an attempt to create a version of TiddlyWiki which is based on the contents first, with functionality added via unobtrusive Javascript.</p> 
    207                 <p>'tis but an experiment.</p> 
    208         </div> 
    209         <ul class="tags"> 
    210                 <h3>tags</h3> 
    211         </ul> 
    212         <ul class="meta"> 
    213                 <h3>metadata</h3> 
    214                 <li><i>created</i> <span>200808010000</span></li> 
    215                 <li><i>modified</i> <span>200808010000</span></li> 
    216                 <li><i>modifier</i> <span>PhilHawksworth</span></li> 
    217                 <li><i>foo</i> <span>bar</span></li> 
    218         </ul> 
    219 </div><div style="display: none;" class="tiddler"> 
    220         <a class="tiddlerName" name="tiddler:a_sample_viewable_tiddler"></a> 
    221         <h1 class="tiddlerName">a sample viewable tiddler</h1> 
    222         <div class="text"> 
    223                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
    224                 <a class="tiddlerLink" href="#tiddler:another_sample_viewable_tiddler">another sample viewable tiddler</a> 
    225                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    226         </div> 
    227         <ul class="tags"> 
    228                 <h3>tags</h3> 
    229                 <li><a class="tiddlerLink" href="#tiddler:sample">sample</a></li> 
    230                 <li><a class="tiddlerLink" href="#tiddler:temp">temp</a></li> 
    231         </ul> 
    232         <ul class="meta"> 
     305        <ul class='tags'> 
     306                <h3>tags</h3> 
     307                <li><a class='tiddlerLink' href="#tiddler:shadow">shadow</a></li> 
     308        </ul> 
     309        <ul class='meta'> 
    233310                <h3>metadata</h3> 
    234311                <li><i>created</i> <span>200808010000</span></li> 
    … …  
    237314        </ul> 
    238315</div> 
    239 <div style="display: none;" class="tiddler"> 
    240         <a class="tiddlerName" name="tiddler:another_sample_viewable_tiddler"></a> 
    241         <h1 class="tiddlerName">another sample viewable tiddler</h1> 
    242         <div class="text"> 
    243                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>  
    244                 <a class="tiddlerLink" href="#tiddler:a_sample_viewable_tiddler">a sample viewable tiddler</a> 
    245                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    246         </div> 
    247         <ul class="tags"> 
    248                 <h3>tags</h3> 
    249                 <li><a class="tiddlerLink" href="#tiddler:sample">sample</a></li> 
    250         </ul> 
    251         <ul class="meta"> 
    252                 <h3>metadata</h3> 
    253                 <li><i>created</i> <span>200808010000</span></li> 
    254                 <li><i>modified</i> <span>200808010000</span></li> 
    255                 <li><i>modifier</i> <span>PhilHawksworth</span></li> 
    256         </ul> 
    257 </div><div style="display: none;" class="tiddler"> 
    258         <a class="tiddlerName" name="tiddler:help"></a> 
    259         <h1 class="tiddlerName">help</h1> 
    260         <div class="text"> 
    261                 <p>If javascript is not enabled, you should still be able to use tiddlerlinks to navigate the document.</p> 
    262                 <p>By default, <a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a> will display the tiddlers that you list in the <a class="tiddlerLink" href="#tiddler:DefaultTiddlers">DefaultTiddlers</a> tiddler.</p> 
    263                 <p> 
    264                         We keep the tiddlers stored as readable html in a div called 'store'. This represents the content of the page. Displaying different tiddlers will not impact the order in which this content is stored but after manipulating  
    265                         the order of tiddler display in the UI, we can reflect those changes back here by calling the Jiggle function to jiggle the contents of the store around to be the same as the displayed tiddlers.  That way, when we save  
    266                         our page, the content that search engines and screen readers will find, will be the same as what we can see. 
    267                 </p> 
    268                 <p><a class="tiddlerLink" href="#tiddler:a_sample_viewable_tiddler">a sample viewable tiddler</a></p> 
    269                 <p><a class="tiddlerLink" href="#tiddler:another_sample_viewable_tiddler">another sample viewable tiddler</a></p> 
    270         </div> 
    271         <ul class="tags"> 
    272                 <h3>tags</h3> 
    273         </ul> 
    274         <ul class="meta"> 
    275                 <h3>metadata</h3> 
    276                 <li><i>created</i> <span>200808010000</span></li> 
    277                 <li><i>modified</i> <span>200808010000</span></li> 
    278                 <li><i>modifier</i> <span>PhilHawksworth</span></li> 
    279         </ul> 
    280 </div><div style="display: none;" class="tiddler"> 
    281         <a class="tiddlerName" name="tiddler:sample"></a> 
    282         <h1 class="tiddlerName">sample</h1> 
    283         <div class="text"> 
    284                 This tiddler is tagging some others. Do you See? <a class="tiddlerLink" href="#tiddler:help">help</a> 
    285         </div> 
    286         <ul class="tags"> 
    287                 <h3>tags</h3> 
    288         </ul> 
    289         <ul class="meta"> 
    290                 <h3>metadata</h3> 
    291                 <li><i>created</i> <span>200808010000</span></li> 
    292                 <li><i>modified</i> <span>200808010000</span></li> 
    293                 <li><i>modifier</i> <span>PhilHawksworth</span></li> 
    294         </ul> 
    295 </div><div style="display: none;" class="tiddler"> 
    296         <a class="tiddlerName" name="tiddler:shadow"></a> 
    297         <h1 class="tiddlerName">shadow</h1> 
    298         <div class="text"> 
    299                 A shadow tiddler is a tiddler which lurks behind the scenes with a default value. You can overwrite it. If you delete it, it will revert to it's default 
    300         </div> 
    301         <ul class="tags"> 
    302                 <h3>tags</h3> 
    303         </ul> 
    304         <ul class="meta"> 
    305                 <h3>metadata</h3> 
    306                 <li><i>created</i> <span>200808010000</span></li> 
    307                 <li><i>modified</i> <span>200808010000</span></li> 
    308                 <li><i>modifier</i> <span>PhilHawksworth</span></li> 
    309         </ul> 
    310 </div><div style="display: none;" class="tiddler"> 
    311         <a class="tiddlerName" name="tiddler:DefaultTiddlers"></a> 
    312         <h1 class="tiddlerName">DefaultTiddlers</h1> 
    313         <div class="text"> 
    314                 <p><a class="tiddlerLink" href="#tiddler:JigglyWiki">JigglyWiki</a></p> 
    315                 <p><a class="tiddlerLink" href="#tiddler:help">help</a></p> 
    316         </div> 
    317         <ul class="tags"> 
    318                 <h3>tags</h3> 
    319                 <li><a class="tiddlerLink" href="#tiddler:shadow">shadow</a></li> 
    320         </ul> 
    321         <ul class="meta"> 
    322                 <h3>metadata</h3> 
    323                 <li><i>created</i> <span>200808010000</span></li> 
    324                 <li><i>modified</i> <span>200808010000</span></li> 
    325                 <li><i>modifier</i> <span>PhilHawksworth</span></li> 
    326         </ul> 
    327 </div><div style="display: none;" class="tiddler"> 
    328         <a class="tiddlerName" name="tiddler:ViewTemplate"></a> 
    329         <h1 class="tiddlerName">ViewTemplate</h1> 
    330         <div class="text"> 
    331                 <div style="display: none;" class="tiddler"> 
    332                         <h1 class="tiddlerName" macro="view property:title"></h1> 
    333                         <span class="meta" macro="view property:modifier"></span> 
    334                         <span class="meta">at</span> 
    335                         <span class="meta" macro="view property:modified"></span> 
    336                         <a href="#" class="control">edit</a><a href="#" class="control">close</a> 
    337                         <div class="text" macro="view property:text"></div> 
    338                         <div class="tags meta"> 
    339                                 <p>tags</p> 
    340                                 <div macro="view property:tags"></div> 
    341                         </div> 
    342                 </div> 
    343         </div> 
    344         <ul class="tags"> 
    345                 <h3>tags</h3> 
    346                 <li><a class="tiddlerLink" href="#tiddler:shadow">shadow</a></li> 
    347         </ul> 
    348         <ul class="meta"> 
    349                 <h3>metadata</h3> 
    350                 <li><i>created</i> <span>200808010000</span></li> 
    351                 <li><i>modified</i> <span>200808010000</span></li> 
    352                 <li><i>modifier</i> <span>PhilHawksworth</span></li> 
    353         </ul> 
    354 </div> 
    355 <div style="display: none;" class="tiddler"> 
    356         <a class="tiddlerName" name="tiddler:EditTemplate"></a> 
    357         <h1 class="tiddlerName">EditTemplate</h1> 
    358         <div class="text"> 
     316<div class='tiddler'> 
     317        <a class='tiddlerName' name='tiddler:EditTemplate'></a> 
     318        <h1 class='tiddlerName'>EditTemplate</h1> 
     319        <div class='text'> 
    359320                 
    360                 <div style="display: none;" class="tiddler edit"> 
    361                         <h1 class="tiddlerName" macro="view property:title"></h1> 
    362                         <span class="meta" macro="view property:modifier"></span> 
    363                         <span class="meta">at</span> 
    364                         <span class="meta" macro="view property:modified"></span> 
    365                         <a href="#" class="control">save tiddler</a><a href="#" class="control">cancel</a> 
    366                         <div class="text"><textarea macro="view property:text"></textarea></div> 
    367                         <span class="meta">tags:</span><span class="meta" macro="view property:tags">tags</span> 
     321                <div class='tiddler edit'> 
     322                        <h1 class='tiddlerName' macro='view property:title'></h1> 
     323                        <span class='meta' macro='view property:modifier'></span> 
     324                        <span class='meta'>at</span> 
     325                        <span class='meta' macro='view property:modified'></span> 
     326                        <a href='#' class='control'>save tiddler</a><a href='#' class='control'>cancel</a> 
     327                        <div class='text'><textarea macro='view property:text'></textarea></div> 
     328                        <span class='meta'>tags:</span><span class='meta' macro='view property:tags'>tags</span> 
    368329                </div> 
    369330                 
    370331        </div> 
    371         <ul class="tags"> 
    372                 <h3>tags</h3> 
    373                 <li><a class="tiddlerLink" href="#tiddler:shadow">shadow</a></li> 
    374         </ul> 
    375         <ul class="meta"> 
     332        <ul class='tags'> 
     333                <h3>tags</h3> 
     334                <li><a class='tiddlerLink' href="#tiddler:shadow">shadow</a></li> 
     335        </ul> 
     336        <ul class='meta'> 
    376337                <h3>metadata</h3> 
    377338                <li><i>created</i> <span>200808010000</span></li> 
    … …  
    380341        </ul> 
    381342</div> 
    382         </div> 
     343<div class='tiddler'> 
     344        <a class='tiddlerName' name='tiddler:DummyTiddler_55'></a> 
     345        <h1 class='tiddlerName'>DummyTiddler_55</h1> 
     346        <div class='text'> 
     347                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     348        </div> 
     349        <ul class='tags'> 
     350                <h3>tags</h3> 
     351                <li><a class='tiddlerLink' href='#tiddler:help'>help</a></li> 
     352        </ul> 
     353        <ul class='meta'> 
     354                <h3>metadata</h3> 
     355                <li><i>created</i> <span>200808010000</span></li> 
     356                <li><i>modified</i> <span>200808010000</span></li> 
     357                <li><i>modifier</i> <span>AnnOther</span></li> 
     358        </ul> 
     359</div><div class='tiddler'> 
     360        <a class='tiddlerName' name='tiddler:DummyTiddler_550'></a> 
     361        <h1 class='tiddlerName'>DummyTiddler_550</h1> 
     362        <div class='text'> 
     363                Piddly little tiddler 
     364        </div> 
     365        <ul class='tags'> 
     366                <h3>tags</h3> 
     367                <li><a class='tiddlerLink' href='#tiddler:about'>about</a></li> 
     368        </ul> 
     369        <ul class='meta'> 
     370                <h3>metadata</h3> 
     371                <li><i>created</i> <span>200808010000</span></li> 
     372                <li><i>modified</i> <span>200808010000</span></li> 
     373                <li><i>modifier</i> <span>PhilHawksworth</span></li> 
     374        </ul> 
     375</div><div class='tiddler'> 
     376        <a class='tiddlerName' name='tiddler:DummyTiddler_551'></a> 
     377        <h1 class='tiddlerName'>DummyTiddler_551</h1> 
     378        <div class='text'> 
     379                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     380        </div> 
     381        <ul class='tags'> 
     382                <h3>tags</h3> 
     383                <li><a class='tiddlerLink' href='#tiddler:help'>help</a></li> 
     384        </ul> 
     385        <ul class='meta'> 
     386                <h3>metadata</h3> 
     387                <li><i>created</i> <span>200808010000</span></li> 
     388                <li><i>modified</i> <span>200808010000</span></li> 
     389                <li><i>modifier</i> <span>AnnOther</span></li> 
     390        </ul> 
     391</div><div class='tiddler'> 
     392        <a class='tiddlerName' name='tiddler:DummyTiddler_552'></a> 
     393        <h1 class='tiddlerName'>DummyTiddler_552</h1> 
     394        <div class='text'> 
     395                Piddly little tiddler 
     396        </div> 
     397        <ul class='tags'> 
     398                <h3>tags</h3> 
     399                <li><a class='tiddlerLink' href='#tiddler:help'>help</a></li> 
     400        </ul> 
     401        <ul class='meta'>