Home Projects Javascript Widgets 2000
"Always listen to the experts. They will tell you what cannot be done. Then do it. "
Javascript Widgets 2000 beta - GUI components for Internet Explorer.

Download the JS Widgets 2000 library
ver. 1.0 beta (2006-02-01)
Note: this project is obsolete and no longer supported.

Use the Dojo Toolkit and "Dojo Addons" package instead.

Javascript Widgets 2000 (henceforth referred to as JSW2000) is a collection of Javascript code and CSS definitions that will enable you to create professionally-looking web-based user intarface in a matter of minutes.

JSW2000 lets you optimize the working space of your CMS/intranet web-based system allowing inexperienced users to navigate through the content with ease.

JSW2000 follows the "KISS - Keep It Smart and Simple" rules, keeping your code concise and developer-friendly.


Basic facts
  • JSW2000 widgets are: Button, Tab pane, Expandable pane, Scrolling table. More widgets are planned to be released soon.
    Although seemingly simple, these widgets create a powerful combination when used wisely: see the screenshots.
  • JSW2000 was designed mainly for CMS and intranet-based systems where cross-browser compatibility is not an issue. Thus, JWS2000 supports Internet Explorer 5 (or newer) only. If you wish to contribute and enrich its features or browser support you are more than welcome! ;-)
  • You don't need to have sophisticated knowledge. All you need are basic HTML/CSS/Javascript skills.
  • JSW2000 converts already existing HTML code, all you need do is create simple framework using standard HTML components and then let JSW2000 transform it.
  • JSW2000 widgets are based on the HTML and DOM framework which means that (unlike many other GUI libraries) they may be nested and combined within each other in any way or fashion you like (i.e. scrollTable inside tabPane, tabPane inside tabPane, button inside scrollTable etc.)
  • JSW2000 supports themes allowing you to control the outlook of widgets. Themes are defined solely by external CSS definition sheets. Themes, when applied, work independently. They may be mixed within a single HTML page (i.e. you may display a tabPane with the "XP" theme and a second tabPane with the "dialog" theme - all on the single page - they will not affect each other).
  • JSW2000 is already extensively used in many applications and CMS systems. Some of them are: SICOMA CMS, LEKSYKA.PL Dictionary Admin, FotoZofia PhotoAdmin, ShopKeeper CMS
  • JSW2000 is currently in the "beta" state. Source code is to be optimized.


Recommended "third-party" components that may greatly enhance your GUI:
These components were tested against JSW2000 compability and proved to be working well.

Installation
  1. Download the latest source code
  2. Unpack the archive into the /jsw2000 directory of your application's document root.
Components overview

  1. Button

    1. Standard code template: 
      <!--
	button definitions here
-->
<style> @import url(jsw2000/w-hlbutton.css); </style>
<script src="jsw2000/w-hlbutton.js"></script>
<script> hlbutton_init(); </script>


    2. Examples:

      Simple buttons with the higlight feature enabled:
      <html><body>
 
<!-- user-defined highlight -->
<button hlbutton="hlcolor:red">first button</button>
<button hlbutton="hlcolor:blue">second button</button>
<button hlbutton="hlcolor:green">third button</button>
<hr>
<!-- automatic highlight -->
<button style="background:#aa0000; color:white" hlb="hlcolor:auto">first button</button>
<button style="background:#00aa00; color:white" hlb="hlcolor:auto">second button</button>
<button hlb="hlcolor:auto">third button</button>
 
<script src="jsw2000/w-hlbutton.js"></script>
<script> hlbutton_init(); </script>
</body></html>
      The result (open new window):


      Theme buttons:
      <html><body>
 
