Fader Extender for ASP.Net

7/11/2008

Once again, my terrible naming skills will most likely confuse you more than anything. The reason I say that is that, once again I've created an extender. Once again, I created it for a purpose (in this case fading div items in and out), however I made it rather generic so it can be used for multiple instances. And once again, I have no idea what to call it... You would think that with being married to someone who has a BA in English, I'd get better at using, like, words and stuff... Meh.

Anyway, the extender is rather simple to use. All it needs is a next button's ID (or image or what have you), a previous button's ID, a div that contains the various divs that you wish to be able to go through, and two animations (OnClick and OnUnClick). However, you can just look at the code itself if you have questions as to what is required:

FaderExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.Fader.FaderBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.Fader
  11: {
  12:     [Designer(typeof(FaderDesigner))]
  13:     [RequiredScript(typeof(AnimationExtender))]
  14:     [ClientScriptResource("AJAXControls.Fader.FaderBehavior", "AJAXControls.Fader.FaderBehavior.js")]
  15:     [TargetControlType(typeof(Control))]
  16:     public class FaderExtender : AnimationExtenderControlBase
  17:     {
  18:  
  19:         private Animation _OnClick;
  20:         private Animation _OnUnClick;
  21:  
  22:         /// <summary>
  23:         /// Does an animation on click
  24:         /// </summary>
  25:         [ExtenderControlProperty]
  26:         [ClientPropertyName("OnClickJson")]
  27:         [Browsable(false)]
  28:         public Animation OnClick
  29:         {
  30:             get
  31:             {
  32:                 return GetAnimation(ref _OnClick, "OnClick");
  33:             }
  34:             set
  35:             {
  36:                 SetAnimation(ref _OnClick, "OnClick", value);
  37:             }
  38:         }
  39:  
  40:         /// <summary>
  41:         /// Does an animation on click
  42:         /// </summary>
  43:         [ExtenderControlProperty]
  44:         [ClientPropertyName("OnUnClickJson")]
  45:         [Browsable(false)]
  46:         public Animation OnUnClick
  47:         {
  48:             get
  49:             {
  50:                 return GetAnimation(ref _OnUnClick, "OnUnClick");
  51:             }
  52:             set
  53:             {
  54:                 SetAnimation(ref _OnUnClick, "OnUnClick", value);
  55:             }
  56:         }
  57:  
  58:         [ExtenderControlProperty]
  59:         [RequiredProperty()]
  60:         [IDReferenceProperty(typeof(WebControl))]
  61:         public string NextButtonID
  62:         {
  63:             get
  64:             {
  65:                 return GetPropertyValue("NextButtonID", "");
  66:             }
  67:             set
  68:             {
  69:                 SetPropertyValue("NextButtonID", value);
  70:             }
  71:         }
  72:  
  73:         [ExtenderControlProperty]
  74:         [RequiredProperty()]
  75:         [IDReferenceProperty(typeof(WebControl))]
  76:         public string PreviousButtonID
  77:         {
  78:             get
  79:             {
  80:                 return GetPropertyValue("PreviousButtonID", "");
  81:             }
  82:             set
  83:             {
  84:                 SetPropertyValue("PreviousButtonID", value);
  85:             }
  86:         }
  87:     }
  88: }

