]> JS Components: Combined Example
jscompontents-logo
graphics: robert westenkirchner www.linkmatrix.de

JSComponents Version 2008-07-11

Valid XHTML 1.1

In order to use the components just download the file release-2008-07-11.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.

If you just would like to use it as html without supporting standards like xhtml you can use: 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <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>
However some validators like Tidy will complain about custom attributes. If you like or need valid xhtml you should use the following preambel: 
  <?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
  [
  <!ATTLIST div 
    datasrc CDATA #IMPLIED
    data CDATA #IMPLIED
    style CDATA #IMPLIED
    current CDATA #IMPLIED>
  <!ATTLIST tr regionColor CDATA #IMPLIED>
  <!ATTLIST img border CDATA #IMPLIED>
  ]>
  <html xmlns="http://www.w3.org/1999/xhtml"
             xml: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:

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

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:

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

Based on css- and javascript-code from Patrick Griffiths and Dan Webb. Adapted and improved to be used inside jsComponents by Detlef Groth.

HTML Source:

<div class="JSMenu">
    <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About ...</a> 
        <ul> 
          <li><a href="#">History ...</a>
            <ul> 
              <li><a href="#">1920-1940</a> </li>
              <li><a href="#">1941-1960</a> </li>
              <li><a href="#">1961-1980</a> </li>
              </ul>
          </li> 
            <li><a href="#">Team</a></li> 
            <li><a href="#">Offices</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Services ...</a> 
        <ul> 
            <li><a href="#">Web Design</a></li> 
            <li><a href="#">Internet Marketing</a></li> 
            <li><a href="#">Hosting</a></li> 
            <li><a href="#">Domain Names</a></li> 
            <li><a href="#">Broadband</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Contact Us ...</a> 
        <ul> 
            <li><a href="#">United Kingdom</a></li> 
            <li><a href="#">France</a></li> 
            <li><a href="#">USA</a></li> 
            <li><a href="#">Australia</a></li> 
        </ul> 
        </li> 
    </ul> 
  </div>

HTML Source:

<div class="JSSearchList">
  <ul>
    <li><a href="#">drag-box</a></li>
    <li><a href="#">hilite</a></li>
    <li><a href="#">pane1</a></li>
    <li><a href="#">pane2</a></li>
    <li><a href="#">jsTabBox</a></li>
    <li><a href="#">tablesort</a></li>
    <li><a href="#">tooltip</a></li>
    <li><a href="#">tree</a></li>
  </ul>
</div>

Sortierbar und Gestreift

IntegersStrings FloatsStrings 2 DatesNo Sorting
12string a1.2string 12006/10/22Rubbish 1
14string b1.1string 22006/11/22Rubbish 2
1string c0.1string 32006/11/20A
7string c20.711string 3b1999/03/20A 21
23string d0.24string 42006/11/19123 1

HTML Source:

<div class="JSTableStripe">
  <div class="JSTableSort">
    <table>
      <thead>
        <tr>
          <th class="SortNumber">Integers</th><th class="SortString">Strings</th>
          <th class="SortNumber">Floats</th><th class="SortString">Strings 2</th>
          <th class="SortString">Dates</th><th>No Sorting</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>12</td><td>string a</td><td>1.2</td><td>string 1</td><td>2006/10/22</td><td>Rubbish 1</td></tr>
        <tr><td>14</td><td>string b</td><td>1.1</td><td>string 2</td><td>2006/11/22</td><td>Rubbish 2</td></tr>
        <tr><td>1</td><td>string c</td><td>0.1</td><td>string 3</td><td>2006/11/20</td><td>A</td></tr>
        <tr><td>7</td><td>string c2</td><td>0.711</td><td>string 3b</td><td>1999/03/20</td><td>A 21</td></tr>
        <tr><td>23</td><td>string d</td><td>0.24</td><td>string 4</td><td>2006/11/19</td><td>123 1</td></tr>
      </tbody>
    </table>
  </div>
</div>

Gestreifte Tabelle

Berlin Hamburg München
Miljöh Kiez Bierdampf
Buletten Frikadellen Fleischpflanzerl
Buletten Frikadellen Fleischpflanzerl
Buletten Frikadellen Fleischpflanzerl

HTML Source:

<div class="JSTableStripe">
  <table>
    <tr>
      <th>Berlin</th>
      <th>Hamburg</th>
      <th>München</th>
    </tr>
    <tr>
      <td>Miljöh</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr>
    <tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
    <tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
    <tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </table>
</div>

Inline Tooltips

Sample hoveredHover me!
Again sample hoveredHover me again!

HTML Source:

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

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 class="w80">
  <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>

Example with external links

This is a text

HTML Source:

 <div class="JSTabs">
   <ul class="float">
     <li><a href="#">Sample 1</a></li>
     <li class="current"><a href="#">Sample 2</a></li>
     <li><a href="#">Sample 3</a></li>
     <li><a href="#">This is a very long Sample 4</a></li>
   </ul>
   
 </div>
 <div class="JSTabPanel">
   <div> This is a text</div>             
 </div>

Example with manually build tabs

  • Sample 1
  • Sample 2
  • Sample 3
  • This is a very long Sample 4
Some text 2

HTML Source:

 <div class="JSTabBox">
   <div class="JSTabs">
     <ul class="float">
       <li>Sample 1</li>
       <li class="current">Sample 2</li>
       <li>Sample 3</li>
       <li>This is a very long Sample 4</li>
     </ul>
   </div>
   <div class="JSTabPanel" style="display:none">Some text 1</div>
   <div class="JSTabPanel">Some text 2</div>
   <div class="JSTabPanel" style="display:none">Some text 3</div>
   <div class="JSTabPanel" style="display:none">Some text 4</div>
 </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>

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="3">
         <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="3">
         <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>

How to create your own Plugins

JSHelloWorld-Plugin

  • Hello World text which changes it's color after clicking on it
  • We need:
    • HTML-file with element <div class="JSHelloWorld"> </div>
    • JavaScript-file with function JSHelloWorld
    • CSS-file with div.JSHelloWorld-Styles
    • In the HTML-file we include both the CSS and the JSScript-File

Here the example. Click on it:

HTML Source:

     <div class="JSHelloWorld"> </div>

And here the code:

jsc-hello-world.image
  • 2006-11-13 First public release of JSComponents
  • 2006-12-08 Improvements
    • JSCollapse: more examples
    • JSTabBox: tabs with numbers
  • 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
  • 2008-04-20 dynamic content added, simpler tooltips
    • JSDynContent: loading dynamic content into certain area
    • JSInlineTooltip: declaring tooltips inline inside the element
  • 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-07-07 adding JSMenu, making XHTML 1.1 valid!
    • Due to feedback Berlins PHP User Group making it XHTML 1.1. valid
    • Fixing image loading issues, may be faster now
    • Fixing wrongly nested tags
    • Adding JSMenu as a core control
  • 2008-07-11 adding JSHelloWorld example
    • Adding example plugin JSHelloWorld.
    • Adding JSTabs example with links to external urls.
    • fFxing some border issues for JSTabBox.

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