| <?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>buttons - 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" /> |
| |
| </head> |
| |
| <body> |
| |
| |
| <!-- content --> |
| <div id="tx-content" class="demo"> |
| |
| <div id="demo"> |
| <h3>Description</h3> |
| |
| |
| <h3>Available Buttons</h3> |
| |
| <div> |
| <strong>Buttons</strong> are <a> with the class <strong>tx-button</strong>. Furthermore there are 4 different types of buttons : |
| <br/> |
| <br/> |
| remove actions have the additional class: <strong>tx-button-remove</strong><br/> |
| modifying or editing buttons have the additional class: <strong>tx-button-modify</strong><br/> |
| create actions have the additional class: <strong>tx-button-create</strong><br/> |
| create actions have the additional class: <strong>tx-button-generic</strong><br/> |
| <br/> |
| |
| <ol> |
| <li><a href="#" title="tx-button-remove" class="tx-button tx-button-remove">Remove</a></li> |
| <li><a href="#" title="tx-button-create" class="tx-button tx-button-create">Create</a></li> |
| <li><a href="#" title="tx-button-modify" class="tx-button tx-button-modify">Modify</a></li> |
| <li><a href="#" title="tx-button-generic" class="tx-button tx-button-generic">Generic</a></li> |
| </ol> |
| <br/> |
| <br/> |
| <br/> |
| e.g. |
| <pre><a class="tx-button tx-button-remove" href="#" >remove</a></pre> |
| <br/>Buttons have 2 visual states: inactive and active. Add the class <strong>tx-inactive</strong> to make a button visually inactive. |
| <br/> |
| <br/> |
| |
| <ol> |
| <li><a href="#" title="tx-button-remove" class="tx-button tx-button-remove tx-inactive">Remove</a></li> |
| <li><a href="#" title="tx-button-create" class="tx-button tx-button-create tx-inactive">Create</a></li> |
| <li><a href="#" title="tx-button-modify" class="tx-button tx-button-modify tx-inactive">Modify</a></li> |
| <li><a href="#" title="tx-button-generic" class="tx-button tx-button-generic tx-inactive">Generic</a></li> |
| </ol> |
| <br/> |
| <br/> |
| <br/> |
| e.g. |
| <pre><a class="tx-button tx-button-remove tx-inactive" href="#" >remove</a></pre> |
| </div> |
| |
| <h3>Icons</h3> |
| |
| <strong>Icons</strong> are <a> with the class <strong>tx-icon</strong>. e.g.There are 4 different type of icons. These icons have an active and inactive state (in case of toggles on/off) |
| <br/> |
| <br/> |
| <strong>active</strong> |
| <ol> |
| <li><a href="#" title="tx-icon-delete" class="tx-icon tx-icon-delete">Delete</a></li> |
| <li><a href="#" title="tx-icon-ok" class="tx-icon tx-icon-ok">Ok</a></li> |
| <li><a href="#" title="tx-icon-search" class="tx-icon tx-icon-search">Search</a></li> |
| <li><a href="#" title="tx-icon-edit" class="tx-icon tx-icon-edit">Edit</a></li> |
| <li><a href="#" title="tx-toggle-list-on" class="tx-icon tx-toggle-list-on">Table</a></li> |
| </ol> |
| <br/> |
| <br/> |
| <br/> |
| e.g.<pre><a class="tx-icon tx-icon-delete" href="#">Delete</a></pre> |
| <strong>inactive</strong> |
| <ol> |
| <li><a href="#" title="tx-icon-delete" class="tx-icon tx-icon-delete tx-inactive">Delete</a></li> |
| <li><a href="#" title="tx-icon-ok" class="tx-icon tx-icon-ok tx-inactive">Ok</a></li> |
| <li><a href="#" title="tx-icon-search" class="tx-icon tx-icon-search tx-inactive">Search</a></li> |
| <li><a href="#" title="tx-icon-edit" class="tx-icon tx-icon-edit tx-inactive">Edit</a></li> |
| <li><a href="#" title="tx-icon-toggle-list-off" class="tx-icon tx-toggle-list-off">Table</a></li> |
| </ol> |
| <br/> |
| <br/> |
| <br/> |
| e.g.<pre><a class="tx-icon tx-icon-delete tx-inactive" href="#">Delete</a></pre> |
| <br/> |
| <br/> |
| The following paragraphs describes the available icons: |
| <br/> |
| <br/> |
| <h4>Remove</h4> |
| <ol> |
| <li><a href="#" class="tx-icon tx-icon-delete" title="tx-icon-delete">Delete</a> <pre><a class="tx-icon tx-icon-delete tx-inactive" href="#">delete</a></pre></li> |
| </ol> |
| |
| <h4>Create</h4> |
| <ol> |
| <li><a href="#" class="tx-icon tx-icon-ok" title="tx-icon-ok">Ok</a> <pre><a class="tx-icon tx-icon-ok" href="#">ok</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-plus" title="tx-icon-plus">Plus</a> <pre><a class="tx-icon tx-icon-plus" href="#">plus</a></pre></li> |
| </ol> |
| |
| <h4>Modify</h4> |
| <ol> |
| <li><a href="#" class="tx-icon tx-icon-modify" title="tx-icon-modify">Edit</a> <pre><a class="tx-icon tx-icon-modify" href="#">modify</a></pre></li> |
| </ol> |
| |
| <h4>Generic</h4> |
| <ol> |
| <li><a href="#" class="tx-icon tx-icon-search" title="tx-icon-search">Search</a> <pre><a class="tx-icon tx-icon-search" href="#">search</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-sitechooser" title="tx-icon-sitechooser">Site chooser</a> <pre><a class="tx-icon tx-icon-sitechooser" href="#">sitechooser</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-user" title="tx-icon-user">User</a> <pre><a class="tx-icon tx-icon-user" href="#">user</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-close" title="tx-icon-close">Close</a> <pre><a class="tx-icon tx-icon-close" href="#">close</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-forward" title="tx-icon-forward">Forward</a> <pre><a class="tx-icon tx-icon-forward" href="#">forward</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-back" title="tx-icon-back">Back</a> <pre><a class="tx-icon tx-icon-back" href="#">back</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-zoomin" title="tx-icon-zoomin">Zoom in</a> <pre><a class="tx-icon tx-icon-zoomin" href="#">zoomin</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-zoomout" title="tx-icon-zoomout">Zoom out</a> <pre><a class="tx-icon tx-icon-zoomout" href="#">zoomout</a></pre></li> |
| </ol> |
| |
| <h3>Available Toggle buttons</h3> |
| |
| There are also <strong>toggles</strong> available, which are <a>. These buttons are defined by using the class <strong>tx-icon</strong>. Toggle buttons are switches between to states (on/off state). There are toggle buttons available for representing resources as lists, trees and thumbnails. Futhermore there are toggle buttons for choosing a size of a thumbnail. |
| |
| <br/> |
| <br/> |
| |
| <h4>On (clickable)</h4> |
| <ol> |
| <li><a href="#" title="tx-toggle-list-on" class="tx-icon tx-toggle-list-on">Table</a> <pre><a class="tx-icon tx-icon-list-on" href="#">list-on</a></pre></li> |
| <li><a href="#" title="tx-toggle-thumbnail-on" class="tx-icon tx-toggle-thumbnail-on">Thumbnail</a> <pre><a class="tx-icon tx-icon-thumbnail-on" href="#">thumbnail-on</a></pre></li> |
| <li><a href="#" title="tx-toggle-tree-on" class="tx-icon tx-toggle-tree-on">Tree</a> <pre><a class="tx-icon tx-icon-tree-on" href="#">tree-on</a></pre></li> |
| <li><a href="#" title="tx-toggle-size1-on" class="tx-icon tx-toggle-size1-on">Size 1</a> <pre><a class="tx-icon tx-icon-size1-on" href="#">size1-on</a></pre></li> |
| <li><a href="#" title="tx-toggle-size2-on" class="tx-icon tx-toggle-size2-on">Size 2</a> <pre><a class="tx-icon tx-icon-size2-on" href="#">size2-on</a></pre></li> |
| <li><a href="#" title="tx-toggle-size3-on" class="tx-icon tx-toggle-size3-on">Size 3</a> <pre><a class="tx-icon tx-icon-size3-on" href="#">size3-on</a></pre></li> |
| </ol> |
| <br/> |
| <br/> |
| <br/> |
| <h4>Off (select)</h4> |
| <ol> |
| <li><a href="#" title="tx-toggle-list-off" class="tx-icon tx-toggle-list-off">Table</a> <pre><a class="tx-icon tx-toggle-list-off" href="#">list</a></pre></li> |
| <li><a href="#" title="tx-toggle-thumbnail-off" class="tx-icon tx-toggle-thumbnail-off">Thumbnail</a> <pre><a class="tx-icon tx-toggle-thumbnail-off" href="#">thumbnail</a></pre></li> |
| <li><a href="#" title="tx-toggle-tree-off" class="tx-icon tx-toggle-tree-off">Tree</a> <pre><a class="tx-icon tx-toggle-tree-off" href="#">tree</a></pre></li> |
| <li><a href="#" title="tx-toggle-size1-off" class="tx-icon tx-toggle-size1-off">Size 1</a> <pre><a class="tx-icon tx-toggle-size1-off" href="#">size1</a></pre></li> |
| <li><a href="#" title="tx-toggle-size2-off" class="tx-icon tx-toggle-size2-off">Size 2</a> <pre><a class="tx-icon tx-toggle-size2-off" href="#">size2</a></pre></li> |
| <li><a href="#" title="tx-toggle-size3-off" class="tx-icon tx-toggle-size3-off">Size 3</a> <pre><a class="tx-icon tx-toggle-size3-off" href="#">size3</a></pre></li> |
| </ol> |
| <br/> |
| <br/> |
| <br/> |
| <h3>Various icons / buttons</h3> |
| |
| <ol> |
| <li><a href="#" class="tx-icon tx-icon-alert">Alert</a> <pre><a class="tx-icon tx-icon-alert" href="#">alert</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-drag">Drag Icon</a> <pre><a class="tx-icon tx-icon-drag" href="#">drag</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-down">Down</a> <pre><a class="tx-icon tx-icon-down" href="#">down</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-up">Up</a> <pre><a class="tx-icon tx-icon-up" href="#">up</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-right">Right</a> <pre><a class="tx-icon tx-icon-right" href="#">right</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-left">Left</a> <pre><a class="tx-icon tx-icon-left" href="#">left</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-down-inverse demo-bg">Down</a> <pre><a class="tx-icon tx-icon-down-inverse" href="#">downinverse</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-up-inverse demo-bg">Up</a> <pre><a class="tx-icon tx-icon-up-inverse" href="#">upinverse</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-right-inverse demo-bg">Right</a> <pre><a class="tx-icon tx-icon-right-inverse" href="#">rightinverse</a></pre></li> |
| <li><a href="#" class="tx-icon tx-icon-left-inverse demo-bg">Left</a> <pre><a class="tx-icon tx-icon-left-inverse" href="#">leftinverse</a></pre></li> |
| </ol> |
| |
| </div> |
| |
| |
| </div> |
| <!-- // content --> |
| |
| </body> |
| </html> |
| |