FaderBehavior.js

   1: // README
   2: //
   3: // There are two steps to adding a property:
   4: //
   5: // 1. Create a member variable to store your property
   6: // 2. Add the get_ and set_ accessors for your property
   7: //
   8: // Remember that both are case sensitive!
   9:  
  10:  
  11: /// <reference name="MicrosoftAjaxTimer.debug.js" />
  12: /// <reference name="MicrosoftAjaxWebForms.debug.js" />
  13: /// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />
  14:  
  15:  
  16: Type.registerNamespace('AJAXControls.Fader');
  17:  
  18: AJAXControls.Fader.FaderBehavior = function(element) {
  19:     AJAXControls.Fader.FaderBehavior.initializeBase(this, [element]);
  20:  
  21:     // TODO : (Step 1) Add your property variables here
  22:     this._OnClickJson = null;
  23:     this._OnClickAnim = null;
  24:     this._OnUnClickJson = null;
  25:     this._OnUnClickAnim = null;
  26:     this._CurrentDivUsing = 0;
  27:     this._NextButtonIDValue = null;
  28:     this._PreviousButtonIDValue = null;
  29: }
  30: AJAXControls.Fader.FaderBehavior.prototype = {
  31:     initialize: function() {
  32:         AJAXControls.Fader.FaderBehavior.callBaseMethod(this, 'initialize');
  33:  
  34:         // TODO: Add your initalization code here
  35:         var Elements = this.get_element().getElementsByTagName("div");
  36:  
  37:         this._OnClickAnim = new Array(Elements.length);
  38:         this._OnUnClickAnim = new Array(Elements.length);
  39:         for (var x = 0; x < Elements.length; ++x) {
  40:             if (x != 0) {
  41:                 Elements[x].style.position = "absolute";
  42:                 Elements[x].style.zIndex = Elements[0].style.zIndex - 1;
  43:                 Elements[x].style.left = Sys.UI.DomElement.getLocation(Elements[0]).x;
  44:                 Elements[x].style.top = Sys.UI.DomElement.getLocation(Elements[0]).y;
  45:             }
  46:             if (this._OnClickJson) {
  47:                 this._OnClickAnim[x] = $AA.buildAnimation(this._OnClickJson, Elements[x]);
  48:             }
  49:             if (this._OnUnClickJson) {
  50:                 this._OnUnClickAnim[x] = $AA.buildAnimation(this._OnUnClickJson, Elements[x]);
  51:             }
  52:         }
  53:         Sys.UI.DomEvent.addHandler($get(this._NextButtonIDValue), 'click',
  54:                 Function.createDelegate(this, this._onclickNext));
  55:         Sys.UI.DomEvent.addHandler($get(this._PreviousButtonIDValue), 'click',
  56:                 Function.createDelegate(this, this._onclickPrevious));
  57:     },
  58:  
  59:     _onclickNext: function(EventElement) {
  60:         var Elements = this.get_element().getElementsByTagName("div");
  61:  
  62:         if (this._OnClickAnim[this._CurrentDivUsing]) {
  63:             this._OnClickAnim[this._CurrentDivUsing].stop();
  64:         }
  65:  
  66:         if (this._OnUnClickAnim[this._CurrentDivUsing]) {
  67:             this._OnUnClickAnim[this._CurrentDivUsing].play();
  68:         }
  69:  
  70:         Elements[this._CurrentDivUsing].style.zIndex = parseInt(Elements[this._CurrentDivUsing].style.zIndex) - 1;
  71:  
  72:         this._CurrentDivUsing++;
  73:         if (this._CurrentDivUsing >= Elements.length)
  74:             this._CurrentDivUsing = 0;
  75:  
  76:         Elements[this._CurrentDivUsing].style.zIndex = parseInt(Elements[this._CurrentDivUsing].style.zIndex) + 1;
  77:  
  78:         if (this._OnUnClickAnim[this._CurrentDivUsing]) {
  79:             this._OnUnClickAnim[this._CurrentDivUsing].stop();
  80:         }
  81:  
  82:         if (this._OnClickAnim[this._CurrentDivUsing]) {
  83:             this._OnClickAnim[this._CurrentDivUsing].play();
  84:         }
  85:  
  86:     },
  87:     _onclickPrevious: function(EventElement) {
  88:         var Elements = this.get_element().getElementsByTagName("div");
  89:  
  90:         if (this._OnClickAnim[this._CurrentDivUsing]) {
  91:             this._OnClickAnim[this._CurrentDivUsing].stop();
  92:         }
  93:  
  94:         if (this._OnUnClickAnim[this._CurrentDivUsing]) {
  95:             this._OnUnClickAnim[this._CurrentDivUsing].play();
  96:         }
  97:  
  98:         Elements[this._CurrentDivUsing].style.zIndex = parseInt(Elements[this._CurrentDivUsing].style.zIndex) - 1;
  99:  
 100:         this._CurrentDivUsing--;
 101:         if (this._CurrentDivUsing < 0)
 102:             this._CurrentDivUsing = Elements.length - 1;
 103:  
 104:         Elements[this._CurrentDivUsing].style.zIndex = parseInt(Elements[this._CurrentDivUsing].style.zIndex) + 1;
 105:  
 106:         if (this._OnUnClickAnim[this._CurrentDivUsing]) {
 107:             this._OnUnClickAnim[this._CurrentDivUsing].stop();
 108:         }
 109:  
 110:         if (this._OnClickAnim[this._CurrentDivUsing]) {
 111:             this._OnClickAnim[this._CurrentDivUsing].play();
 112:         }
 113:  
 114:     },
 115:  
 116:     dispose: function() {
 117:         // TODO: Add your cleanup code here
 118:  
 119:         AJAXControls.Fader.FaderBehavior.callBaseMethod(this, 'dispose');
 120:     },
 121:  
 122:     get_OnClickJson: function() {
 123:         return this._OnClickJson;
 124:     },
 125:  
 126:     set_OnClickJson: function(value) {
 127:         this._OnClickJson = value;
 128:     },
 129:     get_OnUnClickJson: function() {
 130:         return this._OnUnClickJson;
 131:     },
 132:  
 133:     set_OnUnClickJson: function(value) {
 134:         this._OnUnClickJson = value;
 135:     },
 136:     get_NextButtonID: function() {
 137:         return this._NextButtonIDValue;
 138:     },
 139:  
 140:     set_NextButtonID: function(value) {
 141:         this._NextButtonIDValue = value;
 142:     },
 143:     get_PreviousButtonID: function() {
 144:         return this._PreviousButtonIDValue;
 145:     },
 146:  
 147:     set_PreviousButtonID: function(value) {
 148:         this._PreviousButtonIDValue = value;
 149:     }
 150: }
 151: AJAXControls.Fader.FaderBehavior.registerClass('AJAXControls.Fader.FaderBehavior', AjaxControlToolkit.BehaviorBase);

Past that, it sets up the divs such that the first div in the list is shown on top of the other divs. When the next button is clicked, it switches the top div to the next div in the list and runs the onclick animation for it (at the same time it runs the onunclick animation for the div that was on top). When the previous button is clicked, it switches the top div to the previous div in the list and runs the animations. So if you have a simple FadeIn animation for the onclick and an FadeOut animation for the onunclick, it makes a rather nice bleed through effect. However you can set it up to move items, resize them, etc. as it is simply using the AJAX Toolkit's animation features. So look at the code, leave feedback, and happy coding.



Comments