JsComponents

In order to use the components just download the file release.zip. Unzip the file and place your html files in the same directory like the sample file index.html. In the html-file must include the files jsComponents.js and jsComponents.css like in the following html header.

       
         <?xml version="1.0" encoding="UTF-8"?>
            <!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>JS Components: Combined Example</title>
              <script type="text/javascript" src="jsc/jsComponents.js"></script>
              <link rel="stylesheet" type="text/css" href="jsc/jsComponents.css" />
            </head>
         <body>
         
       

In order to use one component look at the sample code for each control and adjust your code accordingly.

HTML Source:
           <div class="JSTree" >
             <ul>
               <li>HTML Authoring
                 <ul>
                   <li><a href="#">Beginner's Guide</a>
                     <ul>
                       <li><a href="#">Beginner's Guide 1</a></li>
                       <li><a href="#">Beginner's Guide 2</a></li>
                     </ul>
                   </li>
                   <li><a href="#">Authoring Tips</a></li>
                   <li><a href="#">HTML Coding Tips</a></li>
                 </ul>
               </li>
               <li class="opened">HTML References
                 <ul>
                   <li><a href="#">Elements</a></li>
                   <li><a href="#">Character Sets</a></li>
                 </ul>
               </li>
               <li>HTML Applications (HTA)
                 <ul>
                   <li><a href="#">Overview</a></li>
                   <li><a href="#">Reference</a></li>
                 </ul>
               </li>
             </ul>
           </div>

HTML Source:
             <div class="JSCollapse">
               <ul>
                 <li>HTML Authoring
                   <ul>
                     <li><a href="#">Beginner's Guide</a></li>
                     <li><a href="#">Authoring Tips</a></li>
                     <li><a href="#">HTML Coding Tips</a></li>
                   </ul>
                 </li>
                 <li class="opened">HTML References
                   <ul>
                     <li><a href="#">Elements</a></li>
                     <li><a href="#">Character Sets</a></li>
                   </ul>
                 </li>
                 <li>HTML Applications (HTA)
                   <ul>
                     <li><a href="#">Overview</a></li>
                     <li><a href="#">Reference</a></li>
                   </ul>
                 </li>
               </ul>
             </div>
HTML Source:
           <div class="JSSearchList">
             <ul>
               <li><a href="#">drag-box</a></li>
               <li><a href="#">hilite</a></li>
               <li><a href="#">pane1</a></li>
               <li><a href="#">pane2</a></li>
               <li><a href="#">jsTabBox</a></li>
               <li><a href="#">tablesort</a></li>
               <li><a href="#">tooltip</a></li>
               <li><a href="#">tree</a></li>
             </ul>
           </div>

Sortierbar und Gestreift

IntegersStrings FloatsStrings 2 DatesNo Sorting
12string a1.2string 12006/10/22Rubbish 1
14string b1.1string 22006/11/22Rubbish 2
1string c0.1string 32006/11/20A
7string c20.711string 3b1999/03/20A 21
23string d0.24string 42006/11/19123 1
HTML Source:
           <div class="JSTableStripe">
             <div class="JSTableSort">
               <table>
                 <thead>
                   <tr>
                     <th class="SortNumber">Integers</th><th class="SortString">Strings</th>
                     <th class="SortNumber">Floats</th><th class="SortString">Strings 2</th>
                     <th class="SortString">Dates</th><th>No Sorting</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr><td>12</td><td>string a</td><td>1.2</td><td>string 1</td><td>2006/10/22</td><td>Rubbish 1</td></tr>
                   <tr><td>14</td><td>string b</td><td>1.1</td><td>string 2</td><td>2006/11/22</td><td>Rubbish 2</td></tr>
                   <tr><td>1</td><td>string c</td><td>0.1</td><td>string 3</td><td>2006/11/20</td><td>A</td></tr>
                   <tr><td>7</td><td>string c2</td><td>0.711</td><td>string 3b</td><td>1999/03/20</td><td>A 21</td></tr>
                   <tr><td>23</td><td>string d</td><td>0.24</td><td>string 4</td><td>2006/11/19</td><td>123 1</td></tr>
                 </tbody>
               </table>
             </div>
           </div>

Gestreifte Tabelle

Berlin Hamburg München
Miljöh Kiez Bierdampf
Buletten Frikadellen Fleischpflanzerl
Buletten Frikadellen Fleischpflanzerl
Buletten Frikadellen Fleischpflanzerl
HTML Source:
           <div class="JSTableStripe">
             <table>
               <tr>
                 <th>Berlin</th>
                 <th>Hamburg</th>
                 <th>München</th>
               </tr>
               <tr>
                 <td>Miljöh</td>
                 <td>Kiez</td>
                 <td>Bierdampf</td>
               </tr>
               <tr>
                 <td>Buletten</td>
                 <td>Frikadellen</td>
                 <td>Fleischpflanzerl</td>
               </tr>
               <tr>
                 <td>Buletten</td>
                 <td>Frikadellen</td>
                 <td>Fleischpflanzerl</td>
               </tr>
               <tr>
                 <td>Buletten</td>
                 <td>Frikadellen</td>
                 <td>Fleischpflanzerl</td>
               </tr>
             </table>
           </div>
