Как динамически изменить стиль в Xpage ???На самом деле я хочу мигать этикеткой с другим цветом? - PullRequest
Новая
       22

Как динамически изменить стиль в Xpage ???На самом деле я хочу мигать этикеткой с другим цветом?

0 голосов
/ 16 февраля 2012

Tween не работает в Xpages, я использовал функцию setTimeOut для задержки.
Но это не работает из-за моей озабоченности.alert работает и задерживается при использовании функции setTimeOut.Но изменение стиля не работает ... На самом деле последний экземпляр действия работает только

Код, который я использовал, это. 

var t = 1;
var flag;

function doMove() {
    alert("Hi");
    t = t + 1;
    if ((t % 2) == 0) {
        document.getElementById("#{id:label1}").style.color = "blue";
        flag = test()
    }
    else {
        document.getElementById("#{id:label1}").style.color = "red";
        flag = test()
    }

}


function test() {
    var startTime = new Date().getTime();
    while (new Date().getTime() < startTime + 1000);
    return true;
}

for (var l = 0; l <= 2; l++) {
    doMove();
}  






XSP :    
Please see the following  
<xp:label value="Testing" id="label1" style="font-weight:bold;font-        size:14pt;color:rgb(255,0,0)">  
</xp:label>    
<xp:button value="Dojo" id="button3">  
    <xp:eventHandler event="onclick" submit="false">  
        <xp:this.script><![CDATA[    


var t = 1;  
var flag;  

function doMove() {  
    alert("Hi");  
    t = t + 1;  
    if ((t % 2) == 0) {  
        document.getElementById("#{id:label1}").style.color = "blue";  
        flag = test()  
    }  
    else {  
        document.getElementById("#{id:label1}").style.color = "red";  
        flag = test()  
    }  

 }  


 function test() {  
    var startTime = new Date().getTime();  
    while (new Date().getTime() < startTime + 1000);  
    return true;  
}  

for (var l = 0; l <= 2; l++) {  
    doMove();  
}      


    ]]></xp:this.script>  
    </xp:eventHandler>  
</xp:button>

Ответы [ 4 ]

2 голосов
/ 16 февраля 2012

Возможно, вместо этого попробуйте использовать Dojo: 

dojo.style("#{id:label1}", "color", "blue");

и 

dojo.style("#{id:label1}", "color", "red");
0 голосов
/ 26 февраля 2012

Хорошо, теперь я понимаю проблему лучше (извините), но это из-за цикла for. Браузер обновляет интерфейс после завершения всех циклов. Я потратил некоторое время на это и придумал этот код. С помощью переменной max вы установите количество миганий текста. Я надеюсь, что это решит проблему. 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">

    <xp:label value="Label" id="label1"></xp:label>


    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[var t = 1;
var flag;
var max = 5;

function doMove() {   

    t = t + 1;   
    if (t > max){
        return;
    }
    if ((t % 2) == 0) {   
        document.getElementById("#{id:label1}").style.color = "blue";  

       flag = setTimeout(doMove, 1000);  
    }   

    else {   
        document.getElementById("#{id:label1}").style.color = "red"; 

      flag = setTimeout(doMove, 1000); 
    }



}   

doMove(); 

]]></xp:this.script>
    </xp:eventHandler>
</xp:view>
0 голосов
/ 24 февраля 2012

Это работает без предупреждения. Причина, по которой ваш скрипт не работает, потому что цикл воли блокирует пользовательский интерфейс, пока это не будет сделано. Похоже, он ничего не сделал, но это сделал. Вы можете проверить это самостоятельно, добавив новые элементы на свою HTML-страницу. После скрипта вы увидите несколько элементов, добавленных при обновлении пользовательского интерфейса.

Вы должны действительно использовать функцию settimeout, чтобы это работало: 

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">

    <xp:label value="Label" id="label1"></xp:label>


    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[var t = 1;  
var flag;  

function doMove() {  

    t = t + 1;  
    if ((t % 2) == 0) {  
        document.getElementById("#{id:label1}").style.color = "blue"; 

        flag = setTimeout(doMove, 1000);
    }  

    else {  
        document.getElementById("#{id:label1}").style.color = "red";

        flag = setTimeout(doMove, 1000);
    }  

}  


for (var l = 0; l <= 2; l++) {
doMove();


}


]]></xp:this.script>
    </xp:eventHandler>
</xp:view>
0 голосов
/ 17 февраля 2012

Ваш код работает нормально, поэтому это должен быть какой-то другой код, который нарушает ваш скрипт. Я добавил это на новую страницу X, и она мигает красным и синим! 

  <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:label value="Label" id="label1"></xp:label>
    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[var t = 1; 
var flag; 

function doMove() { 
    alert("Hi"); 
    t = t + 1; 
    if ((t % 2) == 0) { 
        document.getElementById("#{id:label1}").style.color = "blue"; 
        flag = test() 
    } 
    else { 
        document.getElementById("#{id:label1}").style.color = "red"; 
        flag = test() 
    } 

} 


function test() { 
    var startTime = new Date().getTime(); 
    while (new Date().getTime() < startTime + 1000); 
    return true; 
} 

for (var l = 0; l <= 2; l++) { 
    doMove(); 
}]]></xp:this.script>
    </xp:eventHandler></xp:view>
...