Struts2的Ajax支持(2)Struts2的Ajax标签...
tabbedPanel标签
tabbedPanel标签在HTML页面里生成类似windows程序的Tab页,通过使用Tab页,可以在有限的空间里放置更多的内容.
tabbedPanel标签生成的Tab页的内容即可以是静态的,也可以是动态的.如果是静态的,则直接指定Tab页里的内容;如果是动态的,则可以采用Ajax方式来动态加载Tab页的内容.
tabbedPanel标签生成整个Tab框架,而tabbedPanel标签里的div子标签则生成单独的Tab页,每个div子标签生成一个Tab页.因为div标签本身是一个Ajax标签,允许内容动态改变,因此,每个Tab页的内容可以动态改变.
使用tabbedPaned标签可以指定如下几个属性:
closeButton:指定Tab页上关闭按钮的位置,可能的值是tab和pane.
selectedTab:指定加载该页面时选择哪个Tab页面,默认是第一个Tab页面.
doLayout:设置tabbedPanel是否为显示固定高度,如果该属性设置为false则tabbedPanel的高度会随着Tab页大小的改变而改变.
labelposition:设置Tab页面中标签的位置,可以是top(顶,这是默认值);right(右);button(底);left(左).
下面是一个简单的静态Tab页面的代码(JSP页面代码):
<%@ page conmso="text/html;charset=GBK" language="java" %> <%@ taglib prefix="s" uri="/struts-tags" %> <html> <head> <title>tabbled panel示例：简单tabbled panel</title> <s:head theme="ajax" debug="true"/> <link rel="stylesheet" type="text/css" href="<s:url value="/struts/tabs.css"/>"> </head> <body>
<s:tabbedPanel id="tab1" theme="ajax" cssStyle="width: 400px; height: 240px;" doLayout="true"> <s:div id="left" label="第一个Tab页" theme="ajax" > Spring2.0<br> J2EE<br> Ajax<br> </s:div > <s:div id="middle" label="第二个Tab页" theme="ajax" > <h3>简介</h3>
</s:div > </s:tabbedPanel> </body> </html>我们还可以为closeButton指定值来为Tab页面增加关闭按钮。但是在一般情况下并没有这种需求。
<%@ page conmso="text/html;charset=GBK" language="java" %> <%@ taglib prefix="s" uri="/struts-tags" %> <html> <head> <title>包含动态内容的Tab页</title> <s:head theme="ajax"/> <link rel="stylesheet" type="text/css" href="<s:url value="/struts/tabs.css"/>" /> </head> <body> <s:url id="rd" value="/random.action"/> <s:tabbedPanel id="tabbedpanel" cssStyle="width: 500px; height: 240px;" doLayout="true"> <s:div id="panel1" label="动态Tab页面一" href="%{#rd}" theme="ajax"/> <s:div id="panel1" label="动态Tab页面二" theme="ajax"> <h2>您最喜欢的图书：</h2> <s:div id="panel11"href="%{#rd}" theme="ajax" updateFreq="1000"/> </s:div> <s:div id="panel2" label="静态Tab页面" theme="ajax"> <h3>简介</h3> 有任何问题，都可以发邮件给我。<br> </s:div> <s:div id="panel3" label="远程表单的Tab页" theme="ajax"> <div id='show' style="background-color:#bbbbbb;width:240px;height :50px">原始静态文本</div> <s:url id="ajaxTest" value="/AjaxTest.action" /> <s:form action='AjaxTest' method='post' theme='ajax'> <s:textfield name="name" label="姓名"/><br/> <s:textfield name="age" label="年龄"/><br/> <s:submit value="提交" targets="show"/> </s:form> </s:div> </s:tabbedPanel> </body> </html> function Person(name, sex){ this.name=name; this.sex=sex; } //创建一个Person实例 var p = new Person('annlee','male'); //输出Person实例 alert(p.name); 使用JSON的语法如下： var p = { "name":'annlee',"sex":'male' }; alert(p); //创建数组对象 var a = new Array(); //为数组元素赋值 a[0]='annlee'; a[1]='male'; alert(a); 或者用下面的方法： //创建数组对象 var a = new Array('annlee','male'); alert(a); 使用JSON语法创建数组用如下方法： //创建数组对象 var a = ['annlee','male']; alert(a); person = { name:'annlee', gender:'male', age:26 } <%@ page language="java" conmso="text/html; charset=GBK"%> <script src="prototype-1.4.0.js" type="text/http://www.mso.com.cn/#"> </script> <script language="http://www.mso.com.cn/#"> function gotClick() { //请求的地址 var url = 'JSONExample.action'; //将favorite表单域的值转换为请求参数 var params = Form.serialize('form1'); //创建Ajax.Request对象，对应于发送请求 var myAjax = new Ajax.Request( url, { //请求方式：POST method:'post', //请求参数 parameters:params, //指定回调函数 onComplete: processResponse, //是否异步发送请求 asynchronous:true }); } function processResponse(request) { $("show").innerHTML = request.responseText; } </script> <html> <head> <title>使用JSON插件</title> </head> <body> <form id="form1" name="form1" method="post"> <INPUT TYPE="text" name="field1" id="field1"/><br> <INPUT TYPE="text" name="field2" id="field2"/><br> <INPUT TYPE="text" name="field3" id="field3"/><br> <INPUT TYPE="button" value="提交" onmso="gotClick();"/> </form> <div id="show"> </div> </body> </html> package lee; import java.util.HashMap; import java.util.Map; import com.opensymphony.xwork2.Action; import com.googlecode.jsonplugin.annotations.JSON; public class JSONExample { private int[] ints = {10, 20}; private Map map = new HashMap(); private String customName = "custom"; private String field1; //'transient'不会被序列化 private transient String field2; //没有setter和getter方法的字段不会被序列化 private String field3; public String execute() { map.put("name", "annlee"); return Action.SUCCESS; } public String getField1() { return field1; } public void setField1(String field1) { this.field1 = field1; } public String getField2() { return field2; } public void setField2(String field2) { this.field2 = field2; } public String getField3() { return field3; } public void setField3(String field3) { this.field3 = field3; } public int[] getInts() { return ints; } public void setInts(int[] ints) { this.ints = ints; } public Map getMap() { return map; } public void setMap(Map map) { this.map = map; } @JSON(name="newName") public String getCustomName() { return this.customName; } } <struts> <constant name="struts.i18n.encoding" value="UTF-8"/> <package name="example" extends="json-default"> <action name="JSONExample" name="code">function processResponse(request){ var objectArray = JSON.parse(request.responseText); var upound = objectArray.length; for(var j =0; j < upound; j++ ){ var paramKey = objectArray[j].paramCode; if($(paramKey)){ document.getElementById("docYear_textBox").value=o bjectArray[j].paramValue; $("docYear_selectedValue").value=objectArray[j].pa ramValue; } } }