java许愿墙_许愿墙 – javaee 项目实战（2）

许愿墙 – javaee 项目实战(2)

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

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

一、分类选择心情图案

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

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

(1)在页面的合适位置添加用于显示“爱之语”的类别心情图案的

标签，并且应用 jstl 的标签 标签循环输出多张心情图案，具体代码实现如下：

"56" height="56" onClick="javascript:faceChoose('${num}');" /> <

/c:forEach>

标签支持两种不同样式的迭代，一种是数字索引的迭代(与传统的 for 循环类似)；另外一种是集合上的迭代(类似于 iterator 或者 foreach 循环)。在知道具体需要循环的次数时，可以应用第一种，其语法格式如下：

在上面的语法中,begin 和 end 属性是必须使用的,分别用于指定迭代索引的初始值和终止值,都是正整数.其他属性都是可选择的。如果指定了 var 属性，那么将会创建一个变量，将每一次迭代的索引值赋值给该变量，该变量的作用域为标签体内。

的另外一种集合迭代形式如下：

[begin="begin"] [end="end"] [step="step"]>

items 指定了要进行迭代的集合，其他的变量的与上文提到的类似，另外补充一下，属性 begin 的默认值是0，step 的默认值是1.

另外在 jstl 还有一个标签具有迭代作用的，那就是，各个属性的使用与一样，不同的是，在还有一个分界符属性“delims”，用来指定进行分割的点。下面给出这两种标签的使用的Demo：

Item

输出如下:

Item 1

Item 2

Item 3

Item 4

Item 5

输出如下:

Zara

nuha

roshy

(2)接着继续谈如何完成分类选择心情图案，在步骤(1)中创建

标签下再添加几个

标签，分别用来显示“新品秀”，“梦幻水晶”和“小破孩”，并使用标签循环输出各张图片，另外注意此处 style=”display:none”.这里只给出“新品秀”的设计，其它的类似

"56" height="56" onClick="javascript:faceChoose('${num}');" />

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

心情图案类别： 爱之屋

新品秀

/WEB-INF/createRandom.tld