一个基于ASP.NET+AJAX实现的表单Form元素collapsible 折叠显示控件源码

/// <reference name="MicrosoftAjax.js"/> Type.registerNamespace("SABBEL.Web.Controls.Ajax"); SABBEL.Web.Controls.Ajax.CollapsibleFormSection = function(element) { SABBEL.Web.Controls.Ajax.CollapsibleFormSection.initializeBase(this, [element]); this._validators = null; this._groupName = ""; this._isVisibleSection = false; this._showHideControl = null; this._showControl = null; this._hideControl = null; this._exclusive = false; this._inclusive = false; this._initialized = false; } SABBEL.Web.Controls.Ajax.CollapsibleFormSection.prototype = { get_IsVisibleSection: function() { if (this._showHideControl != null) this._isVisibleSection = this._showHideControl.checked; if (this._showControl != null && this._hideControl != null) { this._isVisibleSection = this._showControl.checked; } return this._isVisibleSection; }, get_GroupName: function() { return this._groupName; }, get_Validators: function() { return this._validators; }, get_ShowHideControl: function() { return this._showHideControl; }, get_ShowControl: function() { return this._showControl; }, get_HideControl: function() { return this._hideControl; }, get_Exclusive: function() { return this._exclusive; }, get_Inclusive: function() { return this._inclusive; }, set_IsVisibleSection: function(value) { if (this._isVisibleSection != value) this.showHide(value, true); this._isVisibleSection = value; }, set_GroupName: function(value) { this._groupName = value; }, set_Validators: function(value) { this._validators = value; }, set_ShowHideControl: function(value) { this._showHideControl = value; }, set_HideControl: function(value) { this._hideControl = value; }, set_ShowControl: function(value) { this._showControl = value; }, set_Exclusive: function(value) { this._exclusive = value; }, set_Inclusive: function(value) { this._inclusive = value; }, set_Initialized: function(value) { this._initialized = value; }, showHide: function(isVisible, checkForExclusivity) { var d = $get(this._element.id); if (isVisible) d.style.display = 'block'; else d.style.display = 'none'; this.ResetValidators(isVisible); if (isVisible && checkForExclusivity) this.HandleExclusiveSections(); this.HandleInclusiveSections(); this._isVisibleSection = isVisible; if (this.get_ShowHideControl()) { this.get_ShowHideControl().checked = isVisible; } if (this.get_HideControl()) { this.get_HideControl().checked = !isVisible; this.get_ShowControl().checked = isVisible; } }, ResetValidators: function ResetValidators(isVisible) { if (this._validators == null || !this._initialized) return; for (var j = 0; j < this._validators.length; j++) { var val = $get(this._validators[j]); 4 val.enabled = isVisible; //(enable != false); } return; }, HandleInclusiveSections: function() { if (!this._inclusive || !this._initialized || this._exclusive) return; var currentState = this._isVisibleSection; for (var i = 0; i < collapsableFormSectionArray.length; i++) { if (collapsableFormSectionArray[i] != this._element.id) { var obj = $find(collapsableFormSectionArray[i]); if (obj != null && this.get_GroupName() != "" && obj.get_GroupName() == this.get_GroupName() && obj.get_IsVisibleSection() != currentState) obj.showHide(currentState, false); } } }, HandleExclusiveSections: function() { if (!this._exclusive || !this._initialized) return; for (var i = 0; i < collapsableFormSectionArray.length; i++) { if (collapsableFormSectionArray[i] != this._element.id) { var obj = $find(collapsableFormSectionArray[i]); if (obj != null && this.get_GroupName() != "" && obj.get_GroupName() == this.get_GroupName() && obj.get_IsVisibleSection()) obj.showHide(false, false); } } } } SABBEL.Web.Controls.Ajax.CollapsibleFormSection.registerClass('SABBEL.Web.Controls.Ajax.CollapsibleFormSection', Sys.UI.Control); Sys.Application.add_load(InitializeCollapsibleForms); function InitializeCollapsibleForms() { if (!collapsableFormSectionArray) return; for (var i = 0; i < collapsableFormSectionArray.length; i++) { var obj = $find(collapsableFormSectionArray[i]); obj.set_Initialized(true); obj.showHide(obj.get_IsVisibleSection(), false); } } //Default implementation for the show hide event handler. //Use this handler when you show or hide a form section based on one control such like a check box function showHideForm(showHideControl, collapsableSectionId) { var collapsableSection = $find(collapsableSectionId); var isVisible = showHideControl.checked; if (collapsableSection != null) { //the second parameter is false because in this sample we do have only //one collapsable section. //If you have more than one and you need only one section enable at a time (exclsive) //then pass 'true'. collapsableSection.showHide(isVisible, false); } } //Default implementation for the show event handler. //Use this handler to show a form section based on two controls (2 radio buttons for instance). function showForm(collapsableSectionId) { var collapsableSection = $find(collapsableSectionId); if (collapsableSection != null) { //the second parameter is false because in this sample we do have only //one collapsable section. //If you have more than one and you need only one section enable at a time (exclsive) //then pass 'true'. collapsableSection.showHide(true, false); } } //Default implementation for the hide event handler. //Use this handler to hide a form section based on two controls (2 radio buttons for instance). function hideForm(collapsableSectionId) { var collapsableSection = $find(collapsableSectionId); if (collapsableSection != null) { //the second parameter is false because in this sample we do have only //one collapsable section. //If you have more than one and you need only one section enable at a time (exclsive) //then pass 'true'. collapsableSection.showHide(false, false); } }