<div class="JSTree"> ... </div>
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.
<!DOCTYPE html> <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 following controls are supported
Unfortunatly the articles are in german only.
<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> |
<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="includes/inc-list.xhtml"></div>Dynamic Folder</li> <li class="include"><div datasrc="includes/inc-nested-list.xhtml"></div>Dynamic Folder 2</li> <li class="include"><div datasrc="includes/inc-nested-nested-list.xhtml"></div>Dynamic Folder 3</li> </ul> </div> |
HTML Source:
|
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> |
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 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 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.
<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> |
<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> |
Integers | Strings | Floats | Strings 2 | Dates | No Sorting |
---|---|---|---|---|---|
12 | string a | 1.2 | string 1 | 2006/10/22 | Rubbish 1 |
14 | string b | 1.1 | string 2 | 2006/11/22 | Rubbish 2 |
1 | string c | 0.1 | string 3 | 2006/11/20 | A |
7 | string c2 | 0.711 | string 3b | 1999/03/20 | A 21 |
23 | string d | 0.24 | string 4 | 2006/11/19 | 123 1 |
<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> |
Berlin | Hamburg | München |
---|---|---|
Miljöh | Kiez | Bierdampf |
Buletten | Frikadellen | Fleischpflanzerl |
Buletten | Frikadellen | Fleischpflanzerl |
Buletten | Frikadellen | Fleischpflanzerl |
<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> |
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 |
<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> |
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 |
<div class="JSTableStripe"> <div class="JSTableScrollable" style="height:200px"> <table border="0" cellpadding="0" cellspacing="0" width="700"> <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> |
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 |
<div class="JSTableStripe"> <div class="JSTableSort"> <div class="JSTableScrollable" style="height:200px"> <table border="0" cellpadding="0" cellspacing="0" width="900"> <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:
kcol | lcol | mcol | ncol | ocol |
---|---|---|---|---|
Agonet | Agunet | Agynet | Agxnet | Agznet |
Ahonet | Ahunet | Ahynet | Ahxnet | Ahznet |
Aionet | Aiunet | Aiynet | Aixnet | Aiznet |
Ajonet | Ajunet | Ajynet | Ajxnet | Ajznet |
Akonet | Akunet | Akynet | Akxnet | Akznet |
Alonet | Alunet | Alynet | Alxnet | Alznet |
Bgonet | Bgunet | Bgynet | Bgxnet | Bgznet |
Bhonet | Bhunet | Bhynet | Bhxnet | Bhznet |
Bionet | Biunet | Biynet | Bixnet | Biznet |
Bjonet | Bjunet | Bjynet | Bjxnet | Bjznet |
Bkonet | Bkunet | Bkynet | Bkxnet | Bkznet |
Blonet | Blunet | Blynet | Blxnet | Blznet |
Cgonet | Cgunet | Cgynet | Cgxnet | Cgznet |
Chonet | Chunet | Chynet | Chxnet | Chznet |
Cionet | Ciunet | Ciynet | Cixnet | Ciznet |
Cjonet | Cjunet | Cjynet | Cjxnet | Cjznet |
Ckonet | Ckunet | Ckynet | Ckxnet | Ckznet |
Clonet | Clunet | Clynet | Clxnet | Clznet |
Dgonet | Dgunet | Dgynet | Dgxnet | Dgznet |
Dhonet | Dhunet | Dhynet | Dhxnet | Dhznet |
Dionet | Diunet | Diynet | Dixnet | Diznet |
Djonet | Djunet | Djynet | Djxnet | Djznet |
Dkonet | Dkunet | Dkynet | Dkxnet | Dkznet |
Dlonet | Dlunet | Dlynet | Dlxnet | Dlznet |
Egonet | Egunet | Egynet | Egxnet | Egznet |
Ehonet | Ehunet | Ehynet | Ehxnet | Ehznet |
Eionet | Eiunet | Eiynet | Eixnet | Eiznet |
Ejonet | Ejunet | Ejynet | Ejxnet | Ejznet |
Ekonet | Ekunet | Ekynet | Ekxnet | Ekznet |
Elonet | Elunet | Elynet | Elxnet | Elznet |
Fgonet | Fgunet | Fgynet | Fgxnet | Fgznet |
Fhonet | Fhunet | Fhynet | Fhxnet | Fhznet |
Fionet | Fiunet | Fiynet | Fixnet | Fiznet |
Fjonet | Fjunet | Fjynet | Fjxnet | Fjznet |
Fkonet | Fkunet | Fkynet | Fkxnet | Fkznet |
Flonet | Flunet | Flynet | Flxnet | Flznet |
Ggonet | Ggunet | Ggynet | Ggxnet | Ggznet |
Ghonet | Ghunet | Ghynet | Ghxnet | Ghznet |
Gionet | Giunet | Giynet | Gixnet | Giznet |
Gjonet | Gjunet | Gjynet | Gjxnet | Gjznet |
Gkonet | Gkunet | Gkynet | Gkxnet | Gkznet |
Glonet | Glunet | Glynet | Glxnet | Glznet |
Hgonet | Hgunet | Hgynet | Hgxnet | Hgznet |
Hhonet | Hhunet | Hhynet | Hhxnet | Hhznet |
Hionet | Hiunet | Hiynet | Hixnet | Hiznet |
Hjonet | Hjunet | Hjynet | Hjxnet | Hjznet |
Hkonet | Hkunet | Hkynet | Hkxnet | Hkznet |
Hlonet | Hlunet | Hlynet | Hlxnet | Hlznet |
Igonet | Igunet | Igynet | Igxnet | Igznet |
Ihonet | Ihunet | Ihynet | Ihxnet | Ihznet |
Iionet | Iiunet | Iiynet | Iixnet | Iiznet |
Ijonet | Ijunet | Ijynet | Ijxnet | Ijznet |
Ikonet | Ikunet | Ikynet | Ikxnet | Ikznet |
Ilonet | Ilunet | Ilynet | Ilxnet | Ilznet |
Jgonet | Jgunet | Jgynet | Jgxnet | Jgznet |
Jhonet | Jhunet | Jhynet | Jhxnet | Jhznet |
Jionet | Jiunet | Jiynet | Jixnet | Jiznet |
Jjonet | Jjunet | Jjynet | Jjxnet | Jjznet |
Jkonet | Jkunet | Jkynet | Jkxnet | Jkznet |
Jlonet | Jlunet | Jlynet | Jlxnet | Jlznet |
Kgonet | Kgunet | Kgynet | Kgxnet | Kgznet |
Khonet | Khunet | Khynet | Khxnet | Khznet |
Kionet | Kiunet | Kiynet | Kixnet | Kiznet |
Kjonet | Kjunet | Kjynet | Kjxnet | Kjznet |
Kkonet | Kkunet | Kkynet | Kkxnet | Kkznet |
Klonet | Klunet | Klynet | Klxnet | Klznet |
Lgonet | Lgunet | Lgynet | Lgxnet | Lgznet |
Lhonet | Lhunet | Lhynet | Lhxnet | Lhznet |
Lionet | Liunet | Liynet | Lixnet | Liznet |
Ljonet | Ljunet | Ljynet | Ljxnet | Ljznet |
Lkonet | Lkunet | Lkynet | Lkxnet | Lkznet |
Llonet | Llunet | Llynet | Llxnet | Llznet |
Mgonet | Mgunet | Mgynet | Mgxnet | Mgznet |
Mhonet | Mhunet | Mhynet | Mhxnet | Mhznet |
Mionet | Miunet | Miynet | Mixnet | Miznet |
Mjonet | Mjunet | Mjynet | Mjxnet | Mjznet |
Mkonet | Mkunet | Mkynet | Mkxnet | Mkznet |
Mlonet | Mlunet | Mlynet | Mlxnet | Mlznet |
Ngonet | Ngunet | Ngynet | Ngxnet | Ngznet |
Nhonet | Nhunet | Nhynet | Nhxnet | Nhznet |
Nionet | Niunet | Niynet | Nixnet | Niznet |
Njonet | Njunet | Njynet | Njxnet | Njznet |
Nkonet | Nkunet | Nkynet | Nkxnet | Nkznet |
Nlonet | Nlunet | Nlynet | Nlxnet | Nlznet |
Ogonet | Ogunet | Ogynet | Ogxnet | Ogznet |
Ohonet | Ohunet | Ohynet | Ohxnet | Ohznet |
Oionet | Oiunet | Oiynet | Oixnet | Oiznet |
Ojonet | Ojunet | Ojynet | Ojxnet | Ojznet |
Okonet | Okunet | Okynet | Okxnet | Okznet |
Olonet | Olunet | Olynet | Olxnet | Olznet |
Pgonet | Pgunet | Pgynet | Pgxnet | Pgznet |
Phonet | Phunet | Phynet | Phxnet | Phznet |
Pionet | Piunet | Piynet | Pixnet | Piznet |
Pjonet | Pjunet | Pjynet | Pjxnet | Pjznet |
Pkonet | Pkunet | Pkynet | Pkxnet | Pkznet |
Plonet | Plunet | Plynet | Plxnet | Plznet |
Qgonet | Qgunet | Qgynet | Qgxnet | Qgznet |
Qhonet | Qhunet | Qhynet | Qhxnet | Qhznet |
Qionet | Qiunet | Qiynet | Qixnet | Qiznet |
Qjonet | Qjunet | Qjynet | Qjxnet | Qjznet |
Qkonet | Qkunet | Qkynet | Qkxnet | Qkznet |
Qlonet | Qlunet | Qlynet | Qlxnet | Qlznet |
Rgonet | Rgunet | Rgynet | Rgxnet | Rgznet |
Rhonet | Rhunet | Rhynet | Rhxnet | Rhznet |
Rionet | Riunet | Riynet | Rixnet | Riznet |
Rjonet | Rjunet | Rjynet | Rjxnet | Rjznet |
Rkonet | Rkunet | Rkynet | Rkxnet | Rkznet |
Rlonet | Rlunet | Rlynet | Rlxnet | Rlznet |
Sgonet | Sgunet | Sgynet | Sgxnet | Sgznet |
Shonet | Shunet | Shynet | Shxnet | Shznet |
Sionet | Siunet | Siynet | Sixnet | Siznet |
Sjonet | Sjunet | Sjynet | Sjxnet | Sjznet |
Skonet | Skunet | Skynet | Skxnet | Skznet |
Slonet | Slunet | Slynet | Slxnet | Slznet |
Tgonet | Tgunet | Tgynet | Tgxnet | Tgznet |
Thonet | Thunet | Thynet | Thxnet | Thznet |
Tionet | Tiunet | Tiynet | Tixnet | Tiznet |
Tjonet | Tjunet | Tjynet | Tjxnet | Tjznet |
Tkonet | Tkunet | Tkynet | Tkxnet | Tkznet |
Tlonet | Tlunet | Tlynet | Tlxnet | Tlznet |
<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> |
The table can be searched by normal strings or regular expressions as described in the tab before. Furthermore it should be sortable as well.
kcol | lcol | mcol | ncol | ocol |
---|---|---|---|---|
Agonet | Agunet | Agynet | Agxnet | Agznet |
Ahonet | Ahunet | Ahynet | Ahxnet | Ahznet |
Aionet | Aiunet | Aiynet | Aixnet | Aiznet |
Ajonet | Ajunet | Ajynet | Ajxnet | Ajznet |
Akonet | Akunet | Akynet | Akxnet | Akznet |
Alonet | Alunet | Alynet | Alxnet | Alznet |
Bgonet | Bgunet | Bgynet | Bgxnet | Bgznet |
Bhonet | Bhunet | Bhynet | Bhxnet | Bhznet |
Bionet | Biunet | Biynet | Bixnet | Biznet |
Bjonet | Bjunet | Bjynet | Bjxnet | Bjznet |
Bkonet | Bkunet | Bkynet | Bkxnet | Bkznet |
Blonet | Blunet | Blynet | Blxnet | Blznet |
Cgonet | Cgunet | Cgynet | Cgxnet | Cgznet |
Chonet | Chunet | Chynet | Chxnet | Chznet |
Cionet | Ciunet | Ciynet | Cixnet | Ciznet |
Cjonet | Cjunet | Cjynet | Cjxnet | Cjznet |
Ckonet | Ckunet | Ckynet | Ckxnet | Ckznet |
Clonet | Clunet | Clynet | Clxnet | Clznet |
Dgonet | Dgunet | Dgynet | Dgxnet | Dgznet |
Dhonet | Dhunet | Dhynet | Dhxnet | Dhznet |
Dionet | Diunet | Diynet | Dixnet | Diznet |
Djonet | Djunet | Djynet | Djxnet | Djznet |
Dkonet | Dkunet | Dkynet | Dkxnet | Dkznet |
Dlonet | Dlunet | Dlynet | Dlxnet | Dlznet |
Egonet | Egunet | Egynet | Egxnet | Egznet |
Ehonet | Ehunet | Ehynet | Ehxnet | Ehznet |
Eionet | Eiunet | Eiynet | Eixnet | Eiznet |
Ejonet | Ejunet | Ejynet | Ejxnet | Ejznet |
Ekonet | Ekunet | Ekynet | Ekxnet | Ekznet |
Elonet | Elunet | Elynet | Elxnet | Elznet |
Fgonet | Fgunet | Fgynet | Fgxnet | Fgznet |
Fhonet | Fhunet | Fhynet | Fhxnet | Fhznet |
Fionet | Fiunet | Fiynet | Fixnet | Fiznet |
Fjonet | Fjunet | Fjynet | Fjxnet | Fjznet |
Fkonet | Fkunet | Fkynet | Fkxnet | Fkznet |
Flonet | Flunet | Flynet | Flxnet | Flznet |
Ggonet | Ggunet | Ggynet | Ggxnet | Ggznet |
Ghonet | Ghunet | Ghynet | Ghxnet | Ghznet |
Gionet | Giunet | Giynet | Gixnet | Giznet |
Gjonet | Gjunet | Gjynet | Gjxnet | Gjznet |
Gkonet | Gkunet | Gkynet | Gkxnet | Gkznet |
Glonet | Glunet | Glynet | Glxnet | Glznet |
Hgonet | Hgunet | Hgynet | Hgxnet | Hgznet |
Hhonet | Hhunet | Hhynet | Hhxnet | Hhznet |
Hionet | Hiunet | Hiynet | Hixnet | Hiznet |
Hjonet | Hjunet | Hjynet | Hjxnet | Hjznet |
Hkonet | Hkunet | Hkynet | Hkxnet | Hkznet |
Hlonet | Hlunet | Hlynet | Hlxnet | Hlznet |
Igonet | Igunet | Igynet | Igxnet | Igznet |
Ihonet | Ihunet | Ihynet | Ihxnet | Ihznet |
Iionet | Iiunet | Iiynet | Iixnet | Iiznet |
Ijonet | Ijunet | Ijynet | Ijxnet | Ijznet |
Ikonet | Ikunet | Ikynet | Ikxnet | Ikznet |
Ilonet | Ilunet | Ilynet | Ilxnet | Ilznet |
Jgonet | Jgunet | Jgynet | Jgxnet | Jgznet |
Jhonet | Jhunet | Jhynet | Jhxnet | Jhznet |
Jionet | Jiunet | Jiynet | Jixnet | Jiznet |
Jjonet | Jjunet | Jjynet | Jjxnet | Jjznet |
Jkonet | Jkunet | Jkynet | Jkxnet | Jkznet |
Jlonet | Jlunet | Jlynet | Jlxnet | Jlznet |
Kgonet | Kgunet | Kgynet | Kgxnet | Kgznet |
Khonet | Khunet | Khynet | Khxnet | Khznet |
Kionet | Kiunet | Kiynet | Kixnet | Kiznet |
Kjonet | Kjunet | Kjynet | Kjxnet | Kjznet |
Kkonet | Kkunet | Kkynet | Kkxnet | Kkznet |
Klonet | Klunet | Klynet | Klxnet | Klznet |
Lgonet | Lgunet | Lgynet | Lgxnet | Lgznet |
Lhonet | Lhunet | Lhynet | Lhxnet | Lhznet |
Lionet | Liunet | Liynet | Lixnet | Liznet |
Ljonet | Ljunet | Ljynet | Ljxnet | Ljznet |
Lkonet | Lkunet | Lkynet | Lkxnet | Lkznet |
Llonet | Llunet | Llynet | Llxnet | Llznet |
Mgonet | Mgunet | Mgynet | Mgxnet | Mgznet |
Mhonet | Mhunet | Mhynet | Mhxnet | Mhznet |
Mionet | Miunet | Miynet | Mixnet | Miznet |
Mjonet | Mjunet | Mjynet | Mjxnet | Mjznet |
Mkonet | Mkunet | Mkynet | Mkxnet | Mkznet |
Mlonet | Mlunet | Mlynet | Mlxnet | Mlznet |
Ngonet | Ngunet | Ngynet | Ngxnet | Ngznet |
Nhonet | Nhunet | Nhynet | Nhxnet | Nhznet |
Nionet | Niunet | Niynet | Nixnet | Niznet |
Njonet | Njunet | Njynet | Njxnet | Njznet |
Nkonet | Nkunet | Nkynet | Nkxnet | Nkznet |
Nlonet | Nlunet | Nlynet | Nlxnet | Nlznet |
Ogonet | Ogunet | Ogynet | Ogxnet | Ogznet |
Ohonet | Ohunet | Ohynet | Ohxnet | Ohznet |
Oionet | Oiunet | Oiynet | Oixnet | Oiznet |
Ojonet | Ojunet | Ojynet | Ojxnet | Ojznet |
Okonet | Okunet | Okynet | Okxnet | Okznet |
Olonet | Olunet | Olynet | Olxnet | Olznet |
Pgonet | Pgunet | Pgynet | Pgxnet | Pgznet |
Phonet | Phunet | Phynet | Phxnet | Phznet |
Pionet | Piunet | Piynet | Pixnet | Piznet |
Pjonet | Pjunet | Pjynet | Pjxnet | Pjznet |
Pkonet | Pkunet | Pkynet | Pkxnet | Pkznet |
Plonet | Plunet | Plynet | Plxnet | Plznet |
Qgonet | Qgunet | Qgynet | Qgxnet | Qgznet |
Qhonet | Qhunet | Qhynet | Qhxnet | Qhznet |
Qionet | Qiunet | Qiynet | Qixnet | Qiznet |
Qjonet | Qjunet | Qjynet | Qjxnet | Qjznet |
Qkonet | Qkunet | Qkynet | Qkxnet | Qkznet |
Qlonet | Qlunet | Qlynet | Qlxnet | Qlznet |
Rgonet | Rgunet | Rgynet | Rgxnet | Rgznet |
Rhonet | Rhunet | Rhynet | Rhxnet | Rhznet |
Rionet | Riunet | Riynet | Rixnet | Riznet |
Rjonet | Rjunet | Rjynet | Rjxnet | Rjznet |
Rkonet | Rkunet | Rkynet | Rkxnet | Rkznet |
Rlonet | Rlunet | Rlynet | Rlxnet | Rlznet |
Sgonet | Sgunet | Sgynet | Sgxnet | Sgznet |
Shonet | Shunet | Shynet | Shxnet | Shznet |
Sionet | Siunet | Siynet | Sixnet | Siznet |
Sjonet | Sjunet | Sjynet | Sjxnet | Sjznet |
Skonet | Skunet | Skynet | Skxnet | Skznet |
Slonet | Slunet | Slynet | Slxnet | Slznet |
Tgonet | Tgunet | Tgynet | Tgxnet | Tgznet |
Thonet | Thunet | Thynet | Thxnet | Thznet |
Tionet | Tiunet | Tiynet | Tixnet | Tiznet |
Tjonet | Tjunet | Tjynet | Tjxnet | Tjznet |
Tkonet | Tkunet | Tkynet | Tkxnet | Tkznet |
Tlonet | Tlunet | Tlynet | Tlxnet | Tlznet |
<div class="JSTableFilter"> <div class="JSTableSort"> <table border="1px" cellpadding="3px" cellspacing="0px"> <thead> <tr><th class="ignore SortString">kcol</th><th class="SortString">lcol</th><th class="SortString">mcol</th><th class="SortString">ncol</th><th class="SortString">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> </div> |
A table which can be loaded from a tab file. Please note the
datasrc attribute in the target contains information about the sort
mode in this case. You need this only if you need sorting. For some
browser the security setting did not allow loading of files if the
html/tab files are stored locally. With Chrome you can achieve this by using the start parameter: google --allow-file-access-from-files
<div class="JSAjaxTable" targetid ="tableid" datasrc="data/students-min.tab"> </div> <div id="tableid" class="JSTableSort" datasrc="Sorts: SortString SortString SortString SortNumber SortNumber SortNumber SortNumber"> </div> |
If the table should be filtered as well you have to assign the filter attributes as well. See the code below.
<div class="JSTableSortBlue"> <div class="JSAjaxTable" targetid ="tableid2" datasrc="data/students-min.tab"> </div> <div id="tableid2" class="JSTableSort JSTableFilter" datasrc="Sorts: SortString SortString SortString SortNumber SortNumber SortNumber SortNumber||Filters: ignore filter filter filter ignore ignore ignore"> </div> </div> |
If the table should be scrolled as well you have you add the JSTableScrollable class as well.
<div class="JSTableSortBlue"> <div class="JSAjaxTable" targetid ="tableid3" datasrc="data/students-min.tab"> </div> <div id="tableid3" class="JSTableSort JSTableFilter JSTableScrollable" datasrc="Sorts: SortString SortString SortString SortNumber SortNumber SortNumber SortNumber||Filters: ignore filter filter filter ignore ignore ignore||Widths: 120 200 200 200 100 100 120||Height: 400"> </div> </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.
<form action="" method="post"> <div class="JSTableEdit"> <table> <thead><tr><th>n</th><th width="200">Nachname</th><th width="200">Vorname</th><th width="200">E-Mail</th><th width="200">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> |
<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> |
Some more text
Tip 3: Enter Me!Some more text
Tip 4: Text2 with outer formattingLorem 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.
<div class="JSToolTip" data="includes/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
<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
<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> |
first text first text first text first text
second text second text second text second text
third text third text third text third text
<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> |
Please note the plural-"s". Several entries are separated by komma. Floats are expressed with the dot symbol 12.1 for instance.
<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 /> |
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 ...
<div class="JSSelectsCombined"> <select name="Country0" size="1"> <option> </option> <option>Griechenland</option> <option>Italien</option> <option>Sizilien</option> <option>Spanien</option> </select> <select name="Animals0" 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> |
With two boxes it is also possible to preselect values like so:
<div class="JSSelectsCombined"> <select name="Country01" size="1"> <option> </option> <option>Griechenland</option> <option>Italien</option> <option selected="selected">Sizilien</option> <option>Spanien</option> </select> <select name="Animals01" 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 selected="selected">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 reflected by empty option tags and option tags containing a minus symbol. If this is to tricky for you see variant II below. Preselections still needs to be implemented for this typ of boxes. However you can use the JSSelectsCombined2 version to do this if required. See below on this page.
<div class="JSSelectsCombined"> <select name="Continent1" size="1"> <option> </option> <option>Afrika</option> <option>Amerika</option> <option>Europa</option> </select> <select name="Country1" 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="Animals1" 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> |
As representing the hierarchy using empty or minus filled option tags is somewhat tricky, there is an other possiblity to defined combined select boxes. The second variant uses an external nested list to fill the select boxes. This is especially useful if you need the same select box combination with the same type of data several times again on the same webpage. I had recently an extended example with several thousand entries where different combinations should be slected various times differentially ... Works like a charm.
Note, it is here important to take the right id for the selectbox div tag and the data list div tag. Here it is 'country1' and 'country2' for the div tags and 'countrydata' contains the nested data list to be used for filling of the select boxes.
Please note the constant width of the select boxes using styles
Of course we hide the data using display:none
<h3>All three with default values</h3> <div class="JSSelectsCombined2" id="country1"> <select name="Continent2" length="200"> <option selected="selected">Europa</option> </select> <select name="Country2"> <option selected="selected">Italien</option> </select> <select name="Animals2"> <option selected="selected">Schlangen (I)</option> </select> </div> <hr /> <h3>Only the first is pre selected</h3> <p>Please note the constant width of the select boxes using styles</p> <div class="JSSelectsCombined2" id="country2"> <select name="Continent3" style="width:200px"> <option>Europa</option> </select> <select name="Country3" style="width:200px"> <option> </option> </select> <select name="Animals3" style="width:200px"> <option> </option> </select> </div> <p>Of course we hide the data using display:none</p> <div id="countrydata" style="display:none"> <ul> <li>Afrika <ul> <li>Aegypten <ul> <li>Fische (Ag)</li> <li>Froesche (Ag)</li> <li>Schlangen (Ag)</li> </ul> </li> <li>Algerien <ul> <li>Fische (Alg)</li> <li>Froesche (Alg)</li> <li>Schlangen (Alg)</li> <li>Krokodile (Alg)</li> </ul> </li> <li>Tanzania <ul> <li>Fische (Tan)</li> <li>Froesche (Tan)</li> <li>Leoparden (Tan)</li> <li>Schlangen (Tan)</li> </ul> </li> </ul> </li> <li>Amerika <ul> <li>Brazilien <ul> <li>Fische (Bra)</li> <li>Froesche (Bra)</li> <li>Schlangen (Bra)</li> </ul> </li> <li>Kanada <ul> <li>Fische (Can)</li> <li>Froesche (Can)</li> <li>Schlangen (Can)</li> <li>Kanadaluchse (Can)</li> </ul> </li> <li>USA <ul> <li>Alligatoren (USA)</li> <li>Fische (USA)</li> <li>Froesche (USA)</li> <li>Puma (USA)</li> <li>Schlangen (USA)</li> </ul> </li> </ul> </li> <li>Asien <ul> <li>China<ul><li>None</li></ul></li> <li>Japan<ul><li>None</li></ul></li> </ul> </li> <li>Europa <ul> <li>Griechenland <ul> <li>Fische (G)</li> <li>Froesche (G)</li> <li>Schlangen (G)</li> </ul> </li> <li>Italien <ul> <li>Fische (I)</li> <li>Froesche (I)</li> <li>Schlangen (I)</li> <li>Krokodile (I)</li> </ul> </li> <li>Spanien <ul> <li>Fische (S)</li> <li>Froesche (S)</li> <li>Pardelluchse (S)</li> <li>Schlangen (S)</li> </ul> </li> </ul> </li> <li>Australien <ul> <li>Australien</il> </ul> </li> </ul> </div> |
Please note the constant width of the select boxes using styles
Of course we hide the data using display:none
<div class="JSSelectCombinedMover"> <div class="JSSelectsCombined2" id="country4"> <select name="Continent4" style="width:200px"> <option selected="selected">Europa</option> </select> <select name="Country4" style="width:200px"> <option selected="selected">Spanien</option> </select> <select name="Animals4" style="width:200px"> <option selected="selected">Pardelluchse (S)</option> </select> </div> <div class="JSSelectsCombined2" id="country5"> <select name="Continent5" style="width:200px"> <option selected="selected">Afrika</option> </select> <select name="Country5" style="width:200px"> <option selected="selected">Aegypten</option> </select> <select name="Animals5" style="width:200px"> <option selected="selected">Froesche (Ag)</option> </select> </div> <div class="JSSelectsCombined2" id="country6"> <select name="Continent6" style="width:200px"> <option selected="selected">Amerika</option> </select> <select name="Country6" style="width:200px"> <option selected="selected" >Brazilien</option> </select> <select name="Animals6" style="width:200px"> <option selected="selected">Schlangen (Bra)</option> </select> </div> </div> |
Default content
<div id="dynarea"> <p>Default content</p> </div> <div class="JSDynContent" datasrc="includes/sample.html,dynarea">Click Me (sample.html)</div> <div class="JSDynContent" datasrc="includes/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)
Text, Text, Text
Text, Text, Text
Text, Text, Text
Text, Text, Text
Text, Text, Text
Text, Text, Text
Text, Text, Text
Text, Text, Text
<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> |
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)
<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.
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.
<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]
<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> |
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!
<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.abi | 28 | 540 |
c5324b31.abi | 28 | 895 |
c5324b12.abi | 29 | 513 |
<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.abi | 28 |
c5324b31.abi | 20 |
c5324b12.abi | 29 |
<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/jsDebugger.js"></script> <script type="text/javascript" src="jsc/extra/jsDebuggerTools.js"></script> <link rel="stylesheet" type="text/css" href="jsc/extra/jsDebugger.css" />
<div class="JSDebugger"> </div> |
Highlighting of certain rows based on their cell values is easy to acomplish with a plugin. As there are very personal reasons why you would like to highlight a certain row, you have to write the plugin yourself and add the js-code in the header of your html files or in a separate js-file which is loaded in the header. The classname must start with JSExtra!
Let's include a the Plugin-file jsExtraMTableHighlighter:
<script type="text/javascript" src="jsc/extra/jsExtraMTableHighlighter.js"></script>
This file is as well included in the file release.zip. If you are writing your function you should know, that your function get's the div-tag which contains your table as an argument. And here is the resulting js-code which hilights good students in English and Japanese:
// file extra/jsExtraMTableHighlighter.js // your self written plugin function JSExtraMTableHighlighter (div) { var table = div.getElementsByTagName("table")[0]; var tbody = table.getElementsByTagName("tbody")[0]; var trs=tbody.getElementsByTagName("tr"); for (var i = 0;i<trs.length;i++) { var tds=trs.item(i).getElementsByTagName("td"); if (tds.item(1).innerHTML==tds.item(4).innerHTML && tds.item(1).innerHTML == tds.item(5).innerHTML) { // not used here, just an example for a second color for (var j =0;j<tds.length;j++) { tds.item(j).style.backgroundColor="#99cc99"; } } else if (parseInt(tds.item(4).innerHTML) > 70 && parseInt(tds.item(5).innerHTML) > 70) { for (var j =0;j<tds.length;j++) { tds.item(j).style.backgroundColor="#99cccc"; } } else { // default is white for (var j =0;j<tds.length;j++) { tds.item(j).style.backgroundColor="#ffffff"; } } } }
In order to activate your plugin you have to add the classname JSExtraMTableHighlighter add the end of your class declarations for your div target. See the html-code below which contains the string JSExtraMTableHighlighter
!
<div class="JSAjaxTable" targetid ="tableid5" datasrc="data/students-min.tab"> </div> <div class="JSTableSortBlue"> <div id="tableid5" class="JSTableSort JSTableFilter JSTableScrollable JSExtraMTableHighlighter" datasrc="Sorts: SortString SortString SortString SortNumber SortNumber SortNumber SortNumber||Filters: ignore filter filter filter ignore ignore ignore||Widths: 80 200 200 200 100 100 100||Height: 300"> </div> </div> |
The jsComponents framework has been designed to be easily extendible. The main design issue is that all DIV nodes of a html document are investigated for their class attribute. If such a class attribute exists, and if the classname starts with a JS prefix, a function call JSClassname(div.node) is tried. If such a function exists the appropriate initialisation can be performed. If such a function does not exists, the function call is simply catched and the error ignored.
In Germany we say: Grey is all theory! So let's show an example. The obvious "Hello World". We need a javascript function JSHelloWorld with a default argument, being the div npde which contains a class attribute "JSHelloWorld".
function JSHelloWorld (div) { div.innerHTML="Hello World"; }
That's all. In order to use this component we write an empty div tag with the right class attribute:
<div class="JSHelloWorld">Adios!</div>
Here a working example. Adios disapears, Hello World will appear ... However some imptovements has been still made. I hope you get the point. You can click on the String and it will change it's color.
function JSHelloWorld (element) { element.innerHTML = "Hello World!"; this.changeColor=changeColor; evtAdd(element,"click",this.changeColor); var colors=new Array("red","blue"); var x= 0; function changeColor (evt) { var el=evtGetTarget(evt); idx= x++ % 2; el.style.color=colors[idx]; } }
As it is a small framework there are only some functions to be used by a plugin writer, but as you can see in the demo for many purposes there are enough functions to write complex applications. Here a the functions which can be used by a component writer in a crossbrowser manner. This API is easy to learn ...
As the standard DOM methods are not widly usable with the browsers, you can use for other operations those methods. However some persons prefere more sophisticated and frameworks like the famous jquery. You can also use jsComponents together with jquery. Please note that the philosophy of jsComponents differ to other Javascript frameworks therein, that Javascript and HTML-code are stricly separated. In the HTML code the components are declared using Div-tags with the classnames starting with JS, the implementation is outside in the Javascript files. You should not mix HTML and Javascript to allow easy use of your components. If you need some kind of data you can store those data in a hidden table or list inside. In the Javascript world you see often nested hashes and long Jasvascript arrays for this purpose. Don't write it that way. Imagine that you, if writing a server application for instance have enough to do with the server side programming language as PHP, Perl or Python and so on. You will not like to program in two languages in parallel.
google --allow-file-access-from-files
Copyright 2006-2012, Dr. Detlef Groth, dgroth(at)gmx.de
This work is licensed under a Creative Commons Attribution-NoDerivs 2.0 Germany License.