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:

  CopyCode image 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 CopyCode image 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:

  CopyCode image 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:

  CopyCode image Copy Code
$j('#btnSubmit').scf.behavior(function(element,settings,jQueryObj){
  jQueryObj.click(function(){
     alert('Hello world!');
     return false;
  });
});

 

Topics