通过JS实现面板可见性

Panel Visibility via JS

本文关键字：可见性 实现 JS 通过      更新时间：2023-11-30

上的教程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);

运行时，面板将不会出现。没有产生任何错误。

我哪里错了。。。

试试这个代码：

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