JSComponents Version 2011-07-05

jscompontents-logo
graphics: robert westenkirchner www.linkmatrix.de

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.

The JSComponents Wiki can be found here

Unfortunatly the articles are in german only. May be english articles will be published as well.

Static Tree

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>

Dynamic Tree

HTML Source:

<div class="JSTree">
  <ul>
    <li>Ordner 1
      <ul>
        <li><a href="#">Unterordner 1.1</a>
          <ul>
            <li><a href="#">Knoten 1.1.1</a></li>
            <li><a href="#">Knoten 1.1.2 </a></li>
          </ul>
        </li>
        <li><a href="#">Knoten 1.2</a></li>
        <li><a href="#">Knoten 1.3</a></li>
      </ul>
    </li>
    <li class="include"><div datasrc="inc-list.xhtml"></div>Dynamic Folder</li>
    <li class="include"><div datasrc="inc-nested-list.xhtml"></div>Dynamic Folder 2</li>
    <li class="include"><div datasrc="inc-nested-nested-list.xhtml"></div>Dynamic Folder 3</li>
  </ul>
</div>

Standard Control

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="JSCollapse">
        <ul class="Underline">
          <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>

Same but with images

HTML Source:

<span class="CSSCollapse">
<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>
      </span>

Using Arrows

  • Lorem ipsum ...

    • Lorem ipsum ne natum lorem dicit sea, nullam recteque conceptam pri at, at sed porro bonorum. Labores placerat deserunt nec te, homero erroribus vis ut. Eum id tamquam gubergren, te falli nonumy antiopam eos. Ut sed quas evertitur. Nam id illud malorum. Possit sanctus mel in, populo mediocritatem qui ne.

  • Et stet graecis ...

    • Et stet graecis epicuri his, est aperiri urbanitas ex. Ne mei alii nonumy partiendo. Blandit consequuntur his ei, cu noster feugiat minimum quo. Quaestio pertinacia dissentias sea eu. Quot decore omittantur mei eu, mei illum labitur ea. Pertinax reprehendunt eu nec.

  • Eligendi sensibus ...

    • Eligendi sensibus expetendis vix ut, eu mel nihil consequuntur, agam movet ridens et cum. Eu modus contentiones vis, vix quod causae at, sit ea probo graecis. Et epicuri deleniti eos. Cu erant timeam has, modus inermis legendos ne vix, alia democritum nam ea. Ipsum eirmod nam an. Sit eu numquam eloquentiam, at vix error tibique consequat.

HTML Source:

<span class="CSSCollapseArrow">
<div class="JSCollapse">
  <ul>
    <li>Lorem ipsum ...
      <ul><li><p>
            Lorem ipsum ne natum lorem dicit sea, nullam recteque conceptam
            pri at, at sed porro bonorum. Labores placerat deserunt nec te,
            homero erroribus vis ut. Eum id tamquam gubergren, te falli
            nonumy antiopam eos. Ut sed quas evertitur. Nam id illud malorum.
            Possit sanctus mel in, populo mediocritatem qui ne.
          </p></li></ul>
    </li>
    <li>Et stet graecis ...
      <ul><li><p>
            Et stet graecis epicuri his, est aperiri urbanitas ex. Ne mei
            alii nonumy partiendo. Blandit consequuntur his ei, cu noster
            feugiat minimum quo. Quaestio pertinacia dissentias sea eu. Quot
            decore omittantur mei eu, mei illum labitur ea. Pertinax
            reprehendunt eu nec.
          </p></li></ul>
    </li>
    <li>Eligendi sensibus ...
      <ul><li><p>
            Eligendi sensibus expetendis vix ut, eu mel nihil consequuntur,
            agam movet ridens et cum. Eu modus contentiones vis, vix quod
            causae at, sit ea probo graecis. Et epicuri deleniti eos. Cu
            erant timeam has, modus inermis legendos ne vix, alia democritum
            nam ea. Ipsum eirmod nam an. Sit eu numquam eloquentiam, at vix
            error tibique consequat.
          </p></li></ul>
    </li>
  </ul>
</div>
</span>

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>

Scrollbar

Please note that the style width attributes are required for the table, the th, and the td tags. The height of the scrollable area can be adjusted. See the example striped and scrollable below.

Header 1 Header 2 Header 3
Cell 1.1 Cell 1.2 Cell 1.3
Content 2.1. More Cell Content 2.2 More Cell Content 2.3
Even More Cell Content 3.1 Even More Cell Content 3.2 Even More Cell Content 3.3
Repeat 1 Repeat 2 Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1, Even More Cell Content 1, Even More Cell Content 1, Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
End of Cell Content 1 End of Cell Content 2 End of Cell Content 3

HTML Source:

<div>
<div class="JSTableScrollable">  
  <table border="0" cellpadding="0" cellspacing="0" width="800">
    <thead class="JSTheadScrollable">
      <tr>
        <th style="width:300px">Header 1</th>
        <th style="width:200px">Header 2</th>
        <th style="width:300px">Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:300px">Cell 1.1</td>
        <td style="width:200px">Cell 1.2</td>
        <td style="width:300px">Cell 1.3</td>
      </tr>
      <tr>
        <td>Content 2.1.</td>
        <td>More Cell Content 2.2</td>
        <td>More Cell Content 2.3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 3.1</td>
        <td>Even More Cell Content 3.2</td>
        <td>Even More Cell Content 3.3</td>
      </tr>
      <tr>
        <td>Repeat 1</td>
        <td>Repeat 2</td>
        <td>Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1, Even More Cell Content 1, Even More Cell Content 1, Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>End of Cell Content 1</td>
        <td>End of Cell Content 2</td>
        <td>End of Cell Content 3</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Scrollable and Striped

Header 1 Header 2 Header 3
Cell 1.1 Cell 1.2 Cell 1.3
More Cell Content 2.1. More Cell Content 2.2 More Cell Content 2.3
Even More Cell Content 3.1 Even More Cell Content 3.2 Even More Cell Content 3.3
Repeat 1 Repeat 2 Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
Cell Content 1 Cell Content 2 Cell Content 3
More Cell Content 1 More Cell Content 2 More Cell Content 3
Even More Cell Content 1, Even More Cell Content 1, Even More Cell Content 1, Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3
And Repeat 1 And Repeat 2 And Repeat 3
End of Cell Content 1 End of Cell Content 2 End of Cell Content 3

HTML Source:

