Wednesday, January 27, 2010

An introduction to ASP.NET Ajax 4: Client Controls

Client Controls are controls from the Ajax Control Toolkit made available client-side.

This means you can now use these awesome controls without using ASP.NET WebForms.

You can instantiate these controls imperatively, declaratively or imperatively with jQuery. All controls are exposed as jQuery plugins automatically.

You can find these controls in the ExtendedControls script.

Example

This example shows you how to hook a color picker to an input element using jQuery and the ExtendedControls.


   1:  <html xmlns="http://www.w3.org/1999/xhtml" >  
   2:  <head>  
   3:      <title>Demo - Client Controls</title>  
   4:      <!--Styles-->   
   5:      <link rel="Stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/beta/0911/extended/colorpicker/colorpicker.css" />            
   6:      <!--Scripts-->

   7:      <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>    
   8:      <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>       
   9:      <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>          
  10:      <script type="text/javascript">
  11:          Sys.Debug = true;
  12:   
  13:          Sys.onReady(function(){        
  14:              Sys.require(Sys.components.colorPicker, function () {
  15:              $("#colorPicker").colorPicker({});
  16:              });            
  17:          });        
  18:      </script>  
  19:  </head>  
  20:  <body>  
  21:      <div>  
  22:          <form id="form1" action="/">
  23:          <div><input type="text" id="colorPicker" /></div>                                                 
  24:          </form>
  25:      </div>  
  26:  </body>  
  27:  </html>  



No comments:

Post a Comment