(980915) Changed all samples to use tables instead which prevents line breaks if the width is to low.
(980911) Added a toggle button option. Now all methods a button needs are implemented :-)
(980904)Added the possibility to disable/enable buttons
This cool bar uses simple (hmmm... maybe not so simple) onmouseover/out (and onmousedown/up) and some element tree checking to get the right elements!
 Home |
 Cool Button |
To use you'll need coolbuttons.js. To make a button you add the class="coolButton"
to an element (this can be any element although some don't look too good). All images get gray while the mouse isn't over the
button even those that are nested inside other tags.
To group buttons like I did I placed <SPAN> tags inside a <DIV> that had the class="coolBar".
One other effective way is to use a <TABLE> tag and let the table cells (<TD>)
have the class="coolButton". This is useful because you don't need to supply the width of the button.
The drag and drop was made using the genmove.js function that was discussed earlier in the genericMove article.
Sample:
|
Home
|
Cool Button 1
|
Cool Button 2
|
You can also disable/enable Cool Button 1 above using disable(id) and enable(id).
One limitation though. You should call the disable(id) function to disable the button. It isn't enough to add
an attribute called DISABLED!
| Enable the Cool Button 1 above | Disable Cool Button 1 above |
You can also toggle Cool Button 2 using the function addToggle(id) or remove the toggle with
removeToggle(id). If you wan't to change the state of the button(pressed or not) you can either
use id.click() to simulate a click or call the function toggle(id)
| Remove Toggle to Cool Button 2 above | Add Toggle to Cool Button 2 above |
The disable(id) won't actually happen until the document has finished rendering. The reason for this is
that it adds some elements and that results in an error if done too early. You can still call the
disable(id) anytime because this is taken care of in the script but it won't cancel mouse clicks
until the document is done. (Maybe I'll fix this but not right now :0 )
Code:
<table class="coolBar" style="margin-left: 10px;">
<tr>
<td class="coolButton" onclick="window.location='http://webfx.eae.net'" nowrap>
<img src="../images/home.gif"> Home
</td>
<td class="coolButton" onclick="alert('This can do anything')" nowrap>
<img src="../images/htmlicon.gif"> <i>Cool Button</i>
</td>
</tr>
</table>