<div class="JSTableStripe">  
<div class="JSTableScrollable" style="height:200px">  
  <table border="0" cellpadding="0" cellspacing="0" width="700px">
    <thead class="JSTheadScrollable">
      <tr>
        <th style="width:300px">Header 1</th>
        <th style="width:200px">Header 2</th>
        <th style="width:200px">Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:300px">Cell 1.1</td>
        <td style="width:200px">Cell 1.2</td>
        <td style="width:200px">Cell 1.3</td>
      </tr>
      <tr>
        <td>More Cell Content 2.1.</td>
        <td>More Cell Content 2.2</td>
        <td>More Cell Content 2.3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 3.1</td>
        <td>Even More Cell Content 3.2</td>
        <td>Even More Cell Content 3.3</td>
      </tr>
      <tr>
        <td>Repeat 1</td>
        <td>Repeat 2</td>
        <td>Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1, Even More Cell Content 1, Even More Cell Content 1, Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>End of Cell Content 1</td>
        <td>End of Cell Content 2</td>
        <td>End of Cell Content 3</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Scrollable, Sortable and Striped

Numeric Header 1 Header 2 Header 3
1.1 Cell 1.2 Cell 1.3
2.1. More Cell Content 2.2 More Cell Content 2.3
3.1 Even More Cell Content 3.2 Even More Cell Content 3.3
12.1 Repeat 2 Repeat 3
111 Cell Content 2 Cell Content 3
1 More Cell Content 2 More Cell Content 3
1.4 Even More Cell Content 2 Even More Cell Content 3
1.5 And Repeat 2 And Repeat 3
0.3 Cell Content 2 Cell Content 3
1.01 More Cell Content 2 More Cell Content 3
8 Even More Cell Content 2 Even More Cell Content 3
12 And Repeat 2 And Repeat 3
1004.1 End of Cell Content 2 End of Cell Content 3

HTML Source:

<div class="JSTableStripe">  
<div class="JSTableSort">
<div class="JSTableScrollable" style="height:200px">  
  <table border="0" cellpadding="0" cellspacing="0" width="900px">
    <thead class="JSTheadScrollable">
      <tr>
        <th class="SortNumber" style="width:300px">Numeric Header 1</th>
        <th class="SortString" style="width:300px">Header 2</th>
        <th class="SortString" style="width:300px">Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:300px">1.1</td>
        <td style="width:300px">Cell 1.2</td>
        <td style="width:300px">Cell 1.3</td>
      </tr>
      <tr>
        <td>2.1.</td>
        <td>More Cell Content 2.2</td>
        <td>More Cell Content 2.3</td>
      </tr>
      <tr>
        <td>3.1</td>
        <td>Even More Cell Content 3.2</td>
        <td>Even More Cell Content 3.3</td>
      </tr>
      <tr>
        <td>12.1</td>
        <td>Repeat 2</td>
        <td>Repeat 3</td>
      </tr>
      <tr>
        <td>111</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>1.4</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>1.5</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>0.3</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
      </tr>
      <tr>
        <td>1.01</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>12</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
      </tr>
      <tr>
        <td>1004.1</td>
        <td>End of Cell Content 2</td>
        <td>End of Cell Content 3</td>
      </tr>
    </tbody>
  </table>
</div>
</div>
</div>

The table can be searched by normal strings or regular expressions. For instance to start looking for names start with a "S" in the lcol-column. Write "S"in the column input field and press ENTER. Or to search for all names start either with S or T followed by a i in the mcol-column. Write there in the input field: "[ST]i" and press ENTER. To see again the complete table empty any input field and press ENTER. In order to exclude any column from beeing searched you write class ignore as a class-attribute for the table header. This can be seen in the source code below. Some other sample expressions:

  • . - any char
  • [A-Z] - uppercase letters A-Z
  • [a-z0-9A-Z] - any letter or number
  • [A-Z]+ - at least one or more uppercase letters
  • [A-Z]* - zero, or one and more uppercase letters
  • .+t$ - a text ending with t
