这个想法是让用户登录一些例如事件并提交表格。提交表单后,它会显示选择为动画列表的所有事件,以便项目以链式动画显示。假设我必须使用重复控制。所以这是我的页面:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.AAA = new Array();
viewScope.AAA.push("value1");
viewScope.AAA.push("value2");
viewScope.AAA.push("value3");
viewScope.AAA.push("value4");
viewScope.AAA.push("value5");
viewScope.AAA.push("value6");
viewScope.AAA.push("value7");
viewScope.AAA.push("value8");
viewScope.AAA.push("value9");}]]></xp:this.beforePageLoad>
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script>
<xe:dojoFadeOut node="repeatDiv" duration="100"></xe:dojoFadeOut>
</xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:repeat id="repeat1" rows="30" value="#{javascript:viewScope.AAA}"
indexVar="idxname" repeatControls="true" var="cname">
<xp:div id="repeatDiv" style="background-color:rgb(128,255,128)">
<xp:text escape="true" id="computedField1" value="#{javascript:cname}">
</xp:text>
</xp:div>
</xp:repeat>
</xp:view>
按下按钮我想取消隐藏重复但显示带链动画的所有项目。到目前为止,它只适用于重复中的第一项。有人有可行的解决方案吗?它不一定要重复。任何项目/标签/计算字段列表
答案 0 :(得分:3)
也许您可以编写简单操作的脚本,但我不知道如何有效地执行此操作。相反,我使用这种类型的逻辑直接调用dojo.fadeOut动画(或者我使用jQuery / bootstrap等效。)
一个技巧是确保重复中的每个div都以您可以轻松找到它们的方式进行唯一命名。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.AAA = new Array();
viewScope.AAA.push("value1");
viewScope.AAA.push("value2");
viewScope.AAA.push("value3");
viewScope.AAA.push("value4");
viewScope.AAA.push("value5");
viewScope.AAA.push("value6");
viewScope.AAA.push("value7");
viewScope.AAA.push("value8");
viewScope.AAA.push("value9");}]]>
</xp:this.beforePageLoad>
<xp:scriptBlock>
<xp:this.value><![CDATA[
dojo.require("dijit.form.Button");
function fadeIt(nodeid){
dojo.style(nodeid, "opacity", "1");
var fadeArgs = {
node: nodeid,
duration: 2000
};
dojo.fadeOut(fadeArgs).play();
}
]]></xp:this.value>
</xp:scriptBlock>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:repeat
id="repeat1"
rows="30"
value="#{javascript:viewScope.AAA}"
indexVar="idxname"
repeatControls="true"
var="cname">
<xp:div
style="background-color:rgb(128,255,128)">
<xp:this.id><![CDATA[${javascript:"repeatDiv" + idxname}]]></xp:this.id>
<xp:text
escape="true"
id="computedField1"
value="#{javascript:cname}">
</xp:text>
</xp:div>
</xp:repeat>
<xp:br />
</xp:view>
然后按钮逻辑如下所示:
<xp:button
value="Label2"
id="button2">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[
var nodeid = "#{id:repeatDiv0}";
var hsecs = 0;
setTimeout("fadeIt('" + nodeid + "');", (hsecs*1000)+1)
nodeid = "#{id:repeatDiv1}";
hsecs += 2;
setTimeout("fadeIt('" + nodeid + "');", (hsecs*1000)+1)
nodeid = "#{id:repeatDiv2}";
hsecs += 2;
setTimeout("fadeIt('" + nodeid + "');", (hsecs*1000)+1)
// ... and so forth...
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
快乐的编码!