<button hlb="theme:xp">first button</button>
<button hlb="theme:xp">second button</button>
<button hlb="theme:xp">third button</button>
<hr>
<button hlb="theme:xpdark">first button</button>
<button hlb="theme:xpdark">second button</button>
<button hlb="theme:xpdark">third button</button>
<hr>
<button hlb="theme:xp2">first button</button>
<button hlb="theme:xp2">second button</button>
<button hlb="theme:xp2">third button</button>
<hr>
<button hlb="theme:dialog">first button</button>
<button hlb="theme:dialog">second button</button>
<button hlb="theme:dialog">third button</button>
<hr>
<button hlb="theme:dialog;hlcolor:auto">first button</button>
<button hlb="theme:dialog;hlcolor:auto">second button</button>
<button hlb="theme:dialog;hlcolor:auto">third button</button>
<hr>
<button hlb="theme:dialog;hlcolor:red">first button</button>
<button hlb="theme:dialog;hlcolor:yellow">second button</button>
<button hlb="theme:dialog;hlcolor:blue">third button</button>
<br><br>
 
<style> @import url(jsw2000/w-hlbutton.css); </style>
<script src="jsw2000/w-hlbutton.js"></script>
<script> hlbutton_init(); </script>
 
</body></html>
      The result (open new window):


      Buttons with icons:
      <html><body>
 
<button hlb="theme:xp2;icon:jsw2000/i/icon_computer.gif"
		onClick="alert('ouch!')">click me!</button>&nbsp;
<button hlb="theme:xp2;icon:jsw2000/i/icon_file.gif;icon-align:right">
		second button</button>&nbsp;
<button hlb="theme:xp2;icon:jsw2000/i/icon_tree.gif;"> tree </button>&nbsp;
<button hlb="theme:xp2;icon:jsw2000/i/icon_file.gif;">third button</button>&nbsp;
 
<hr>
<button hlb="theme:xpdark;icon:jsw2000/i/icon_computer.gif"
		onClick="alert('ouch!')">click me!</button>&nbsp;
<button hlb="theme:xpdark;icon:jsw2000/i/icon_file.gif;icon-align:right">
		second button</button>&nbsp;
<button hlb="theme:xpdark;icon:jsw2000/i/icon_tree.gif;"> tree </button>&nbsp;
<button hlb="theme:xpdark;icon:jsw2000/i/icon_file.gif;">third button</button>&nbsp;
 
<hr>
<button hlb="theme:dialog;icon:jsw2000/i/icon_computer.gif"
		onClick="alert('ouch!')">click me!</button>&nbsp;
<button hlb="theme:dialog;icon:jsw2000/i/icon_file.gif;icon-align:right">
		second button</button>&nbsp;
<button hlb="theme:dialog;icon:jsw2000/i/icon_tree.gif;"> tree </button>&nbsp;
<button hlb="theme:dialog;icon:jsw2000/i/icon_file.gif;">third button</button>&nbsp;
 
 
<style> @import url(jsw2000/w-hlbutton.css); </style>
<script src="jsw2000/w-hlbutton.js"></script>
<script> hlbutton_init(); </script>
 
</body></html>
      The result (open new window):

  2. Tab pane

    1. Standard code template: 
      <style> @import url(jsw2000/w-tabpane.css); </style>
<script src="jsw2000/w-tabpane.js"></script>
<!--
	panel framework code here
-->
<script>tabpane_init("panel",'',100);</script>

      Tab pane initialization: 
      tabpane_init(setName,defaultTabId,defaultHeight,themeName,tabsWidth);


    2. Examples:


      Standard tab pane:
      <html><body>
 
<style> @import url(jsw2000/w-tabpane.css); </style>
<script src="jsw2000/w-tabpane.js"></script>
 
<!-- tabs definitions -->
<div id="panel-options">pane title 1</div>
<div id="panel-options2">pane title 2</div>
<div id="panel-options3">pane title 3</div>
<!-- tabs bodies definitions -->
<div id="panel-options-body"> pane body pane body pane body pane body pane body pane body </div>
<div id="panel-options2-body"> blah blah ?  blah blah ?  blah blah ?  blah blah ?  blah blah ? </div>
<div id="panel-options3-body"> blurb :) </div>
 