kcollcolmcolncolocol
AgonetAgunetAgynetAgxnetAgznet
AhonetAhunetAhynetAhxnetAhznet
AionetAiunetAiynetAixnetAiznet
AjonetAjunetAjynetAjxnetAjznet
AkonetAkunetAkynetAkxnetAkznet
AlonetAlunetAlynetAlxnetAlznet
BgonetBgunetBgynetBgxnetBgznet
BhonetBhunetBhynetBhxnetBhznet
BionetBiunetBiynetBixnetBiznet
BjonetBjunetBjynetBjxnetBjznet
BkonetBkunetBkynetBkxnetBkznet
BlonetBlunetBlynetBlxnetBlznet
CgonetCgunetCgynetCgxnetCgznet
ChonetChunetChynetChxnetChznet
CionetCiunetCiynetCixnetCiznet
CjonetCjunetCjynetCjxnetCjznet
CkonetCkunetCkynetCkxnetCkznet
ClonetClunetClynetClxnetClznet
DgonetDgunetDgynetDgxnetDgznet
DhonetDhunetDhynetDhxnetDhznet
DionetDiunetDiynetDixnetDiznet
DjonetDjunetDjynetDjxnetDjznet
DkonetDkunetDkynetDkxnetDkznet
DlonetDlunetDlynetDlxnetDlznet
EgonetEgunetEgynetEgxnetEgznet
EhonetEhunetEhynetEhxnetEhznet
EionetEiunetEiynetEixnetEiznet
EjonetEjunetEjynetEjxnetEjznet
EkonetEkunetEkynetEkxnetEkznet
ElonetElunetElynetElxnetElznet
FgonetFgunetFgynetFgxnetFgznet
FhonetFhunetFhynetFhxnetFhznet
FionetFiunetFiynetFixnetFiznet
FjonetFjunetFjynetFjxnetFjznet
FkonetFkunetFkynetFkxnetFkznet
FlonetFlunetFlynetFlxnetFlznet
GgonetGgunetGgynetGgxnetGgznet
GhonetGhunetGhynetGhxnetGhznet
GionetGiunetGiynetGixnetGiznet
GjonetGjunetGjynetGjxnetGjznet
GkonetGkunetGkynetGkxnetGkznet
GlonetGlunetGlynetGlxnetGlznet
HgonetHgunetHgynetHgxnetHgznet
HhonetHhunetHhynetHhxnetHhznet
HionetHiunetHiynetHixnetHiznet
HjonetHjunetHjynetHjxnetHjznet
HkonetHkunetHkynetHkxnetHkznet
HlonetHlunetHlynetHlxnetHlznet
IgonetIgunetIgynetIgxnetIgznet
IhonetIhunetIhynetIhxnetIhznet
IionetIiunetIiynetIixnetIiznet
IjonetIjunetIjynetIjxnetIjznet
IkonetIkunetIkynetIkxnetIkznet
IlonetIlunetIlynetIlxnetIlznet
JgonetJgunetJgynetJgxnetJgznet
JhonetJhunetJhynetJhxnetJhznet
JionetJiunetJiynetJixnetJiznet
JjonetJjunetJjynetJjxnetJjznet
JkonetJkunetJkynetJkxnetJkznet
JlonetJlunetJlynetJlxnetJlznet
KgonetKgunetKgynetKgxnetKgznet
KhonetKhunetKhynetKhxnetKhznet
KionetKiunetKiynetKixnetKiznet
KjonetKjunetKjynetKjxnetKjznet
KkonetKkunetKkynetKkxnetKkznet
KlonetKlunetKlynetKlxnetKlznet
LgonetLgunetLgynetLgxnetLgznet
LhonetLhunetLhynetLhxnetLhznet
LionetLiunetLiynetLixnetLiznet
LjonetLjunetLjynetLjxnetLjznet
LkonetLkunetLkynetLkxnetLkznet
LlonetLlunetLlynetLlxnetLlznet
MgonetMgunetMgynetMgxnetMgznet
MhonetMhunetMhynetMhxnetMhznet
MionetMiunetMiynetMixnetMiznet
MjonetMjunetMjynetMjxnetMjznet
MkonetMkunetMkynetMkxnetMkznet
MlonetMlunetMlynetMlxnetMlznet
NgonetNgunetNgynetNgxnetNgznet
NhonetNhunetNhynetNhxnetNhznet
NionetNiunetNiynetNixnetNiznet
NjonetNjunetNjynetNjxnetNjznet
NkonetNkunetNkynetNkxnetNkznet
NlonetNlunetNlynetNlxnetNlznet
OgonetOgunetOgynetOgxnetOgznet
OhonetOhunetOhynetOhxnetOhznet
OionetOiunetOiynetOixnetOiznet
OjonetOjunetOjynetOjxnetOjznet
OkonetOkunetOkynetOkxnetOkznet
OlonetOlunetOlynetOlxnetOlznet
PgonetPgunetPgynetPgxnetPgznet
PhonetPhunetPhynetPhxnetPhznet
PionetPiunetPiynetPixnetPiznet
PjonetPjunetPjynetPjxnetPjznet
PkonetPkunetPkynetPkxnetPkznet
PlonetPlunetPlynetPlxnetPlznet
QgonetQgunetQgynetQgxnetQgznet
QhonetQhunetQhynetQhxnetQhznet
QionetQiunetQiynetQixnetQiznet
QjonetQjunetQjynetQjxnetQjznet
QkonetQkunetQkynetQkxnetQkznet
QlonetQlunetQlynetQlxnetQlznet
RgonetRgunetRgynetRgxnetRgznet
RhonetRhunetRhynetRhxnetRhznet
RionetRiunetRiynetRixnetRiznet
RjonetRjunetRjynetRjxnetRjznet
RkonetRkunetRkynetRkxnetRkznet
RlonetRlunetRlynetRlxnetRlznet
SgonetSgunetSgynetSgxnetSgznet
ShonetShunetShynetShxnetShznet
SionetSiunetSiynetSixnetSiznet
SjonetSjunetSjynetSjxnetSjznet
SkonetSkunetSkynetSkxnetSkznet
SlonetSlunetSlynetSlxnetSlznet
TgonetTgunetTgynetTgxnetTgznet
ThonetThunetThynetThxnetThznet
TionetTiunetTiynetTixnetTiznet
TjonetTjunetTjynetTjxnetTjznet
TkonetTkunetTkynetTkxnetTkznet
TlonetTlunetTlynetTlxnetTlznet

HTML Source:

