Scf Behavior
Behavior is a jQuery extension included in Scf. It allows for declaration of behaviors as self-contained entities that can be attached to DOM elements using jQuery selectors:
For instance, consider the following behavior. It is designed to test email addresses:
Copy Code
|
|
|---|---|
$j.scf.behavior.add('eMailValidation', {
attach: function(element, settings, jQueryObj){
var f = function(event){
if(!/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(element.value)){
jQueryObj.removeClass("Valid").addClass("Invalid");
}
else{
jQueryObj.removeClass("Invalid").addClass("Valid");
}
}
jQueryObj.change(f);
}
});
|
|
The eMailValidation behavior can now be attached to a text input:
| Smartsite SXML |
Copy Code
|
|---|---|
$j('form.CoolForm input.eMail').scf.behavior('eMailValidation');
|
|
AutoAttach
You can automatically attach behaviors to selectors by providing an autoAttach property in your behavior declaration:
|
Copy Code
|
|
|---|---|
$j.scf.behavior.add('eMailValidation', {
autoAttach: "form.CoolForm input.eMail",
attach: function(element, settings, jQueryObj){
var f = function(event){
if(!/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(element.value)){
jQueryObj.removeClass("Valid").addClass("Invalid");
}
else{
jQueryObj.removeClass("Invalid").addClass("Valid");
}
}
jQueryObj.change(f);
}
});
|
|
Local behaviors
The generic eMailValidation behavior mentioned above is a typical candidate for inclusion in the /scf/jquery/behaviors/classes/ folder, to automatically attach the behavior whenever an input is defined with the "eMail" class within a form with the "CoolForm" class. Many times however, you will have specific behaviors you wish to attach to some element in a single page. For this, you can declare and attach a behavior using a single command:
|
Copy Code
|
|
|---|---|
$j('#btnSubmit').scf.behavior(function(element,settings,jQueryObj){
jQueryObj.click(function(){
alert('Hello world!');
return false;
});
});
|
|