Horizbar Widget for HTML

horizbar

The horizbar is an interesting widget, because it creates a kind of bar-graph widget where the cells can contain text and are selectable/highlightable, and can have actions.

HTML

The horizbar's HTML must be constructed using a table HTML element with rows and columns. E.g.

Object	Section 1				Section 2
ID	I	II	III	IV	I	II	III	IV

<table id="myHorizBar" border="0"
  cellspacing="0" cellpadding="0">
  <tbody>
    <tr class="widget_horizbar">
      <th class="widget_horizbar">
	Object
      </th>
      <th colspan="4" class="widget_horizbar">
	Section 1
      </th>
      <th colspan="4" class="widget_horizbar">
	Section 2
      </th>
    </tr>
    <tr class="widget_horizbar">
      <th class="widget_horizbar">
	ID
      </th>
      <th class="widget_horizbar">
	I
      </th>
      <th class="widget_horizbar">
	II
      </th>
      <th class="widget_horizbar">
	III
      </th>
      <th class="widget_horizbar">
	IV
      </th>
      <th class="widget_horizbar">
	I
      </th>
      <th class="widget_horizbar">
	II
      </th>
      <th class="widget_horizbar">
	III
      </th>
      <th class="widget_horizbar">
	IV
      </th>
    </tr>
  </tbody>
</table>
<!-- widget horizbar action:horizbarAction; select:horizbarSelect; -->

The horizbar widget is different to the other widgets in the library because almost nothing is set up for you automatically. You must set up the column headings using TH and TD elements in TR(s). Then you must also set up the cells by calling javascript functions.

The qualifiers of the horizbar widget are:

action (followed by the name of the javascript function, e.g. action:horizbarAction;)
select (followed by the name of the javascript function, e.g. select:horizbarSelect;)

Javascript

The "action:horizbarAction" in the above example causes a javascript function to be called when a date is selected. The "action" property specifies the name of the function, in this case: "horizbarAction"

There is another javascript function that is set up in the above example: "change:horizbarSelect", which causes the horizbarSelect function to be called when one of the cells is selected.

function horizbarAction(target, rown, celln)
{
    alert("horizbar action "+target.getAttribute("id") + " row=" + rown + " column=" + celln);
}
function horizbarSelect(target, rown, celln)
{
    alert("horizbar select "+target.getAttribute("id") + " row=" + rown + " column=" + celln);
}

There are a number of other methods that have been added to the horizbar HTML element:

widget_set_cell(row, column, value)

This method takes three parameters. It sets the textual value of a cell.

row: the row (starting from 0)
column: the column (starting from 0 ... however, you may wish to start your cells from column 1, if, as in this example, you have a label in the first column.)
value: the textual string value to be displayed in the cell.

E.g.

var bar = document.getElementById("myHorizBar");

bar.widget_set_cell(0,0,"abc");
bar.widget_set_cell(0,1,"1",2);
bar.widget_set_cell(0,2,"2",1);
bar.widget_set_cell(0,3,"3",1);

bar.widget_set_cell(1,0,"def");
bar.widget_set_cell(1,1,"1",2);
bar.widget_set_cell(1,2,"2",2);
bar.widget_set_cell(1,3,"3",1);
bar.widget_set_cell(1,4,"4",1);

bar.widget_set_cell(2,0,"ghi");
bar.widget_set_cell(2,1,"2",1);

bar.widget_set_cell(3,0,"xyz");
for (var i = 0; i < 8; i++) {
  bar.widget_set_cell(3,i+1);
}

widget_deselect()

This method takes no parameters. It simply de-selects and cells that we¶e selected.

widget_resize(numrows)

This method resizes the widget to have exactly that many rows. It takes one parameter:

numrows: the number of rows.

CSS

The horizbar widget will automatically be set up with a default CSS class if you don't specify one. If you specify a class, then you actually need to make a number of classes in your CSS file.

The horizbar widget's class will be "widget_horizbar" unless you specify it to be a class of your own.
The individual cells have 3 main states: unqualified, "started" and "done":
When the are unqualified, their class is "widget_horizbar".
When the are "started", their class is "widget_horizbar_started".
When the are "done", their class is "widget_horizbar_done".

Further complicating matters, an all 3 of these states, a cell may also be selected, in which case its class name starts with "widget_horizbar_started", rathar than "widget_horizbar".

If you have assigned a class to a horizbar, then whatever name you used should be used in all these examples, in place of the prefix "widget_horizbar"

Following is an example of default classes for the horizbar:

.widget_horizbar {
    background-color: grey;
    margin: 0px;
    padding: 0px;
}
tr.widget_horizbar {
    border: 1px solid white;
    background-color: white;
    color: black;
    font-size: 10px;
    vertical-align: middle;
    text-align: center;
    height: 15px;
    margin: 0px;
    padding: 0px;
}
th.widget_horizbar {
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-top: 0px;
    border-bottom: 0px;
    background-color: #d0d0d0;
    color: black;
    vertical-align: middle;
    text-align: center;
    margin: 0px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 0px;
    padding-right: 0px;
}
td.widget_horizbar {
    border: 1px solid white;
    background-color: #d0d0d0;
    color: black;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}
td.widget_horizbar_started {
    border: 1px solid white;
    background-color: #b0b0ff;
    color: black;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}
td.widget_horizbar_done {
    border: 1px solid white;
    background-color: yellow;
    color: black;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}
td.widget_horizbar_highlight {
    border: 1px solid #b0ffb0;
    background-color: #d0d0d0;
    color: green;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}
td.widget_horizbar_started_highlight {
    border: 1px solid #b0ffb0;
    background-color: #b0b0ff;
    color: green;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}
td.widget_horizbar_done_highlight {
    border: 1px solid #b0ffb0;
    background-color: yellow;
    color: green;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}
td.widget_horizbar_selected {
    border: 1px solid #a0a0ff;
    background-color: #d0d0d0;
    color: blue;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}
td.widget_horizbar_started_selected {
    border: 1px solid #a0a0ff;
    background-color: #b0b0ff;
    color: blue;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}
td.widget_horizbar_done_selected {
    border: 1px solid #a0a0ff;
    background-color: yellow;
    color: blue;
    vertical-align: middle;
    text-align: center;
    width: 5em;
    margin: 0px;
    padding: 0px;
}

More...

Documentation Other widgets

Zwartberg Reseach & Development is a registered trading name of Open Source Software Consulting CC.
Phone:+27235411462, fax:+27235411379, mobile:+27796977082,
brian@zwartberg.com, P.O. Box 2, Prince Albert, 6930, South Africa.