<div class="JSTableFilter">  
<table border="1px" cellpadding="3px" cellspacing="0px">
  <thead>
    <tr><th class="ignore">kcol</th><th>lcol</th><th>mcol</th><th>ncol</th><th>ocol</th></tr>
  </thead>
  <tbody>
    <tr><td>Agonet</td><td>Agunet</td><td>Agynet</td><td>Agxnet</td><td>Agznet</td></tr>
    <tr><td>Ahonet</td><td>Ahunet</td><td>Ahynet</td><td>Ahxnet</td><td>Ahznet</td></tr>
    <tr><td>Aionet</td><td>Aiunet</td><td>Aiynet</td><td>Aixnet</td><td>Aiznet</td></tr>
    <tr><td>Ajonet</td><td>Ajunet</td><td>Ajynet</td><td>Ajxnet</td><td>Ajznet</td></tr>
    <tr><td>Akonet</td><td>Akunet</td><td>Akynet</td><td>Akxnet</td><td>Akznet</td></tr>
    <tr><td>Alonet</td><td>Alunet</td><td>Alynet</td><td>Alxnet</td><td>Alznet</td></tr>
    <tr><td>Bgonet</td><td>Bgunet</td><td>Bgynet</td><td>Bgxnet</td><td>Bgznet</td></tr>
    <tr><td>Bhonet</td><td>Bhunet</td><td>Bhynet</td><td>Bhxnet</td><td>Bhznet</td></tr>
    <tr><td>Bionet</td><td>Biunet</td><td>Biynet</td><td>Bixnet</td><td>Biznet</td></tr>
    <tr><td>Bjonet</td><td>Bjunet</td><td>Bjynet</td><td>Bjxnet</td><td>Bjznet</td></tr>
    <tr><td>Bkonet</td><td>Bkunet</td><td>Bkynet</td><td>Bkxnet</td><td>Bkznet</td></tr>
    <tr><td>Blonet</td><td>Blunet</td><td>Blynet</td><td>Blxnet</td><td>Blznet</td></tr>
    <tr><td>Cgonet</td><td>Cgunet</td><td>Cgynet</td><td>Cgxnet</td><td>Cgznet</td></tr>
    <tr><td>Chonet</td><td>Chunet</td><td>Chynet</td><td>Chxnet</td><td>Chznet</td></tr>
    <tr><td>Cionet</td><td>Ciunet</td><td>Ciynet</td><td>Cixnet</td><td>Ciznet</td></tr>
    <tr><td>Cjonet</td><td>Cjunet</td><td>Cjynet</td><td>Cjxnet</td><td>Cjznet</td></tr>
    <tr><td>Ckonet</td><td>Ckunet</td><td>Ckynet</td><td>Ckxnet</td><td>Ckznet</td></tr>
    <tr><td>Clonet</td><td>Clunet</td><td>Clynet</td><td>Clxnet</td><td>Clznet</td></tr>
    <tr><td>Dgonet</td><td>Dgunet</td><td>Dgynet</td><td>Dgxnet</td><td>Dgznet</td></tr>
    <tr><td>Dhonet</td><td>Dhunet</td><td>Dhynet</td><td>Dhxnet</td><td>Dhznet</td></tr>
    <tr><td>Dionet</td><td>Diunet</td><td>Diynet</td><td>Dixnet</td><td>Diznet</td></tr>
    <tr><td>Djonet</td><td>Djunet</td><td>Djynet</td><td>Djxnet</td><td>Djznet</td></tr>
    <tr><td>Dkonet</td><td>Dkunet</td><td>Dkynet</td><td>Dkxnet</td><td>Dkznet</td></tr>
    <tr><td>Dlonet</td><td>Dlunet</td><td>Dlynet</td><td>Dlxnet</td><td>Dlznet</td></tr>
    <tr><td>Egonet</td><td>Egunet</td><td>Egynet</td><td>Egxnet</td><td>Egznet</td></tr>
    <tr><td>Ehonet</td><td>Ehunet</td><td>Ehynet</td><td>Ehxnet</td><td>Ehznet</td></tr>
    <tr><td>Eionet</td><td>Eiunet</td><td>Eiynet</td><td>Eixnet</td><td>Eiznet</td></tr>
    <tr><td>Ejonet</td><td>Ejunet</td><td>Ejynet</td><td>Ejxnet</td><td>Ejznet</td></tr>
    <tr><td>Ekonet</td><td>Ekunet</td><td>Ekynet</td><td>Ekxnet</td><td>Ekznet</td></tr>
    <tr><td>Elonet</td><td>Elunet</td><td>Elynet</td><td>Elxnet</td><td>Elznet</td></tr>
    <tr><td>Fgonet</td><td>Fgunet</td><td>Fgynet</td><td>Fgxnet</td><td>Fgznet</td></tr>
    <tr><td>Fhonet</td><td>Fhunet</td><td>Fhynet</td><td>Fhxnet</td><td>Fhznet</td></tr>
    <tr><td>Fionet</td><td>Fiunet</td><td>Fiynet</td><td>Fixnet</td><td>Fiznet</td></tr>
    <tr><td>Fjonet</td><td>Fjunet</td><td>Fjynet</td><td>Fjxnet</td><td>Fjznet</td></tr>
    <tr><td>Fkonet</td><td>Fkunet</td><td>Fkynet</td><td>Fkxnet</td><td>Fkznet</td></tr>
    <tr><td>Flonet</td><td>Flunet</td><td>Flynet</td><td>Flxnet</td><td>Flznet</td></tr>
    <tr><td>Ggonet</td><td>Ggunet</td><td>Ggynet</td><td>Ggxnet</td><td>Ggznet</td></tr>
    <tr><td>Ghonet</td><td>Ghunet</td><td>Ghynet</td><td>Ghxnet</td><td>Ghznet</td></tr>
    <tr><td>Gionet</td><td>Giunet</td><td>Giynet</td><td>Gixnet</td><td>Giznet</td></tr>
    <tr><td>Gjonet</td><td>Gjunet</td><td>Gjynet</td><td>Gjxnet</td><td>Gjznet</td></tr>
    <tr><td>Gkonet</td><td>Gkunet</td><td>Gkynet</td><td>Gkxnet</td><td>Gkznet</td></tr>
    <tr><td>Glonet</td><td>Glunet</td><td>Glynet</td><td>Glxnet</td><td>Glznet</td></tr>
    <tr><td>Hgonet</td><td>Hgunet</td><td>Hgynet</td><td>Hgxnet</td><td>Hgznet</td></tr>
    <tr><td>Hhonet</td><td>Hhunet</td><td>Hhynet</td><td>Hhxnet</td><td>Hhznet</td></tr>
    <tr><td>Hionet</td><td>Hiunet</td><td>Hiynet</td><td>Hixnet</td><td>Hiznet</td></tr>
    <tr><td>Hjonet</td><td>Hjunet</td><td>Hjynet</td><td>Hjxnet</td><td>Hjznet</td></tr>
    <tr><td>Hkonet</td><td>Hkunet</td><td>Hkynet</td><td>Hkxnet</td><td>Hkznet</td></tr>
    <tr><td>Hlonet</td><td>Hlunet</td><td>Hlynet</td><td>Hlxnet</td><td>Hlznet</td></tr>
    <tr><td>Igonet</td><td>Igunet</td><td>Igynet</td><td>Igxnet</td><td>Igznet</td></tr>
    <tr><td>Ihonet</td><td>Ihunet</td><td>Ihynet</td><td>Ihxnet</td><td>Ihznet</td></tr>
    <tr><td>Iionet</td><td>Iiunet</td><td>Iiynet</td><td>Iixnet</td><td>Iiznet</td></tr>
    <tr><td>Ijonet</td><td>Ijunet</td><td>Ijynet</td><td>Ijxnet</td><td>Ijznet</td></tr>
    <tr><td>Ikonet</td><td>Ikunet</td><td>Ikynet</td><td>Ikxnet</td><td>Ikznet</td></tr>
    <tr><td>Ilonet</td><td>Ilunet</td><td>Ilynet</td><td>Ilxnet</td><td>Ilznet</td></tr>
    <tr><td>Jgonet</td><td>Jgunet</td><td>Jgynet</td><td>Jgxnet</td><td>Jgznet</td></tr>
    <tr><td>Jhonet</td><td>Jhunet</td><td>Jhynet</td><td>Jhxnet</td><td>Jhznet</td></tr>
    <tr><td>Jionet</td><td>Jiunet</td><td>Jiynet</td><td>Jixnet</td><td>Jiznet</td></tr>
    <tr><td>Jjonet</td><td>Jjunet</td><td>Jjynet</td><td>Jjxnet</td><td>Jjznet</td></tr>
    <tr><td>Jkonet</td><td>Jkunet</td><td>Jkynet</td><td>Jkxnet</td><td>Jkznet</td></tr>
    <tr><td>Jlonet</td><td>Jlunet</td><td>Jlynet</td><td>Jlxnet</td><td>Jlznet</td></tr>
    <tr><td>Kgonet</td><td>Kgunet</td><td>Kgynet</td><td>Kgxnet</td><td>Kgznet</td></tr>
    <tr><td>Khonet</td><td>Khunet</td><td>Khynet</td><td>Khxnet</td><td>Khznet</td></tr>
    <tr><td>Kionet</td><td>Kiunet</td><td>Kiynet</td><td>Kixnet</td><td>Kiznet</td></tr>
    <tr><td>Kjonet</td><td>Kjunet</td><td>Kjynet</td><td>Kjxnet</td><td>Kjznet</td></tr>
    <tr><td>Kkonet</td><td>Kkunet</td><td>Kkynet</td><td>Kkxnet</td><td>Kkznet</td></tr>
    <tr><td>Klonet</td><td>Klunet</td><td>Klynet</td><td>Klxnet</td><td>Klznet</td></tr>
    <tr><td>Lgonet</td><td>Lgunet</td><td>Lgynet</td><td>Lgxnet</td><td>Lgznet</td></tr>
    <tr><td>Lhonet</td><td>Lhunet</td><td>Lhynet</td><td>Lhxnet</td><td>Lhznet</td></tr>
    <tr><td>Lionet</td><td>Liunet</td><td>Liynet</td><td>Lixnet</td><td>Liznet</td></tr>
    <tr><td>Ljonet</td><td>Ljunet</td><td>Ljynet</td><td>Ljxnet</td><td>Ljznet</td></tr>
    <tr><td>Lkonet</td><td>Lkunet</td><td>Lkynet</td><td>Lkxnet</td><td>Lkznet</td></tr>
    <tr><td>Llonet</td><td>Llunet</td><td>Llynet</td><td>Llxnet</td><td>Llznet</td></tr>
    <tr><td>Mgonet</td><td>Mgunet</td><td>Mgynet</td><td>Mgxnet</td><td>Mgznet</td></tr>
    <tr><td>Mhonet</td><td>Mhunet</td><td>Mhynet</td><td>Mhxnet</td><td>Mhznet</td></tr>
    <tr><td>Mionet</td><td>Miunet</td><td>Miynet</td><td>Mixnet</td><td>Miznet</td></tr>
    <tr><td>Mjonet</td><td>Mjunet</td><td>Mjynet</td><td>Mjxnet</td><td>Mjznet</td></tr>
    <tr><td>Mkonet</td><td>Mkunet</td><td>Mkynet</td><td>Mkxnet</td><td>Mkznet</td></tr>
    <tr><td>Mlonet</td><td>Mlunet</td><td>Mlynet</td><td>Mlxnet</td><td>Mlznet</td></tr>
    <tr><td>Ngonet</td><td>Ngunet</td><td>Ngynet</td><td>Ngxnet</td><td>Ngznet</td></tr>
    <tr><td>Nhonet</td><td>Nhunet</td><td>Nhynet</td><td>Nhxnet</td><td>Nhznet</td></tr>
    <tr><td>Nionet</td><td>Niunet</td><td>Niynet</td><td>Nixnet</td><td>Niznet</td></tr>
    <tr><td>Njonet</td><td>Njunet</td><td>Njynet</td><td>Njxnet</td><td>Njznet</td></tr>
    <tr><td>Nkonet</td><td>Nkunet</td><td>Nkynet</td><td>Nkxnet</td><td>Nkznet</td></tr>
    <tr><td>Nlonet</td><td>Nlunet</td><td>Nlynet</td><td>Nlxnet</td><td>Nlznet</td></tr>
    <tr><td>Ogonet</td><td>Ogunet</td><td>Ogynet</td><td>Ogxnet</td><td>Ogznet</td></tr>
    <tr><td>Ohonet</td><td>Ohunet</td><td>Ohynet</td><td>Ohxnet</td><td>Ohznet</td></tr>
    <tr><td>Oionet</td><td>Oiunet</td><td>Oiynet</td><td>Oixnet</td><td>Oiznet</td></tr>
    <tr><td>Ojonet</td><td>Ojunet</td><td>Ojynet</td><td>Ojxnet</td><td>Ojznet</td></tr>
    <tr><td>Okonet</td><td>Okunet</td><td>Okynet</td><td>Okxnet</td><td>Okznet</td></tr>
    <tr><td>Olonet</td><td>Olunet</td><td>Olynet</td><td>Olxnet</td><td>Olznet</td></tr>
    <tr><td>Pgonet</td><td>Pgunet</td><td>Pgynet</td><td>Pgxnet</td><td>Pgznet</td></tr>
    <tr><td>Phonet</td><td>Phunet</td><td>Phynet</td><td>Phxnet</td><td>Phznet</td></tr>
    <tr><td>Pionet</td><td>Piunet</td><td>Piynet</td><td>Pixnet</td><td>Piznet</td></tr>
    <tr><td>Pjonet</td><td>Pjunet</td><td>Pjynet</td><td>Pjxnet</td><td>Pjznet</td></tr>
    <tr><td>Pkonet</td><td>Pkunet</td><td>Pkynet</td><td>Pkxnet</td><td>Pkznet</td></tr>
    <tr><td>Plonet</td><td>Plunet</td><td>Plynet</td><td>Plxnet</td><td>Plznet</td></tr>
    <tr><td>Qgonet</td><td>Qgunet</td><td>Qgynet</td><td>Qgxnet</td><td>Qgznet</td></tr>
    <tr><td>Qhonet</td><td>Qhunet</td><td>Qhynet</td><td>Qhxnet</td><td>Qhznet</td></tr>
    <tr><td>Qionet</td><td>Qiunet</td><td>Qiynet</td><td>Qixnet</td><td>Qiznet</td></tr>
    <tr><td>Qjonet</td><td>Qjunet</td><td>Qjynet</td><td>Qjxnet</td><td>Qjznet</td></tr>
    <tr><td>Qkonet</td><td>Qkunet</td><td>Qkynet</td><td>Qkxnet</td><td>Qkznet</td></tr>
    <tr><td>Qlonet</td><td>Qlunet</td><td>Qlynet</td><td>Qlxnet</td><td>Qlznet</td></tr>
    <tr><td>Rgonet</td><td>Rgunet</td><td>Rgynet</td><td>Rgxnet</td><td>Rgznet</td></tr>
    <tr><td>Rhonet</td><td>Rhunet</td><td>Rhynet</td><td>Rhxnet</td><td>Rhznet</td></tr>
    <tr><td>Rionet</td><td>Riunet</td><td>Riynet</td><td>Rixnet</td><td>Riznet</td></tr>
    <tr><td>Rjonet</td><td>Rjunet</td><td>Rjynet</td><td>Rjxnet</td><td>Rjznet</td></tr>
    <tr><td>Rkonet</td><td>Rkunet</td><td>Rkynet</td><td>Rkxnet</td><td>Rkznet</td></tr>
    <tr><td>Rlonet</td><td>Rlunet</td><td>Rlynet</td><td>Rlxnet</td><td>Rlznet</td></tr>
    <tr><td>Sgonet</td><td>Sgunet</td><td>Sgynet</td><td>Sgxnet</td><td>Sgznet</td></tr>
    <tr><td>Shonet</td><td>Shunet</td><td>Shynet</td><td>Shxnet</td><td>Shznet</td></tr>
    <tr><td>Sionet</td><td>Siunet</td><td>Siynet</td><td>Sixnet</td><td>Siznet</td></tr>
    <tr><td>Sjonet</td><td>Sjunet</td><td>Sjynet</td><td>Sjxnet</td><td>Sjznet</td></tr>
    <tr><td>Skonet</td><td>Skunet</td><td>Skynet</td><td>Skxnet</td><td>Skznet</td></tr>
    <tr><td>Slonet</td><td>Slunet</td><td>Slynet</td><td>Slxnet</td><td>Slznet</td></tr>
    <tr><td>Tgonet</td><td>Tgunet</td><td>Tgynet</td><td>Tgxnet</td><td>Tgznet</td></tr>
    <tr><td>Thonet</td><td>Thunet</td><td>Thynet</td><td>Thxnet</td><td>Thznet</td></tr>
    <tr><td>Tionet</td><td>Tiunet</td><td>Tiynet</td><td>Tixnet</td><td>Tiznet</td></tr>
    <tr><td>Tjonet</td><td>Tjunet</td><td>Tjynet</td><td>Tjxnet</td><td>Tjznet</td></tr>
    <tr><td>Tkonet</td><td>Tkunet</td><td>Tkynet</td><td>Tkxnet</td><td>Tkznet</td></tr>
    <tr><td>Tlonet</td><td>Tlunet</td><td>Tlynet</td><td>Tlxnet</td><td>Tlznet</td></tr>
  </tbody>