<script>tabpane_init("panel",'',100);</script>
</body></html>
      The result (open new window):


      Tab pane themes with tab preselection:
      <html><body>
 
<style> @import url(jsw2000/w-tabpane-xp.css); </style>
<style> @import url(jsw2000/w-tabpane-xp2.css); </style>
<style> @import url(jsw2000/w-tabpane-round.css); </style>
<script src="jsw2000/w-tabpane.js"></script>
 
<div id="panel-options">pane title 1</div>
<div id="panel-options2">pane title 2</div>
<div id="panel-options3">pane title 3</div>
<div id="panel-options-body"> pane body pane body pane body pane body pane body pane body </div>
<div id="panel-options2-body"> blah blah ?  blah blah ?  blah blah ?  blah blah ?  blah blah ? </div>
<div id="panel-options3-body"> blurb :) </div>
<hr>
<div id="panel2-options">pane title 1</div>
<div id="panel2-options2">pane title 2</div>
<div id="panel2-options3">pane title 3</div>
<div id="panel2-options-body"> pane body pane body pane body pane body pane body pane body </div>
<div id="panel2-options2-body"> blah blah ?  blah blah ?  blah blah ?  blah blah ?  blah blah ? </div>
<div id="panel2-options3-body"> blurb :) </div>
<hr>
<div id="panel3-options">pane title 1</div>
<div id="panel3-options2">pane title 2</div>
<div id="panel3-options3">pane title 3</div>
<div id="panel3-options-body"> pane body pane body pane body pane body pane body pane body </div>
<div id="panel3-options2-body"> blah blah ?  blah blah ?  blah blah ?  blah blah ?  blah blah ? </div>
<div id="panel3-options3-body"> blurb :) </div>
 
<script>tabpane_init("panel",'options2',50,'xp');</script>
<script>tabpane_init("panel2",'options3',50,'xp2');</script>
<script>tabpane_init("panel3",'options3',50,'round');</script>
</body></html>
      The result (open new window):


      Nested panes with themes, tab preselection and user-defined tab width:
      <html><body>
 
<style> @import url(jsw2000/w-tabpane-xp.css); </style>
<style> @import url(jsw2000/w-tabpane-xp2.css); </style>
<style> @import url(jsw2000/w-tabpane-round.css); </style>
<script src="jsw2000/w-tabpane.js"></script>
 
<div id="panel-options">pane title 1</div>
<div id="panel-options2">pane title 2</div>
<div id="panel-options3">pane title 3</div>
<div id="panel-options-body"> pane body pane body pane body pane body pane body pane body </div>
<div id="panel-options2-body">
	<div id="panel2-options">pane title 1</div>
	<div id="panel2-options2">pane title 2</div>
	<div id="panel2-options3">pane title 3</div>
	<div id="panel2-options-body"> pane body pane body pane body pane body pane body pane body </div>
	<div id="panel2-options2-body"> blah blah ?  blah blah ?  blah blah ?  blah blah ?  blah blah ? </div>
	<div id="panel2-options3-body"> blurb :) </div>
</div>
<div id="panel-options3-body"> blurb :) </div>
 
<script>tabpane_init("panel",'options2',90,'xp',130);</script>
<script>tabpane_init("panel2",'',50,'xp');</script>
</body></html>
      The result (open new window):

  3. Expandable pane

    1. Standard code template: 
      <style> @import url(jsw2000/w-exppane.css); </style>
<!--
	code framework here
-->
<script src="jsw2000/w-exppane.js"></script>
<script>expandpane_init();</script>

    2. Examples:


      Standard expandable pane:
      <html><body>
 
<style>body { font-size:11px; font-family:Tahoma; } </style>
 
<style> @import url(jsw2000/w-exppane.css); </style>
<script src="jsw2000/w-exppane.js"></script>
 
