使用dojo或jquery禁用/启用可折叠面板上用作按钮的图像

Disable/Enable image used as button on collapsible panels with dojo or jquery

本文关键字：按钮 图像 可折叠 dojo jquery 禁用 启用 使用      更新时间：2023-09-26

所以我有一个几年前有人编码的应用程序，它是以一种不太友好的方式完成的。基本上，页面中央有一个地图面板，右边是选项卡式面板，每个面板都有不同的搜索选项。没有使用Dijit，每个面板上有两个按钮，一个用于展开，另一个用于关闭面板。按钮是图像，请参阅下面的代码：

    <div align="center" title="Click to Close/Expand" style="background-image:url('images/headerBack.png'); height:30px;" >
    <div style="position:relative; width:264px; margin-right:auto; margin-left:auto; height:100%;">
        <img  src='./images/titleLayerControl.png' dojoAttachEvent="onclick:toggleShowHide" style="position:absolute; top:6px; left:0px; cursor:pointer;"/>
        <input type="image" id="close" dojoAttachEvent="onclick:hideWidget" style="position:absolute; top:12px; left:53px;" alt="Close" title="Close" src="./images/minusUp.png" onmouseout="this.src='./images/minusUp.png';" onmouseover="this.src='./images/minusOver.png';"/>
        <input type="image" id="expand" dojoAttachEvent="onclick:showWidget" style="position:absolute; top:12px; left:195px;" alt="Expand" title="Expand" src="./images/addUp.png" onmouseout="this.src='./images/addUp.png';" onmouseover="this.src='./images/addOver.png';"/>
    </div>
</div>

这是按钮的代码。现在我有一个dojo文件，如下所示：

,disableCloseButton:function(){ 
    $('#close').attr('disabled', 'disabled');
    $("#close").attr("src", "./images/minusDisabled.png");
}
,enableCloseButton:function(){      
    $('#close').removeAttr('disabled');
    $('#close').attr("src", "./images/minusUp.png")
}
,showWidget:function(){     
    dojo.style(this.contentNode.domNode,"visibility","visible");
    dojo.style(this.contentNode.domNode,"display","block");
    var d = this.expandedHeight;
    if (ct.isNumber(d) === true){
        var c = this.expandedHeight-this.collapsedHeight;
        dojo.style(this.domNode,"height",d+"px");
        dojo.style(this.contentNode.domNode,"height",c+"px");       
    } else {
        dojo.style(this.domNode,"height",d);
        dojo.style(this.contentNode.domNode,"height",d); 
    }
    this.expanded = true;
    this.showHook();        
    this.enableCloseButton();
}
,hideWidget:function(){//302697000      
    var d =this.collapsedHeight;
    var c = 0;
    dojo.style(this.contentNode.domNode,"visibility","hidden");
    dojo.style(this.contentNode.domNode,"display","none");
    dojo.style(this.domNode,"height",d+"px");
    dojo.style(this.contentNode.domNode,"height",c+"px");

    this.hideHook();   
    this.expanded = false;
    this.disableCloseButton();
}

我想做的是当点击"关闭"按钮时禁用它，当点击"展开"按钮时启用"关闭"键并禁用"展开"按钮。正如你所看到的，我只有一个方法来显示Widget和一个方法去隐藏Widget。那么我该如何检查哪个面板上的按钮被点击了呢？是的，我知道jquery和dojo混合在一起，今天有几个人在攻击这个东西，它一团糟。

以下是我解决这个问题的方法。我在试图控制的按钮上添加了一个dojoAttachPoint。查看下面的代码：

    <div class="headerBack" title="Click to Close/Expand"
    >
    <div class="test" >
        <a 
        class="titleMyProperties"
        dojoAttachEvent="onclick:toggleShowHide"
        title="Close/Expand"></a>
        <a 
        dojoAttachPoint="closeNode"
        class="closeNode"             
        dojoAttachEvent="onclick:hideWidget"
        title="Close"></a>
        <a 
        dojoAttachPoint="expandNode"
        class="expandNode" 
        dojoAttachEvent="onclick:showWidget" 
        alt="Expand" 
        title="Expand"></a>
    </div>
</div>

接下来，我在widget.js文件中声明了attachpoint。然后我添加了一些函数来交换我修改指针的css类。我将这个网站切换为使用100%css精灵，因此不再需要在http调用中交换图像。

   toggleShowHide: function(){
    var e = this.expanded;
    if(e){
        this.hideWidget( );
        this.disableButton( );
    } else{
        this.showWidget( );
        this.enableButton( );
    }
    //this.expanded = !e;
},
//disable + and - buttons
disableButton: function(){
    $(this.closeNode).addClass('closeNodeDisabled');
    $(this.closeNode).removeClass('closeNode');     
    $(this.expandNode).addClass('expandNode');
    $(this.expandNode).removeClass('expandNodeDisabled');
},
//enable + and - buttons
enableButton: function(){
    $(this.closeNode).addClass('closeNode');
    $(this.closeNode).removeClass('closeNodeDisabled');
    $(this.expandNode).addClass('expandNodeDisabled');
    $(this.expandNode).removeClass('expandNode');
},

CSS类如下：

.closeNode{background-image:url(../images/sprite.png);
width:12px;
height:12px;
background-position:-625px -166px;
display:inline;
left:53px;
top:12px;
background-repeat:no-repeat;
cursor:pointer;
position:absolute}
.closeNode:hover{
width:12px;
height:12px;
background-position:-906px -96px;
display:inline;
left:53px;
position:absolute;top:12px;
background-repeat:no-repeat;
cursor:pointer}
.closeNodeDisabled{background-image:url(../images/sprite.png);
width:12px;
height:12px;
background-position:-823px -98px;
display:inline;
left:53px;
position:absolute;
top:12px;
background-repeat:no-repeat;
cursor:default}
.expandNode{background-image:url(../images/sprite.png);
width:12px;
height:12px;
background-position:-835px -98px;
display:inline;
background-repeat:no-repeat;
left:195px;
position:absolute;
top:12px;
cursor:pointer}
.expandNode:hover{
width:12px;
height:12px;
background-position:-811px -98px;
display:inline;
background-repeat:no-repeat;
left:195px;
position:absolute;
top:12px;
cursor:pointer}
.expandNodeDisabled{background-image:url(../images/sprite.png);
width:12px;
height:12px;
background-position:-930px -96px;
display:inline;
background-repeat:no-repeat;
left:195px;
position:absolute;
top:12px;
cursor:default}

您是否尝试过使用dojo.connect作为事件侦听器？我想我已经正确地整理了启用/禁用功能：

var closeButton = dojo.byId('close');
var openButton = dojo.byId('open);
dojo.connect(closeButton, "onclick", function(evt){
    openButton.set({'disabled':'false'});
    closeButton.set({'disabled':'true'});
});

dojo.connect(openButton, "onclick", function(evt){
    closeButton.set({'disabled':'false'});
    openButton.set({'disabled':'true'});
});
相关文章：