| <?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>panel - example</title> |
| |
| <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> |
| <link href="./style/demo.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.panel.js" type="text/javascript"></script> |
| |
| </head> |
| |
| <body> |
| |
| <!-- panel --> |
| <div class="tx-panel demo" id="tx-panel"> |
| <!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes --> |
| <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3> |
| |
| <div class="tx-panel-window"> |
| <!-- panel icons --> |
| <div class="tx-tab-buttons"> |
| |
| </div> |
| |
| <div class="tx-panel-tabs"> |
| <div> |
| <form action="" method="post"> |
| <fieldset> |
| <label> |
| <input type="submit" value="" class="tx-icon tx-icon-search"/> |
| <input type="text" value="search assets" /> |
| |
| </label> |
| </fieldset> |
| </form> |
| <!-- selected filter elements --> |
| <div class="tx-filter"> |
| |
| <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4> |
| <ol> |
| <!-- filter elements, tx-icon is floating right, must be at the first place --> |
| <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li> |
| <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li> |
| </ol> |
| </div> |
| |
| <!-- results from filter --> |
| <div class="tx-result"> |
| <!-- ul li contruct, only 2 levels supported --> |
| <ol> |
| <!-- main category--> |
| <li><a href="#">Type</a> |
| <ol> |
| <!-- sub category --> |
| <li><a href="#">Images (234)</a></li> |
| <li><a href="#">Videos (20)</a></li> |
| <li><a href="#">Flash (45)</a></li> |
| <li><a href="#">Documents (234)</a></li> |
| <li><a href="#">Images (234)</a></li> |
| </ol> |
| </li> |
| <!-- tx-open, open element icon, arrow down--> |
| <li class="tx-open"><a href="#">Taxonomy</a> |
| <ol> |
| <li><a href="#">Images (234)</a></li> |
| <li><a href="#">Videos (20)</a></li> |
| </ol> |
| </li> |
| <!-- li default shows an right arrow as background --> |
| <li><a href="#">Tags</a> |
| <ol> |
| <li><a href="#">Tiger (48)</a></li> |
| <li><a href="#">Animal (80)</a></li> |
| <li><a href="#">Africa (784)</a></li> |
| </ol> |
| </li> |
| <li><a href="#">Usage</a> |
| <ol> |
| <li><a href="#">Website (20)</a></li> |
| <li><a href="#">News (14)</a></li> |
| </ol> |
| </li> |
| <li><a href="#">Time</a> |
| <ol> |
| <li><a href="#">Yesterday (20)</a></li> |
| <li><a href="#">Last Week (14)</a></li> |
| <li><a href="#">Last Month (23)</a></li> |
| </ol> |
| </li> |
| <li><a href="#">Source</a> |
| <ol> |
| <li><a href="#">Flickr (14)</a></li> |
| <li><a href="#">Youtube (8)</a></li> |
| </ol> |
| </li> |
| </ol> |
| </div> |
| <!-- // tx-result --> |
| </div> |
| </div> |
| <!-- // tx-panel-detail --> |
| </div> |
| <!-- // tx-panel-window --> |
| </div> |
| <!-- // panel --> |
| |
| <!-- content --> |
| <div id="tx-content" class="demo"> |
| |
| <div class="tx-edit tx-show-panel"> |
| |
| |
| <h3>Description</h3> |
| The panel on the left side is a <div> with the class <strong>tx-panel</strong>. |
| <br/> |
| <br/> |
| The panel needs the jquery.panel.js, which defines the accordion effects. |
| <br/> |
| The show and hide functionality of the panel is currently only working on the <strong>div.tx-tree</strong>, <strong>div.tx-list</strong> and <strong>div.tx-edit</strong>. |
| <br/> |
| <br/> |
| <br/> |
| |
| <h3>Example code</h3> |
| |
| <pre> |
| <!-- panel --> |
| <div class="tx-panel"> |
| <!-- open-close button, jquery.panel.js, toggles in the tx-edit, tx-tree, tx-list the tx-show-panel and tx-hide-panel classes --> |
| <a href="#" class="tx-panel-open-close">close/open</a><h3>Filter</h3> |
| |
| <div class="tx-panel-window"> |
| <!-- panel icons --> |
| <div class="tx-tab-buttons"> |
| |
| </div> |
| |
| <div class="tx-panel-tabs"> |
| <div> |
| <form action="" method="post"> |
| <fieldset> |
| <label> |
| <input type="submit" value="" class="tx-icon tx-icon-search"/> |
| <input type="text" value="search assets" /> |
| |
| </label> |
| </fieldset> |
| </form> |
| <!-- selected filter elements --> |
| <div class="tx-filter"> |
| |
| <h4><a href="#" class="tx-icon tx-icon-delete">clear all</a><a href="">Clear All</a>Current filter:</h4> |
| <ol> |
| <!-- filter elements, tx-icon is floating right, must be at the first place --> |
| <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Tiger</li> |
| <li><a href="#" class="tx-icon tx-icon-delete">remove</a>Last Week</li> |
| </ol> |
| </div> |
| |
| <!-- results from filter --> |
| <div class="tx-result"> |
| <!-- ul li contruct, only 2 levels supported --> |
| <ol> |
| <!-- main category--> |
| <li><a href="#">Type</a> |
| <ol> |
| <!-- sub category --> |
| <li><a href="#">Images (234)</a></li> |
| <li><a href="#">Videos (20)</a></li> |
| <li><a href="#">Flash (45)</a></li> |
| <li><a href="#">Documents (234)</a></li> |
| <li><a href="#">Images (234)</a></li> |
| </ol> |
| </li> |
| <!-- tx-open, open element icon, arrow down--> |
| <li class="tx-open"><a href="#">Taxonomy</a> |
| <ol> |
| <li><a href="#">Images (234)</a></li> |
| <li><a href="#">Videos (20)</a></li> |
| </ol> |
| </li> |
| <!-- li default shows an right arrow as background --> |
| <li><a href="#">Tags</a> |
| <ol> |
| <li><a href="#">Tiger (48)</a></li> |
| <li><a href="#">Animal (80)</a></li> |
| <li><a href="#">Africa (784)</a></li> |
| </ol> |
| </li> |
| </ol> |
| </div> |
| <!-- // tx-result --> |
| </div> |
| </div> |
| <!-- // tx-panel-detail --> |
| </div> |
| <!-- // tx-panel-window --> |
| </div> |
| <!-- // panel --> |
| </pre> |
| |
| </div> |
| |
| </div> |
| <!-- // content --> |
| |
| </body> |
| </html> |
| |