接着上一篇 许愿墙(一),这次我们继续谈一下其具体实现。
一、分类选择心情图案
在填写许愿条时,允许用户选择心情图案,供用户选择最能代表许愿心情的图案。例如在填写许愿条时,默认显示“爱之语”类别下的心情图案,如下图所示,如果单击“新品秀”或“小破孩”等,则显示该类别下的心情图案。具体效果的查看可以点击 这里(不过这个网站是用ASP来写的,在这里用jsp 来实现。)
下面将介绍如何实现分类选择心情图案的具体步骤:
(1)在页面的合适位置添加用于显示“爱之语”的类别心情图案的<div> 标签,并且应用 jstl 的标签 <c:forEach> 标签循环输出多张心情图案,具体代码实现如下:
<div id="face_1" style="display:block">
<c:forEach begin="0" end="10" step="1" var="num" varStatus="id">
<img src="images/face/love_${num}.gif" style="color: #006080">"56" height="56" onClick="javascript:faceChoose('${num}');" /> <
/c:forEach>
<c:forEach>标签支持两种不同样式的迭代,一种是数字索引的迭代(与传统的 for 循环类似);另外一种是集合上的迭代(类似于 iterator 或者 foreach 循环)。在知道具体需要循环的次数时,可以应用第一种,其语法格式如下:
<c:forEach begin="begin" end="end" [var="varName"] [varStatus="varStatusName"][step="step"]>
<!-- 标签体 -->
</c:forEach>
在上面的语法中,begin 和 end 属性是必须使用的,分别用于指定迭代索引的初始值和终止值,都是正整数.其他属性都是可选择的。如果指定了 var 属性,那么将会创建一个变量,将每一次迭代的索引值赋值给该变量,该变量的作用域为标签体内。
<c:foreach> 的另外一种集合迭代形式如下:
<c:forEach items="collection" [var="varName"] [varStatus="varStatusName"]
[begin="begin"] [end="end"] [step="step"]>
<!-- 标签体 -->
</c:forEach>
items 指定了要进行迭代的集合,其他的变量的与上文提到的类似,另外补充一下,属性 begin 的默认值是0,step 的默认值是1.
另外在 jstl 还有一个标签具有迭代作用的,那就是<c:forTokens>,各个属性的使用与<c:forEach>一样,不同的是,在<c:fortokens>还有一个分界符属性“delims”,用来指定进行分割的点。下面给出这两种标签的使用的Demo:
<c:forEach var="i" begin="1" end="5">
Item <c:out value="${i}"/>
</c:forEach>
输出如下:
Item 1 Item 2 Item 3 Item 4 Item 5
<c:forTokens items="Zara,nuha,roshy" delims="," var="name">
<c:out value="${name}"/>
</c:forTokens>
输出如下:
Zara nuha roshy
(2)接着继续谈如何完成分类选择心情图案,在步骤(1)中创建<div>标签下再添加几个<div>标签,分别用来显示“新品秀”,“梦幻水晶”和“小破孩”,并使用<c:foreach>标签循环输出各张图片,另外注意此处 style=”display:none”.这里只给出“新品秀”的设计,其它的类似
<div id="face_2" style="display:none">
<c:forEach begin="6" end="11" step="1" var="num" varStatus="id">
<img src="images/face/new_${num}.gif" style="color: #006080">"56" height="56" onClick="javascript:faceChoose('${num}');" />
</c:forEach>
转载于:https://blog.51cto.com/peiquan/1316695