<div id="expandpane-help">Help:</div>
<div id="expandpane-help-body">
	my content my content my content my content my content my content my content my content
	my content my content my content my content my content my content my content my content
	my content my content my content my content my content my content my content my content
</div>
 
<script>expandpane_init();</script>
 
</body></html>
      The result (open new window):


      Multiple expandable panes with theme:
      <html><body>
 
<style>body { font-size:11px; font-family:Tahoma; } </style>
 
<style> @import url(jsw2000/w-exppane.css); </style>
<style> @import url(jsw2000/w-exppane-xp.css); </style>
<script src="jsw2000/w-exppane.js"></script>
 
<div id="expandpane-help" expp="theme:xp">Help first:</div>
&nbsp;&nbsp;
<div id="expandpane-help2" expp="theme:xp">Help second:</div>
 
<div id="expandpane-help-body">
	my content my content my content my content my content my content my content my content
	my content my content my content my content my content my content my content my content
	my content my content my content my content my content my content my content my content
</div>
<div id="expandpane-help2-body">
	my content second my content second my content second my content second my content second
</div>
 
<script>expandpane_init();</script>
 
</body></html>
      The result (open new window):


      Expandable pane with fieldset integration, initial state is set to "hidden":
      <html><body>
 
<style>body { font-size:11px; font-family:Tahoma; background:buttonface;} </style>
 
<style> @import url(jsw2000/w-exppane.css); </style>
<style> @import url(jsw2000/w-exppane-xp.css); </style>
<script src="jsw2000/w-exppane.js"></script>
 
	
<fieldset>
	<legend><div id="expandpane-help2">Help:</div></legend>
	<div id="expandpane-help2-body" class="expandpane_hidden" style="padding:10px;">
		first content first content first content first content first content 
	</div>
</fieldset> 
<fieldset>
	<legend><div id="expandpane-help3">Help:</div></legend>
	<div id="expandpane-help3-body" class="expandpane_hidden" style="padding:10px;">
	 yet another content :)yet another content :)yet another content :)
	</div>
</fieldset> 
	
	
<script>expandpane_init();</script>
 
</body></html>
      The result (open new window):

  4. Scrolling table

    1. Standard code template: 
      <style> @import url(jsw2000/w-scrolltab.css); </style>
<script src="jsw2000/w-scrolltab.js"></script>
<!--
	table framework here
-->
<script>scrolltab_init('TableId','ThemeName');</script>
<br>

    2. Examples:


      Standard scroll table:
      <html><body>
<style> @import url(jsw2000/w-scrolltab.css); </style> 
<script src="jsw2000/w-scrolltab.js"></script>
 
<table id="wordListTable" border=0 width='100%' height='100%' cellpadding="0" cellspacing="0">
	<thead>
		<tr><td>title 1</td><td>title 2</td><td>title 3</td></tr>
	</thead>
	<tbody>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
	</tbody>
</table>
 
<script>scrolltab_init('wordListTable');</script>
</body></html>
      The result (open new window):


      Scroll table with theme applied:
      <html><body>
<style> @import url(jsw2000/w-scrolltab-xp.css); </style> 
<script src="jsw2000/w-scrolltab.js"></script>
 
<table id="wordListTable" border=0 width='100%' height='100%' cellpadding="0" cellspacing="0">
	<thead>
		<tr><td>title 1</td><td>title 2</td><td>title 3</td></tr>
	</thead>
	<tbody>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
		<tr><td>body 1</td><td>body 2</td><td>and last but not least body 3 :)</td></tr>
	</tbody>
</table>
 
<script>scrolltab_init('wordListTable','xp');</script>
</body></html>
      The result (open new window):

License and Terms of Use
You are granted permission to freely use the code for noncommercial purposes only.

If you like to use the code for commercial purposes to get the permission first.

The code is provided "as is" without warranty of any kind.


© 2003-2010 by , powered by SICOMA CMS