</table>
</div>

Click in the table to edit fields. Each cell contains an invisible input field which can be used to submit the data. If you change a value the color of the field beomes red, remembering you to submit the data.

nNachnameVornameE-MailTelefon
1 Mueller Detlef detlef@mueller.com 2706
2 Herzfrau Stefanie stefheart@mueller.com 2620
3
4

HTML Source:

<form action="" method="post">
<div class="JSTableEdit">
  
  <table>
    <thead><tr><th>n</th><th width="200px">Nachname</th><th width="200px">Vorname</th><th width="200px">E-Mail</th><th width="200px">Telefon</th></tr></thead>
    <tbody>
      <tr>
        <td>1</td>
        
        <td><input type="text" name="Nachname1" value="Mueller" />Mueller</td>
        <td><input type="text" name="Vorname1" value="Detlef" />Detlef</td>
        <td><input type="text" name="Email1" value="detlefh@muelller.com" />detlef@mueller.com</td>
        <td><input type="text" name="Telefon1" value="2706" />2706</td>
      </tr>
      <tr>
        <td>2</td>
        <td><input type="text" name="Nachname2" value="Herzfrau" />Herzfrau</td>
        <td><input type="text" name="Vorname2" value="Stefanie" />Stefanie</td>
        <td><input type="text" name="Email2" value="stefheart@mueller.com" />stefheart@mueller.com</td>
        <td><input type="text" name="Telefon2" value="2620" />2620</td>
      </tr>
      <tr>
        <td>3</td>
        <td><input type="text" name="Nachname3" value="" /></td>
        <td><input type="text" name="Vorname3" value="" /></td>
        <td><input type="text" name="Email3" value="" /></td>
        <td><input type="text" name="Telefon3" value="" /></td>
      </tr>
      <tr>
        <td>4</td>
        <td><input type="text" name="Nachname4" value="" /></td>
        <td><input type="text" name="Vorname4" value="" /></td>
        <td><input type="text" name="Email4" value="" /></td>
        <td><input type="text" name="Telefon4" value="" /></td>
      </tr>
    </tbody>
  </table>
  
