Technorati 标签:  许愿墙, javaee项目, java

    接着上一篇 许愿墙（一），这次我们继续谈一下其具体实现。

一、分类选择心情图案

    在填写许愿条时，允许用户选择心情图案，供用户选择最能代表许愿心情的图案。例如在填写许愿条时，默认显示“爱之语”类别下的心情图案，如下图所示，如果单击“新品秀”或“小破孩”等，则显示该类别下的心情图案。具体效果的查看可以点击 这里（不过这个网站是用ASP来写的，在这里用jsp 来实现。）

imageimage     

    下面将介绍如何实现分类选择心情图案的具体步骤：

    （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>
 
  
 
 
         （3）在页面的恰当的位置添加“爱之语”、“新品秀”等超链接，并在 onclick 事件中通过 style 属性的子属性控制要显示的心情图案。关键代码的设计如下：