| <?xml version='1.0'?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| |
| --> |
| |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <title>tree-thumbnail - example</title> |
| |
| <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> |
| |
| <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> |
| <script src="/jquery/jquery.menu.js" type="text/javascript"></script> |
| |
| |
| </head> |
| |
| <body> |
| |
| <!-- header --> |
| <div id="tx-header"> |
| <!-- system --> |
| <div id="tx-system"> |
| |
| <!-- global search --> |
| <div id="tx-globalsearch"> |
| <form action="/globalsearch/"> |
| <fieldset> |
| <input type="text" name="globalsearch_value" /> <input type="submit" value="" class="tx-icon tx-icon-search"/> |
| </fieldset> |
| </form> |
| </div> |
| |
| <!-- user information --> |
| <div id="tx-login"> |
| <a href="" class="tx-icon tx-icon-user">actions</a> <span>Mans Huster</span> |
| </div> |
| |
| <div id="tx-logo"><a href=""></a></div> |
| |
| <!-- main menu --> |
| <div id="tx-menu"> |
| <ol> |
| <li><a href="">Dashboard</a></li> |
| <li><a href="">Modulgruppe 1</a> |
| <ol> |
| <li><a href="">Submenu 1</a></li> |
| <li><a href="">Submenu 2</a></li> |
| <li><a href="">Submenu 3</a></li> |
| <li><a href="">Submenu 4</a></li> |
| </ol> |
| </li> |
| <li><a href="">Modulgruppe 2</a> |
| <ol> |
| <li><a href="">Submenu 1</a></li> |
| <li><a href="">Submenu 2</a></li> |
| </ol> |
| </li> |
| <li><a href="">Help</a> |
| <ol> |
| <li><a href="">About</a></li> |
| <li><a href="">What</a></li> |
| <li><a href="">Where</a></li> |
| </ol> |
| </li> |
| </ol> |
| </div> |
| </div> |
| <!-- //system --> |
| |
| <!-- module --> |
| <div id="tx-module"> |
| <!-- module title --> |
| <h1>tree-thumbnail example</h1> |
| |
| <!-- page editing actions --> |
| <div id="tx-page-actions"> |
| <ol> |
| <li><a href="" class="tx-button tx-button-generic">Page Editing</a></li> |
| <li><a href="" class="tx-button tx-button-generic-on">Preview</a></li> |
| <li><a href="" class="tx-button tx-button-generic">Page Data</a></li> |
| <li><a href="" class="tx-button tx-button-generic">Something</a></li> |
| </ol> |
| </div> |
| |
| </div> |
| <!-- // module --> |
| |
| <!-- moduletabs --> |
| <div id="tx-module-tabs"> |
| <!-- moduletabs --> |
| <ol> |
| <li class="tx-active"><a href="#">Assets</a></li> |
| <li><a href="#">Image Sets</a></li> |
| <li><a href="#">My Lightboxes</a></li> |
| <li class="tx-active"><a href="#">My Something</a></li> |
| <li><a href="#">My Everything</a></li> |
| </ol> |
| |
| <!-- --> |
| <div id="tx-contextual-buttons"> |
| <ol> |
| <li><a href="#" class="tx-button tx-button-remove">Remove</a></li> |
| <li><a href="#" class="tx-button tx-button-create">Create</a></li> |
| <li><a href="#" class="tx-button tx-button-modify">Modify</a></li> |
| <li><a href="#" class="tx-button tx-button-generic">Generic</a></li> |
| </ol> |
| </div> |
| </div> |
| <!-- // moduletabs --> |
| |
| <!-- moduleoptions --> |
| <div id="tx-module-options"> |
| <ol> |
| <li><a href="#" class="tx-icon tx-toggle-list-on">Table</a></li> |
| <li><a href="#" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a></li> |
| <li class="tx-spacer"><a href="#" class="tx-icon tx-toggle-tree-on">Tree</a></li> |
| |
| <li><a href="#" class="tx-icon tx-toggle-size1-on">Size 1</a></li> |
| <li><a href="#" class="tx-icon tx-toggle-size2-on">Size 2</a></li> |
| <li><a href="#" class="tx-icon tx-toggle-size3-on">Size 3</a></li> |
| </ol> |
| |
| </div> |
| <!-- // moduleoptions --> |
| </div> |
| <!-- // header --> |
| |
| <!-- content --> |
| <div id="tx-content"> |
| <div class="tx-tree tx-halfwidth-left"> |
| |
| <!-- contains the tree --> |
| <div class="tx-tree-view"> |
| <table class="tx-table"> |
| <tr> |
| <th></th> |
| <th>Concepts</th> |
| <th style="width: 7em;">Tagged pages</th> |
| <th style="width: 6em;">In concepts</th> |
| </tr> |
| </table> |
| |
| <!-- example folder structure --> |
| <ol> |
| <!-- tx-open, shows the arrow down on a "open" element --> |
| <li class="tx-open"> |
| <!-- li content is wrapped inside a div to avoid some javascript event problems, eg. drag drop events can be assigned to the div instead --> |
| <div> |
| <!-- span class tx-info should be correspond with the table th widths --> |
| <span class="tx-info"><span style="width: 7em;">9</span><span style="width: 6em;">3</span></span> |
| <!-- drag icon --> |
| <div title=" Themes..." class="tx-icon tx-icon-drag">drag me</div> |
| <!-- checkbox --> |
| <input type="checkbox" /><!-- name --><a href=""></a><a href="">Themes...</a> |
| </div> |
| <!-- subelements of an li --> |
| <ol> |
| <li class="tx-open"><div> |
| <span class="tx-info"><span style="width: 7em;">29</span><span style="width: 6em;">2</span></span> |
| <div title=" Where" class="tx-icon tx-icon-drag">drag me</div> |
| <input type="checkbox" /><a href=""></a><a href=""> Where</a> |
| </div> |
| <ol> |
| <!-- li default shows an right arrow as background --> |
| <li><div> |
| <span class="tx-info"><span style="width: 7em;">51</span><span style="width: 6em;">5</span></span> |
| <div title="Africa" class="tx-icon tx-icon-drag">drag me</div> |
| <input type="checkbox" /><a href=""></a><a href="">Africa</a> |
| </div></li> |
| <li><div> |
| <span class="tx-info"><span style="width: 7em;">8</span><span style="width: 6em;">6</span></span> |
| <div title="Asia" class="tx-icon tx-icon-drag">drag me</div> |
| <input type="checkbox" /><a href=""></a><a href="">Asia</a> |
| </div></li> |
| <!-- tx-nobg, shows no arrow on a element, e.g. element has no subelements --> |
| <li class="tx-nobg"><div> |
| <span class="tx-info"><span style="width: 7em;">70</span><span style="width: 6em;">2</span></span> |
| <div title="Ecoregions" class="tx-icon tx-icon-drag">drag me</div> |
| <input type="checkbox" /><a href=""></a><a href="">Ecoregions</a> |
| </div></li> |
| </ol> |
| </li> |
| </ol> |
| </li> |
| </ol> |
| <!-- // example folder structure--> |
| </div> |
| <!-- // tree view --> |
| |
| </div> |
| <!-- // tree --> |
| |
| <!-- list / thumbnail --> |
| <!-- aligned right / ca. 50% width--> |
| <div class="tx-list tx-halfwidth-right"> |
| |
| <form action="" method="post"> |
| <fieldset> |
| <!-- tx-size1, tx-size2, tx-size3, different thumbnail sizes --> |
| <ol class="tx-size3"> |
| <li> |
| <!-- img.tx-height, portrait thumbnail format --> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| <li> |
| <!-- img.tx-width, landscape thumbnail format --> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| <!-- custom defined icons, tx-right, global for "float: right" --> |
| <span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 19.08.2009"></span> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| <span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 17.07.2009"></span> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 24.06.2009"></span> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 08.07.2009"></span> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 12.08.2009"></span> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| </ol> |
| </fieldset> |
| </form> |
| |
| </div> |
| <!-- // list / thumbnail --> |
| |
| </div> |
| <!-- // content --> |
| |
| </body> |
| </html> |
| |