</div>
</form>

Inline Tooltips

Sample hoveredHover me!

Again sample hoveredHover me again!

HTML Source:

<p>
  <div class="JSInlineTooltip"><span class="tip">Sample hovered</span>Hover me!</div>
</p>
<p>
  <div class="JSInlineTooltip"><span class="tip">Again sample hovered</span>Hover me again!</div>
</p>

File Defined Tooltips

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"> </div> 
<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>

Example with Numbers

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="N" current="false">
     <p>
       first text
       first text
       first text
       first text
     </p> 
   </div>
   <div class="JSTabPanel" title="N" current="true"> <p>
       second text
       second text
       second text
       second text
     </p> 
   </div>
   <div class="JSTabPanel" title="N" current="false"> <p>
       third text
       third text
       third text
       third text
     </p> 
   </div>
 </div>

Example with Titles

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>

Some restricted input fields

Please note the plural-"s". Several entries are separated by komma. Floats are expressed with the dot symbol 12.1 for instance.

Test-Integer:

Test-Float:

Test-Integers:

Test-Floats:

Name:

Email:

HTML Source:

   <div class="JSFormInputInteger">Test-Integer:  <input name="testInteger" value="" /></div> <br />
   <div class="JSFormInputFloat">Test-Float:  <input name="testFloat" value="" /></div> <br />
   <div class="JSFormInputIntegers">Test-Integers:  <input name="testIntegers" value="" /></div> <br />
   <div class="JSFormInputFloats">Test-Floats:  <input name="testFloats" value="" /></div> <br />
   <div class="JSFormInputName">Name:    <input name="integer" value="Name" /></div> <br />
   <div class="JSFormInputEmail">Email:   <input name="email" value="dgroth@hobby.de" /></div> <br />

Combined Selects

Two combined select-boxes where the second changes it's content based on the selection of the first. In the second select the blocks are separated by empty options. Please note that order is important.

Look how the content of the right box changes after switching the selection in the left one ...

HTML Source:

 <div class="JSSelectsCombined">
   <select name="Country" size="1">
     <option> </option>
     <option>Griechenland</option>
     <option>Italien</option>
     <option>Sizilien</option>
     <option>Spanien</option>
   </select>
   <select name="Animals" size="1" style="width:200px;">
     <option> </option>
     <option>Fische (G)</option>
     <option>Froesche (G)</option>
     <option>Schlangen (G)</option>
     <option> </option>
     <option>Fische (I)</option>
     <option>Froesche (I)</option>
     <option>Schlangen (I)</option>
     <option>Krokodile (I)</option>
     <option> </option>
     <option>Sizilianische Froesche (Siy)</option>
     <option>Sizilianische Prinzen (Siy)</option>
     <option> </option>
     <option>Fische (S)</option>
     <option>Froesche (S)</option>
     <option>Pardelluchse (S)</option>
     <option>Schlangen (S)</option>
   </select>
 </div>

Even three dependent select boxes are possible. Three combined select-boxes where the second changes it's content based on the selection of the first. And the third changes it's content based on the selection of first and second. Please note that the hierarchy is refelcted by empty option tags and option tags containing a minus symbol.

