Archive for November, 2010

Creating Custom jQuery Widget

Posted: November 21, 2010 in jQuery
Tags:

Hi I just came across a greate website http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

There I learned how to create custom jQuery widget. I have tried to create my one TexBox widget.

This  widget will help to takecare each validations we want to do on a TextBox. Currently I have listed only 2 validations. Similarly we can put many validations.

I want to share that.

myWidget.js


 $(function(){
     $.widget("ui.TextBox", {
         options: {
             color:"red"
            ,required:true
            ,numeric:true
            ,msg : {req: "Please enter some text" , num: "Text should be alphanumeric" }
       }
      ,_init : function (){
          this._setColor();
      }  
      ,_setColor:function ( ) {
          this.element.css({"background-color":this.options.color});
      }
      ,off:function (  )  {
         this.element.css({"background-color":""}); 
         this.destroy( );
      }
,_rules : {num:/[0-9]/}
     ,validate : function ( )  {
          var o = this.options,ret=true;
          this.element.removeClass("ui-state-error");
           if (o.required)  {
              var txt=$.trim( this.element.val( ) );
               if(txt==="") {
                    ret = false;
                   this.element.addClass("ui-state-error");
                   alert(o.msg.req) ;
               }
        }
       if(ret && ! this._rules.num.exec(txt)) {
           ret = false;
           this.element.addClass("ui-state-error");
           alert(o.msg.num) ;
       }
    }

});

$("#txtfact").myWidget({color:"khaki",msg:{req:"Please enter your name !!!"}});
 $("#btnon").click( function( ) {
      $("#txtfact").TextBox("validate");  
 });
 $("#btnoff").click( function( ) {
      $("#txtfact").TextBox("off");
 });

 });


<!--pan class="hiddenSpellError" pre=-->DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=unicode">
<META content="MSHTML 6.00.2900.3603" name=GENERATOR>
<link  href="C:\rupesh\css\redmond\jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<script type="text/<span class="><!--mce:0--></script>
<script type="text/<span class="><!--mce:1--></script>
<script type="text/javascript" src="C:\rupesh\js\myWidget.js"></script>

</HEAD>
<BODY>

Enter Account Number <input type="text" value="" id="txtfact" />
<button id="btnon">Validate</button>
<button id="btnoff">Remove Widget</button>
</BODY>

</HTML>

Advertisements
 

myMath = {
//Calculate Factorial
  fact : function ( n ) {
   if ( n === 0 ) {
    return 1;
   } else {
   return n*myMath.fact(n-1);
  }
}
//Write the sequence of Fibonacci number
,fibo : function ( n ) {
    f = [];f[0]=0;f[1]=1;
    for(i=0;i
        if(i>1) {
     f.push( f[i-1] + f[i-2] ); 
 }
    } 
    return (f.join());
   }
}
//Add all the natural numbers below one thousand that are multiples of 3 or 5.

Separation of concerns

Posted: November 17, 2010 in ASP.Net

Single responsibility principle is what we find in Separation of Concerns (SOC). In Asp.Net MVC framework SOC is the most important thing. The ASP.NET MVC framework also supports the use of Dependency Injection (DI) and Inversion of Control (IOC) container models. DI allows you to inject objects into a class, instead of relying on the class to create the object itself. IOC specifies that if an object requires another object, the first objects should get the second object from an outside source such as a configuration file. This makes testing easier.