dacelo/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3   <head>
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5         <title>Dacelo UI Components</title>
   6         <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
   7         <script src="javascripts/prototype.js" type="text/javascript"></script>
   8         <script src="javascripts/yui/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
   9         <script src="javascripts/yui/build/element/element-beta.js" type="text/javascript"></script>
  10         <script src="javascripts/yui/build/datasource/datasource-beta.js" type="text/javascript"></script>
  11         <script src="javascripts/yui/build/datatable/datatable-beta.js" type="text/javascript"></script>
  12         <script src="javascripts/yui/build/tabview/tabview.js" type="text/javascript"></script>
  13         <script src="javascripts/tooltip-v0.2.js" type="text/javascript"></script>
  14         <script src="javascripts/application.js" type="text/javascript"></script>
  15                 <style type="text/css">
  16                   /*Location*/
  17       div.location.small {
  18         background: #DDD;
  19         padding: 3px;
  20       }
  21       div.location.small ul.data, div.location.small ol.data {
  22         list-style: none;
  23         padding: 0;
  24         margin: 1px;
  25       }
  26       div.location.small .data li {
  27         text-align: right;
  28       }
  29       div.location.small .data li span.label {
  30         font-weight: bold;
  31         color: #888;
  32         float: left;
  33       }
  34       div.location.small .data li span.primary {
  35         font-weight: bold;
  36         font-size: 1.5em;
  37         line-height: 1em;
  38       }
  39       div.location.small .data li span.value {
  40         font-weight: bold;
  41       }
  42       div.location.small .data li span.unimportant {
  43         font-weight: bold;
  44         color: #888;
  45       }
  46
  47       /*Client*/
  48       div.client.small {
  49         background: #DDD;
  50         padding: 5px;
  51       }
  52       div.client.small ul.data, div.client.small ol.data {
  53         padding: 0;
  54         margin: 1px;
  55         list-style: none;
  56       }
  57       div.client.small .data li {
  58         margin: 0.25em;
  59         text-align: right;
  60       }
  61       div.client.small .data li span.label {
  62         font-weight: bold;
  63         color: #888;
  64         float: left;
  65       }
  66       div.client.small .data li span.primary {
  67         font-weight: bold;
  68         font-size: 1.5em;
  69         line-height: 0.5em;
  70       }
  71       div.client.small .data li span.value {
  72         font-weight: bold;
  73       }
  74       div.client.small .data li span.label.minimize {
  75         font-size: 0.8em;
  76       }
  77       div.client.small .data li span.value.minimize {
  78         font-size: 0.8em;
  79         line-height: 0.5em;
  80         font-weight: normal;
  81       }
  82                 </style>
  83   </head>
  84   <body>
  85     <div id="page">
  86
  87       <div id="header">
  88         <h1>Dacelo UI Components</h1>
  89       </div><!-- /header -->
  90
  91       <div id="body">
  92
  93         <div class="dacelo-skin"><div id="tabs" class="dacelo-tabset yui-navset">
  94           <ul class="yui-nav">
  95             <li><a href="#t1">Introduction</a></li>
  96             <li class="selected"><a href="#t2">Usage</a></li>
  97             <li><a href="#t3">License</a></li>
  98           </ul><!-- /.yui-nav -->
  99           <div class="yui-content">
 100             <div id="t1" class="tab">
 101               <h2>Introduction</h2>
 102               <p>
 103                 The Dacelo UI Components distribution includes a coordination of YUI and
 104                 Prototype (with Scriptaculous) to create very clean, simple implementations
 105                 for various tasks, like stylistic yet light-weight overlaying tooltips or
 106                 tables with sortable data, etc.
 107               </p>
 108               <p>
 109                 Essentially, there is nothing revolutionary in this distribution; instead,
 110                 this distribution is intended to tie these libraries into a cohesive and
 111                 contained solution to be dropped into any application with similar
 112                 requirements to achieve identical results.
 113               </p>
 114             </div><!-- /t1 -->
 115             <div id="t2" class="tab">
 116               <h2>Usage</h2>
 117               <p>
 118                 Well... that's what we're working out. Hang with it.
 119               </p>
 120               <h3>Assets</h3>
 121               <div class="dacelo-skin"><div id="assets-view">
 122                 <table id="assets">
 123                   <thead>
 124                     <tr>
 125                       <th>HUB ID</th>
 126                       <th>Service Tag</th>
 127                       <th>Asset Type</th>
 128                       <th>State</th>
 129                       <th>Location</th>
 130                       <th></th>
 131                     </tr>
 132                   </thead>
 133                   <tbody>
 134                     <tr>
 135                       <td><a href="#">10000</a></td>
 136                       <td><a href="#">SV4R11B</a></td>
 137                       <td><a href="#">Dell D820</a></td>
 138                       <td><a href="#">Holding</a></td>
 139                       <td><span class="location l163-rack-1a"><a href="#">L163 Rack 1A</a></span></td>
 140                       <td><a href="#">Distribute</a></td>
 141                     </tr>
 142                     <tr>
 143                       <td><a href="#">10001</a></td>
 144                       <td><a href="#">SV4R11C</a></td>
 145                       <td><a href="#">Dell D820</a></td>
 146                       <td><a href="#">Holding</a></td>
 147                       <td><span class="location l163-rack-1a"><a href="#">L163 Rack 1A</a></span></td>
 148                       <td><a href="#">Distribute</a></td>
 149                     </tr>
 150                     <tr>
 151                       <td><a href="#">10003</a></td>
 152                       <td><a href="#">SV4R11D</a></td>
 153                       <td><a href="#">Dell D820</a></td>
 154                       <td><a href="#">Issuable</a></td>
 155                       <td><span class="location l163-rack-4c"><a href="#">L163 Rack 4C</a></span></td>
 156                       <td><a href="#">Distribute</a></td>
 157                     </tr>
 158                     <tr>
 159                       <td><a href="#">10004</a></td>
 160                       <td><a href="#">SV4R11G</a></td>
 161                       <td><a href="#">Dell D820</a></td>
 162                       <td><a href="#">Holding</a></td>
 163                       <td><span class="location l163-rack-1a"><a href="#">L163 Rack 1A</a></span></td>
 164                       <td><a href="#">Distribute</a></td>
 165                     </tr>
 166                     <tr>
 167                       <td><a href="#">10341</a></td>
 168                       <td><a href="#">SX4R17H</a></td>
 169                       <td><span class="type dell-d820"><a href="#dell-d820">Dell D820</a></span></td>
 170                       <td><a href="#">Issuable</a></td>
 171                       <td><span class="location l163-rack-4a"><a href="#">L163 Rack 4A</a></span></td>
 172                       <td><a href="#">Distribute</a></td>
 173                     </tr>
 174                     <tr>
 175                       <td><a href="#">10348</a></td>
 176                       <td><a href="#">SX4R18K</a></td>
 177                       <td><a href="#">Dell D820</a></td>
 178                       <td><a href="#">Issuable</a></td>
 179                       <td><span class="location service-counter"><a href="#">Service Counter</a></span></td>
 180                       <td><a href="#">Distribute</a></td>
 181                     </tr>
 182                     <tr>
 183                       <td><a href="#">10348</a></td>
 184                       <td><a href="#">SX4R19V</a></td>
 185                       <td><a href="#">Dell D820</a></td>
 186                       <td><a href="#">Issued</a></td>
 187                       <td><span class="client mtodd"><a href="#">Matt Todd</a></span></td>
 188                       <td><a href="#">Swap</a>, <a href="#">Return</a></td>
 189                     </tr>
 190                   </tbody>
 191                 </table><!-- /assets -->
 192               </div></div><!-- /assets-view -->
 193             </div><!-- /t1 -->
 194             <div id="t3" class="tab">
 195               <div id="license">
 196                 <h2>License and Copyright</h2>
 197                 <p>
 198                   Copyright &copy; 2007 Matt Todd &lt;http://purl.org/net/maraby&gt;.
 199                 </p>
 200                 <p>
 201                   Permission is hereby granted, free of charge, to any person obtaining a
 202                   copy of this software and associated documentation files (the "Software"),
 203                   to deal in the Software without restriction, including without limitation
 204                   the rights to use, copy, modify, merge, publish, distribute, sublicense,
 205                   and/or sell copies of the Software, and to permit persons to whom the
 206                   Software is furnished to do so, subject to the following conditions:
 207                 </p>
 208                 <p>
 209                   The above copyright notice and this permission notice shall be included in
 210                   all copies or substantial portions of the Software.
 211                 </p>
 212                 <p>
 213                   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 214                   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 215                   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 216                   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 217                   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 218                   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 219                   DEALINGS IN THE SOFTWARE.
 220                 </p>
 221                 <p>
 222                   This notice is located at:
 223                   <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>
 224                 </p>
 225               </div><!-- /license -->
 226             </div><!-- /t1 -->
 227           </div><!-- /.yui-content -->
 228
 229         </div></div><!-- /tabs -->
 230
 231       </div><!-- /body -->
 232
 233     </div><!-- /page -->
 234     <div id="hidden-contents">
 235       <div id="l163-rack-1a" class="tooltip">
 236         <div id="location-1" class="location small">
 237           <ul class="data">
 238             <li class="identifier">
 239               <span class="label"></span>
 240               <span class="primary">Rack 1A</span>
 241             </li>
 242             <li class="identifier">
 243               <span class="label">Location:</span>
 244               <span class="value">L163</span>
 245             </li>
 246           </ul>
 247         </div>
 248       </div>
 249       <div id="l163-rack-4a" class="tooltip">
 250         <div id="location-2" class="location small">
 251           <ul class="data">
 252             <li class="identifier">
 253               <span class="label"></span>
 254               <span class="primary">Rack 4A</span>
 255             </li>
 256             <li class="identifier">
 257               <span class="label">Location:</span>
 258               <span class="value">L163</span>
 259             </li>
 260           </ul>
 261         </div>
 262       </div>
 263       <div id="l163-rack-4c" class="tooltip">
 264         <div id="location-3" class="location small">
 265           <ul class="data">
 266             <li class="identifier">
 267               <span class="label"></span>
 268               <span class="primary">Rack 4C</span>
 269             </li>
 270             <li class="identifier">
 271               <span class="label">Location:</span>
 272               <span class="value">L163</span>
 273             </li>
 274           </ul>
 275         </div>
 276       </div>
 277       <div id="service-counter" class="tooltip">
 278         <div id="location-4" class="location small">
 279           <ul class="data">
 280             <li class="identifier">
 281               <span class="label"></span>
 282               <span class="primary"></span>
 283             </li>
 284             <li class="identifier">
 285               <span class="label">Location:</span>
 286               <span class="value">Service Counter</span>
 287             </li>
 288           </ul>
 289         </div>
 290       </div>
 291       <div id="mtodd" class="tooltip">
 292         <div id="client-1" class="client small">
 293           <ul class="data">
 294             <li class="identifier">
 295               <span class="label">Name:</span>
 296               <span class="primary">Matt Todd</span>
 297             </li>
 298             <li class="identifier">
 299               <span class="label">Phone:</span>
 300               <span class="value">678-466-4357</span>
 301             </li>
 302             <li class="identifier">
 303               <span class="label minimize">Office:</span>
 304               <span class="value minimize">Virtual Services</span>
 305             </li>
 306             <li class="identifier">
 307               <span class="label minimize">Email:</span>
 308               <span class="value minimize"><a href="mailto:mtodd@clayton.edu">mtodd@clayton.edu</a></span>
 309             </li>
 310           </ul>
 311         </div>
 312       </div>
 313     </div>
 314     <div id="dynload"></div>
 315   </body>
 316 </html>