HTML Source:

 <div class="JSSelectsCombined">
   <select name="Continent" size="1">
     <option> </option>
     <option>Afrika</option>
     <option>Amerika</option>
     <option>Europa</option>
   </select>
   <select name="Country" size="1" style="width:200px">
     <option> </option>
     <option>Aegypten</option>
     <option>Algerien</option>
     <option>Tansania</option>
     <option> </option>
     <option>Brazilien</option>
     <option>Kanada</option>
     <option>USA</option>
     <option> </option>
     <option>Griechenland</option>
     <option>Italien</option>
     <option>Spanien</option>
   </select>
   <select name="Animals" size="1" style="width:200px;">
     <option> </option>
     <option>Fische (Ag)</option>
     <option>Froesche (Ag)</option>
     <option>Schlangen (Ag)</option>
     <option> </option>
     <option>Fische (Alg)</option>
     <option>Froesche (Alg)</option>
     <option>Schlangen (Alg)</option>
     <option>Krokodile (Alg)</option>
     <option> </option>
     <option>Fische (Tan)</option>
     <option>Froesche (Tan)</option>
     <option>Leoparden (Tan)</option>
     <option>Schlangen (Tan)</option>
     <option>-</option>
     <option>Fische (Bra)</option>
     <option>Froesche (Bra)</option>
     <option>Schlangen (Bra)</option>
     <option> </option>
     <option>Fische (Can)</option>
     <option>Froesche (Can)</option>
     <option>Schlangen (Can)</option>
     <option>Kanadaluchse (Can)</option>
     <option> </option>
     <option>Alligatoren (USA)</option>
     <option>Fische (USA)</option>
     <option>Froesche (USA)</option>
     <option>Puma (USA)</option>
     <option>Schlangen (USA)</option>
     <option>-</option>
     <option>Fische (G)</option>
     <option>Froesche (G)</option>
     <option>Schlangen (G)</option>
     <option> </option>
     <option>Fische (I)</option>
     <option>Froesche (I)</option>
     <option>Schlangen (I)</option>
     <option>Krokodile (I)</option>
     <option> </option>
     <option>Fische (S)</option>
     <option>Froesche (S)</option>
     <option>Pardelluchse (S)</option>
     <option>Schlangen (S)</option>
   </select>
 </div>

Default content

Click Me (sample.html)
Click Me (sample2.html)

HTML Source:

 <div id="dynarea">
   <p>Default content</p>
 </div>
 <div class="JSDynContent" datasrc="sample.html,dynarea">Click Me (sample.html)</div>
 <div class="JSDynContent" datasrc="sample2.html,dynarea">Click Me (sample2.html)</div>

Controls which create lists as Dynamic Table of Contents (TOC), a List of Abbreviations (LOA) or a List of References (LOR)

Dynamic Table Of Contents

Header 1

Text, Text, Text

Header 1.1

Text, Text, Text

Header 2

Text, Text, Text

Header 2.1

Text, Text, Text

Header 2.1.1

Text, Text, Text

Header 2.1.2

Text, Text, Text

Header 2.2

Text, Text, Text

Header 3

Text, Text, Text

HTML Source:

     <h3>Dynamic Table Of Contents</h3>
     <div class="JSDynListToc"> </div>
     <h2>Header 1</h2>
     <p>Text, Text, Text</p>
     <h3>Header 1.1</h3>
     <p>Text, Text, Text</p>
     <h2>Header 2</h2>
     <p>Text, Text, Text</p>
     <h3>Header 2.1</h3>
     <p>Text, Text, Text</p>
     <h4>Header 2.1.1</h4>
     <p>Text, Text, Text</p>
     <h4>Header 2.1.2</h4>
     <p>Text, Text, Text</p>
     <h3>Header 2.2</h3>
     <p>Text, Text, Text</p>
     <h2>Header 3</h2>
     <p>Text, Text, Text</p>

Abbreviation Lists

Control which creates a list of abbreviations based on surrounding abbr tags. Please note that the abbreviations must be children of the parent node where the Div tag JSDynListAbbr is placed. So you can have separate Abbreviation lists in the same document. Unfortunatly the abbr tag does not work in IE6, but should work in IE7 onwards.

This is a text with Abbreviations (Abbr) which can be collected at any place (AP) being a children of the parent of the JSDynListAbbr Div tag.

Other abbreviations might be Dynamic Table of Contents (TOC), a List of Abbreviations (LOA) or a List of References (LOR)

HTML Source:

     <p>This is a text with <abbr>Abbreviations (Abbr)</abbr> which
     can be collected at <abbr>any place (AP)</abbr> being a
     children of the parent of the JSDynListAbbr Div tag.</p>
   
   <p> Other abbreviations might be <abbr>Dynamic Table of Contents
         (TOC)</abbr>, a <abbr>List of Abbreviations (LOA)</abbr> or a
       <abbr>List of References (LOR)</abbr></p>
     
     <div class="JSDynListAbbr"> </div>

Similar to the abbreviation lists a definition list will be declared inside dfn tags.

Einige Beispieldefinitionen

Hier ist ein Absatz mit Definitionen. Definition - beschreibt einen Begriff in eindeutiger Weise. Ein Abkuerzungsverzeichnis - eine Liste mit im Text verwendeten Abkuerzungen - wird am Anfang oder Ende eines Artikels platziert um dem Leser eine Hilfe beim Verstaendnis des Textes zu bieten.

Definitionen

HTML Source:

     <h2>Einige Beispieldefinitionen</h2>

     <p>Hier ist ein Absatz mit Definitionen. <dfn>Definition -
     beschreibt einen Begriff in eindeutiger Weise</dfn>. Ein
     <dfn>Abkuerzungsverzeichnis - eine Liste mit im Text verwendeten
     Abkuerzungen</dfn> - wird am Anfang oder Ende eines Artikels
     platziert um dem Leser eine Hilfe beim Verstaendnis des Textes
     zu bieten.</p>

   <h2>Definitionen</h2>
   
   <div class="JSDynListDfn"> </div>

With this component we can number exteranl links as a list of references. For more examples see please the [German Wikipedia]. We now use the Wikipedia link a second time to see if it got's the same number. We use now the [German Wikipedia]. it follows a link on the Laurem-Lipsum page [Laurem page] and a link on the jsComponents page [jsComponents - website] an an internal one which should be not used Link. Again the laurem link: [Laurem page]

HTML Source:

   <p>With this component we can number exteranl links as a list of
   references. For more examples see please the [<a
   href="http://de.wikipedia.org">German Wikipedia</a>]. We now use
   the Wikipedia link a second time to see if it got's the same
   number. We use now the [<a href="http://de.wikipedia.org">German
   Wikipedia</a>]. it follows a link on the Laurem-Lipsum page [<a
   href="http://www.lipsum.com">Laurem page</a>] and a link on the
   jsComponents page [<a href="http://www.dgroth.de">jsComponents -
   website</a>] an an internal one which should be not used <a
   href="/">Link</a>. Again the laurem link: [<a
   href="http://www.lipsum.com">Laurem page</a>]</p> 

   <div class="JSDynListLink"> </div>

List of citations

Ein Text mit Zitaten von Groth et al. [Groth98] oder mit Zitaten von Mueller [Mueller99] ist eine tolle Sache. Noch schoener sind aber Texte mehrerer Autoren wenn diese richtige zitiert sind [Guttenbg2010,Ghostwriter2000]. Zitate konnen natuerlich wiederholt zitiert werden [Groth98] und bekommen deswegen keine neue Nummer!

  1. Groth, Detlef; Otto, Fritz: Der Zitate-Schatz. 1998, Magischer Verlag.
  2. Mueller, Hans: Die Zitat-Verwendung im 21. Jahrhundert. 1999, Zukunftsverlag.
  3. Hans Otto zu Guttenbergisch: Zitieren ist eine Kunst. 2010, Salami-Taktik-Verlag.
  4. N.N. Ghostwriter: Wie ich eine Doktorarbeit schrieb. 2000, Politikkram-Verlag.