Tip 1: This is tooltip sensitive area 1 - Tip 2: This is tooltip sensitive are 2

Some more text

Tip 3: Enter Me!

Some more text

Tip 4: Text2 with outer formatting
Tip 4: Text2 with inner formatting
Tip X: Missing Tip

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer diam nisi, sagittis eget, placerat sit amet, ultricies a, libero. Vestibulum porttitor laoreet velit. Integer faucibus sodales metus. In nec justo. In hac habitasse platea dictumst. Ut consequat elementum ligula. In sagittis. Phasellus nonummy. Nullam mauris felis, porttitor vel, porta vel, posuere id, orci. Mauris tincidunt. Sed ultrices semper turpis. Nulla ullamcorper. Integer justo.

HTML Source:
           <div class="JSToolTip" data="tips.xhtml,5000" />
           <span id="tip001" class="JSTTip"> 
             Tip 1: This is tooltip sensitive area 1
           </span> - 
           <span id="tip002" class="JSTTip">
             Tip 2: This is tooltip sensitive  are 2
           </span>
           <p>Some more text</p>
           <span id="tip003" class="JSTTip">
             Tip 3: Enter Me!
           </span><br />
           <p>Some more text</p>
           <b><span id="tip004" class="JSTTip">
               Tip 4: Text2 with outer formatting
             </span></b><br />
           <span id="tip004a" class="JSTTip" >
             <b>Tip 4: Text2 with inner formatting</b>
           </span><br />
           <span id="tip010" class="JSTTip">
             Tip X: Missing Tip
           </span><br />
           <div style="width:80%">
             <p>
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
               Integer diam nisi, sagittis eget, placerat sit amet, ultricies
               a, libero. Vestibulum porttitor laoreet velit. Integer faucibus
               sodales metus. In nec justo. In hac habitasse platea dictumst.
               Ut consequat elementum ligula. In sagittis. Phasellus nonummy.
               Nullam mauris <span id="tip008" class="JSTTip">felis</span>,
               porttitor vel, porta vel, posuere id, orci. Mauris tincidunt.
               Sed ultrices semper turpis. Nulla ullamcorper. Integer justo.
             </p>
             
           </div>

Drag this item here!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra sapien in nulla euismod scelerisque. Aliquam ornare fringilla orci. Aliquam enim odio, dictum eu, auctor ut, pulvinar non, lectus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra sapien in nulla euismod scelerisque. Aliquam ornare fringilla orci. Aliquam enim odio, dictum eu, auctor ut, pulvinar non, lectus.

An other dragable area:
Larum Lorum Lirum Larum Lorum Lirum Larum Lorum Lirum Larum Lorum Lirum
Larum Lorum Lirum Larum Lorum Lirum Larum Lorum Lirum Larum Lorum Lirum

HTML Source:
           <div class="JSDragArea" style="top:250px;left:100px;width:600px;">
             <p>Drag this item here!<br />
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra sapien in nulla euismod scelerisque. Aliquam ornare fringilla orci. Aliquam enim odio, dictum eu, auctor ut, pulvinar non, lectus.<br />
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra sapien in nulla euismod scelerisque. Aliquam ornare fringilla orci. Aliquam enim odio, dictum eu, auctor ut, pulvinar non, lectus.<br />
             </p>
           </div>
           <div class="JSDragArea" style="top:350px;left:150px;background-color:#eef;">
             <p> An other dragable area: <br />
               Larum Lorum Lirum Larum Lorum Lirum
               Larum Lorum Lirum Larum Lorum Lirum<br />
               Larum Lorum Lirum Larum Lorum Lirum
               Larum Lorum Lirum Larum Lorum Lirum
             </p>
           </div>

first text first text first text first text

second text second text second text second text

third text third text third text third text

HTML Source:
           <div class="JSTabBox">
             <div class="JSTabPanel" title="first item" current="false">
               <p>
                 first text
                 first text
                 first text
                 first text
               </p> 
             </div>
             <div class="JSTabPanel" title="second item" current="true"> <p>
                 second text
                 second text
                 second text
                 second text
               </p> 
             </div>
             <div class="JSTabPanel" title="third one" current="false"> <p>
                 third text
                 third text
                 third text
                 third text
               </p> 
             </div>
           </div>

Copyright 2006, Dr. Detlef Groth, dgroth(at)gmx.de
Creative Commons License
This work is licensed under a Creative Commons Attribution-NoDerivs 2.0 Germany License.