通过JS的面板可见性

时间:2012-07-19 08:20:14

标签: javascript ajaxcontroltoolkit

http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/getting-started/creating-a-custom-ajax-control-toolkit-control-extender-vb上的教程给出了基于文本框和按钮的自定义扩展器的一个很好的示例。基本上,按钮保持禁用状态,直到在文本框中键入至少一个字符。如果文本从文本框中删除,则再次禁用该按钮。

我正在尝试修改此内容,以便扩展程序基于文本框和面板。我希望在文本框中出现文本时,面板变得可见。

这是我修改代码的方式......

Type.registerNamespace('CustomExtenders');
CustomExtenders.ShowHidePanelBehavior = function (element) {
    CustomExtenders.ShowHidePanelBehavior.initializeBase(this, [element]);
    this._targetPanelIDValue = null;
} 

CustomExtenders.ShowHidePanelBehavior.prototype = {
    initialize: function () {
        CustomExtenders.ShowHidePanelBehavior.callBaseMethod(this, 'initialize');

        // Initalization code 
        $addHandler(this.get_element(), 'keyup',
        Function.createDelegate(this, this._onkeyup));
        this._onkeyup();
    },

    dispose: function () {
        // Cleanup code  

        CustomExtenders.ShowHidePanelBehavior.callBaseMethod(this, 'dispose');
    },

    // Property accessors  
    // 
    get_TargetPanelID: function () {
        return this._targetPanelIDValue;
    },

    set_TargetPanelID: function (value) {
        this._targetPanelIDValue = value;
    },

    _onkeyup: function () {

       var e = $get(this._targetPanelIDValue);
        if (e) {
            var visibility = ("" == this.get_element().style.value);
            e.visibility = 'visible';
        }
    }

}

CustomExtenders.ShowHidePanelBehavior.registerClass('CustomExtenders.ShowHidePanelBehavior', Sys.Extended.UI.BehaviorBase);

运行时,面板不会出现。不会产生任何错误。

我哪里出错......

1 个答案:

答案 0 :(得分:1)

试试这段代码:

_onkeyup: function () {
    var panel = $get(this.get_TargetPanelID());
    if (panel) {
        var visibilityValue = ("" == this.get_element().value) ? "hidden" : "visible";
        panel.style.visibility = visibilityValue;
    }
}