这周任务是优化课程公示系统,涉及到JSP与JS之间数据传递,下面介绍一下传递流程。此次任务目标是实现当前学期的课程突出显示。
首先,在TeacherAction中添加获得学期方法getIndexTC()该方法调用静态类ActionContextUtils中的setAtrributeToRequest()方法将得到的学期以键值对的方式放到request中。如:ActionContextUtils.setAtrributeToRequest("term","term_"+i);
然后,在JSP页面中获得term,如:<input type="hidden" id="term_current" value="${term}" />用的EL表达式。为了能使当前学期课程突出显示,即改变当前学期的图片,所以要判断页面中的课程哪些是当前学期的。给所有课程都加上别名,如:
<div class="coursei nav term_3" style="background/>这里class属性可以有多个别名,这里是三个,用这三个名字都可以得到div标签。在JSP中加入下面语句,用js控制页面格式:<script type="text/javascript" src="../kcgs/script/kcgs_tcs.js"></script>
下面更改JS。加上:var term_current = Ext.getDom('term_current').value;这句中getDom是获得标签id为term_current的标签,然后取值。这样当前学期就从jsp页面传到js中。然后var term_ele = Ext.select('.'+term_current);引用select得到class名为term_current的标签集。注意“.”是获得class名称,“#”是获得元素名称。这样term_ele就是页面课程集中的当前所学课程的元素集。
如果课程名称是文字的话,term_ele.setStyle("color", 0x6BE6EA);就可以修改它们的颜色。这里因为课程是一张张图片,采用替换图片的方式。在jsp页面中:判断性更改图片地址:
<div class="coursei nav term_3" style="background:url('../kcgs/tc_index_images/java${(term eq 'term_3') ? '_current' : '' }.png');">
<!-- 隐藏字段 -->
<input class="coursename " type="hidden" value="Java SE程序设计" />
</div>
通过判断该课程是否为当前学期课程来更改图片url,进而改变图片。以上即可实现当前学期的课程突出显示的功能,下面是关键代码。
jsp:<input type="hidden" id="term_current" value="${term}" />
<div class="wrap_tc">
<div class="head_tc">
<div class="bg-down">
<div class="box_tc">
<div class="nav_box">
<div class="coursei nav term_3" style="background:url('../kcgs/tc_index_images/java${(term eq 'term_3') ? '_current' : '' }.png');">
<!-- 隐藏字段 -->
<input class="coursename " type="hidden" value="Java SE程序设计" />
</div>
·····省略
<script type="text/javascript" src="../kcgs/script/kcgs_tcs.js"></script>
js:
var term_current = Ext.getDom('term_current').value;
var term_ele = Ext.select('.'+term_current);
顺便说一下 :如用利用CSS,使用鼠标经过时更换背景图片。
n
{
background-image:url(images/1.gif);
background-repeat:no-repeat;
background-position:center;
}
.m
{
background-image:url(images/2.gif);
background-repeat:no-repeat;
background-position:center;
}
<table height="100px" width="100px">
<tr class="n" οnmοuseοver="this.className ='m'" οnmοuseοut="this.className='n'">
<td >aaaaa</td>
</tr>
</table>
其实实现都很简单,刚实习费了很长时间,如有错误,请多指正。