¿Cómo cambiar dinámicamente el estilo en xpage? ¿En realidad quiero parpadear una etiqueta con un color diferente?
-
26-10-2019 - |
Pregunta
Tween no funciona en XPages, he usado el setTimeOut
función para el retraso.
Pero que no funciona a partir de mi preocupación. alert
está funcionando y retrasándose mientras usa setTimeOut
función. Pero el cambio de estilo no funciona ... en realidad, la última instancia de la acción solo funciona
El código que he usado es.
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>
Solución
Ok, entiendo mejor el problema ahora (lo siento), pero es por el bucle for. El navegador actualiza la interfaz después de que se realicen todos los bucles. He pasado algún tiempo en esto y se me ocurrió este código. Con la variable MAX, establecerá el número de veces que parpadeará el texto. Espero que esto resuelva el problema.
<?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>
Otros consejos
Tal vez intente usar dojo:
dojo.style("#{id:label1}", "color", "blue");
y
dojo.style("#{id:label1}", "color", "red");
Su código funciona bien, por lo que debe ser algún otro código que rompa su script. ¡He agregado esto a una nueva XPage y está parpadeando rojo y azul!
<?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>
Esto está funcionando sin alerta. La razón por la cual su script no funciona porque el bucle de Will está bloqueando la interfaz de usuario hasta que esté listo. Parece que no hizo nada, pero lo hizo. Puede probarlo usted mismo agregando nuevos elementos a su página HTML. Después del script, verá múltiples elementos agregados cuando la interfaz de usuario se actualice.
Realmente debería usar la función SetTimeOut para que esto funcione:
<?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>