|
Learn Java Script Today | | | Over 5000 Free Fonts | | | Tutorials | | | Javascript Forum | | | Other Javascript Resources | | | Cheat Sheet |
This behavior was based on the cool button script but it has been rewritten to use the power of DHTML behaviors. Since I haven't explained much about behaviors before I think it is about time to do so now. if you don't want to read about how this behavior was made jump straight down to the demo section. Behavior pros and consThe only real negative thing about behaviors is that it is an IE5 only technology but besides that it is all good. A very good thing about behaviors is that they are extremely easy to reuse and all you have to do is to add the behavior in the style declaration. Creating your behaviorBehaviors are created in a special file type called HTML Components (.htc) (See the HTC Reference for detailed info). The file format is XML with a script block but there are problems about the format (See more ) but these problems seldom leads to any problems. Below is the format for the htc used to create this behavior (notice that all tags needs to be closed in XML): <PUBLIC:COMPONENT> <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="buttonMouseDown()"/> <PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="buttonMouseUp()"/> <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="buttonMouseOut()"/> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="buttonMouseOver()"/> <PUBLIC:ATTACH EVENT="ondblclick" ONEVENT="buttonDblClick()"/> <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="buttonInit()"/> <PUBLIC:ATTACH EVENT="onpropertychange" ONEVENT="buttonPropertyChange()"/> <PUBLIC:PROPERTY NAME="buttontype"/> <PUBLIC:PROPERTY NAME="value"/> <PUBLIC:PROPERTY NAME="cooldisabled"/> <SCRIPT> // Code goes here </SCRIPT> </PUBLIC:COMPONENT> First we have the There are two IE5 specific events attached as well. First is the Creating the codeThe code is pretty basic and it is mostly style manipulations but there are some things worth mentioning. The first thing
is that the current element is called To create the look of the disabled buttons the filters Mask and DropShadow are used. When a button is set to disabled the old
Catching the property changesTo make the behavior easy to use I would like the user to be able to just set the function buttonPropertyChange() { var pName = event.propertyName; if (pName == "cooldisabled") { if (getBooleanCoolDisabled()) disable(); else enable(); } else if (pName == "value") { // code for handling changed value } else if (pName == "buttontype") { // code for handling changed buttontype } } Custom style propertiesIE5 allows the user to use custom style properties. To use them one just declares them in a normal way but when reading them
you have to use the <style type="text/css"> <!-- #foo {customProperty: customValue} --> </style> And then in the script... alert("foo's customProperty = " + foo.currentStyle.customProperty); // will give "foo's customProperty = customValue" This is really useful for behaviors since you can have global initiation variables declared in the style element. UsageTo include the behavior you assign it through a style declaration. There is also a custom style property called
<style type="text/css"> <!-- .coolButton {behavior: url('coolbutton.htc'); coolRadioBackgroundUrl: url('tileback.gif'); background: buttonface; cursor: default; font: icon;} .coolButton img {margin-right: 2px;} --> </style> There are three different types of buttons. The first and simplest is a plain button. The second one is a button with
the DemoThe first button is a simple button (no buttontype declared) that is disabled (by setting
Button Bold Italic
Set cooldisabled to true
Set cooldisabled to false
Below is two radio buttons (with no names) where one has
You can also change the
And now some radio buttons with the same name
|
|