HTML Source:

     <p>Ein Text mit Zitaten von Groth et al. [<cite>Groth98</cite>]
     oder mit Zitaten von Mueller [<cite>Mueller99</cite>] ist eine
     tolle Sache. Noch schoener sind aber Texte mehrerer Autoren
     wenn diese richtige zitiert sind
     [<cite>Guttenbg2010,Ghostwriter2000</cite>]. Zitate konnen
     natuerlich wiederholt zitiert werden [<cite>Groth98</cite>] und
     bekommen deswegen keine neue Nummer!</p>

   <div class="JSDynListRef">
     <ol>
       <li id="Groth98">Groth, Detlef; Otto, Fritz: Der Zitate-Schatz. <i>1998</i>, Magischer Verlag.</li>
       <li id="Mueller99">Mueller, Hans: Die Zitat-Verwendung im 21. Jahrhundert. <i>1999</i>, Zukunftsverlag.</li>
       <li id="Guttenbg2010">Hans Otto zu Guttenbergisch: Zitieren ist eine Kunst. <i>2010</i>, Salami-Taktik-Verlag.</li>
       <li id="Ghostwriter2000">N.N. Ghostwriter: Wie ich eine Doktorarbeit schrieb. <i>2000</i>, Politikkram-Verlag.</li>
     </ol>
   </div>
 </div>

In order to use the JSRegionChart you have to include script file:

 <script type="text/javascript" src="jsc/extra/jsRegionCharts.js"></script>
c5324b95.abi 1 713
c5324b20.abi 10 725
c5324b61.abi28540
c5324b31.abi 28 895
c5324b12.abi29 513

HTML Source:

     <div class="JSRegionChart" style="font: small Verdana">
       <table cellpadding="3px">
         <tr regionColor="#ff6"><td>c5324b95.abi</td><td>      1 </td><td>  713</td></tr>
         <tr><td>c5324b20.abi</td><td>     10</td><td>   725</td></tr>
         <tr><td>c5324b61.abi</td><td>28</td><td>540</td></tr>
         <tr><td>c5324b31.abi</td><td>     28</td><td>   895</td></tr>
         <tr regionColor="#6ff"><td>c5324b12.abi</td><td>29</td><td>   513</td></tr>
       </table>
     </div>

In order to use the JSBarChart you have to include script file:

 <script type="text/javascript" src="jsc/extra/jsBarCharts.js"></script>
c5324b95.abi 1
c5324b20.abi 10
c5324b61.abi28
c5324b31.abi 20
c5324b12.abi29

HTML Source:

     <div class="JSBarChart" style="font: small Verdana">
       <table cellpadding="3px">
         <tr regionColor="#ff6"><td>c5324b95.abi</td><td>      1 </td></tr>
         <tr regionColor="#ff3"><td>c5324b20.abi</td><td>     10</td></tr>
         <tr><td>c5324b61.abi</td><td>28</td></tr>
         <tr><td>c5324b31.abi</td><td>     20</td></tr>
         <tr regionColor="#6ff"><td>c5324b12.abi</td><td>29</td></tr>
       </table>
     </div>

In order to use the JSDebugger you have to include its script files:

 
  <script type="text/javascript" src="jsc/extra/jsDeebugger.js"></script> 
  <script type="text/javascript" src="jsc/extra/jsDebuggerTools.js"></script> 
  <link rel="stylesheet" type="text/css" href="jsc/extra/jsDebugger.css" />

HTML Source:

     <div class="JSDebugger"> </div>
  • 2011-07-05 new controls JSTableEdit, JSTableFilter
    • JSTableEdit: a control which can be used to make tables editable, hidden input fields are used for submission of form data
    • SJSTableFilter: control to filter tables based on certain properties single for each column
    • See Demo->Tables
  • 2011-06-05 fix for email-form, code compression, jsdnylists documented
    • fix for email field
    • See Demo->More->Forms
    • moderate code compression of JS-code size reduced from 51kb to 35 kb
    • dynamic lists for abbreviations, defintions, citations, table of contents etc fixed and documented
    • See Demo->More->Dynamic Lists
  • 2011-05-26 Various fixes for IE for Scrollable table widget!!!
    • JSTableScrollable: Crossbrowser scrollable table widget!! improved style and fixes for different column widths
    • Tested in FF3, FF4, IE6, IE8, Opera 10, Chrome 11, Safari 5!!!
    • Can be nested with JSTableSort and JStableStripe
    • See Demo->Table Controls
  • 2011-05-24 Scrollable table widget!!! Additional form controls for floats, integers and Email
    • JSTableScrollable: Crossbrowser scrollable table widget!! Not perfect styled but working in FF3, FF4, IE6, IE8, Opera 10, Chrome 11, Safari 5!!!
    • See Demo->Table Controls
    • JSFormInputInteger, JSFormInputIntegers, ... additional form controls for validated user input.
    • See Demo->Forms
  • 2011-05-20 Additional three combined select boxes
    • JSSelectsCombined: Two combined select-boxes where the second changes it's content based on the selection of the first. Crossbrowser Fix
    • JSSelectsCombined: Three combined select-boxes where the second changes it's content based on the selection of the first. And the third changes it's content based on the selection of first and second.
    • See Demo->Forms
  • 2011-05-13 Additional form component
    • JSSelectsCombined: Two combined select-boxes where the second changes it's content based on the selection of the first.
    • See Demo->Forms
  • 2008-07-01 minor fixes, JSCollapse-changes
    • Due to feedback of Robert Westenkirchner www.LinkMatrix.de changes in JSCollapse
    • Caution: incompatibility for JSCollapse with ArrowDown-images, but now with easier declaration
    • Putting images into img ...
    • Adding graphics from Robert Westenkirchner
  • 2008-04-20 dynamic content added, simpler tooltips
    • JSDynContent: loading dynamic content into certain area
    • JSInlineTooltip: declaring tooltips inline inside the element
  • 2007-03-08 extra-controls, dynamic trees, bugfixes
    • JSTree: loading nodes at runtime on user request
    • Extra: examples for custom components JSDebugger, JSBarChart, JSRegionChart
    • Bugfixes: fixing problems if creating div-tags at runtime
  • 2006-12-08 Improvements
    • JSCollapse: more examples
    • JSTabBox: tabs with numbers
  • 2006-11-13 First public release of JSComponents

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