Отключить / включить изображение, используемое в качестве кнопки на складных панелях с помощью dojo или jquery - PullRequest
Новая
       10

Отключить / включить изображение, используемое в качестве кнопки на складных панелях с помощью dojo или jquery

1 голос
/ 19 января 2012

Итак, у меня есть это приложение, которое кто-то написал несколько лет назад, и оно было сделано не совсем дружелюбно. По сути, в центре страницы расположена панель карты, а справа - панели с вкладками, которые имеют разные параметры поиска для каждого. Dijit не использовался, и на каждой панели есть 2 кнопки: одна для раскрытия и одна для закрытия панели. На кнопках изображений см. Код ниже: 

    <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>

Это код для кнопок. Теперь у меня есть файл додзе, см. Ниже: 

,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();

}

То, что я хочу сделать, это то, что при нажатии кнопки «закрыть» отключите ее, а при нажатии кнопки «развернуть» активируйте кнопку «Закрыть» и отключите кнопку «развернуть». Как вы можете видеть, у меня есть только 1 метод чтобы показатьWidget и один, чтобы скрытьWidget. Итак, как мне проверить, какая кнопка на какой панели была нажата? Да, я знаю, что есть jquery, смешанный с dojo, несколько человек взломали эту вещь сегодня, это беспорядок. *

Ответы [ 2 ]

1 голос
/ 14 февраля 2012

Вот как я это решил. Я добавил 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. Затем я добавил функции, чтобы поменять класс 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}
0 голосов
/ 21 января 2012

Вы пытались использовать 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'});
});
...