XPageのスタイルを動的に変更する方法???実際、私は異なる色のラベルをまばたきしたいですか?
-
26-10-2019 - |
質問
トゥイーンは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>
解決
わかりました、私は今問題をよりよく理解しています(申し訳ありません)が、それはループのためです。ブラウザは、すべてのループが完了した後、インターフェイスを更新します。私はこれに時間を費やし、このコードを思いつきました。 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>
他のヒント
代わりにDojoを使用してみてください:
dojo.style("#{id:label1}", "color", "blue");
と
dojo.style("#{id:label1}", "color", "red");
コードは正常に動作しているため、スクリプトを破るのは他のコードである必要があります。これを新しいXPageに追加しましたが、赤と青を点滅させています!
<?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>
これはアラートなしで機能しています。ウィルループが完了するまでユーザーインターフェイスをブロックしているため、スクリプトが機能していない理由。何もしなかったようですが、そうしました。 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>
所属していません StackOverflow