Struts2的Ajax支持(二)Struts2的Ajax标签.-AJAX教程-爱易网页

Struts2的Ajax支持(二)Struts2的Ajax标签.

日期：2014-05-16　浏览次数：20698 次

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>

　　简单Tab页面，doLayout属性设置是否使用固定高度<br>

　

　<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>

　　有任何问题，都可以发邮件给我。<br>

　　

</s:div > 

　　</s:tabbedPanel> 

　　</body> 

　　</html>

　　我们还可以为closeButton指定值来为Tab页面增加关闭按钮。但是在一般情况下并没有这种需求。

　　tabbedPanel在Tab页中使用动态内容有两种方法：1，直接为div标签指定href属性。2，在div标签中使用Ajax主题的div。实际上，对于tabbedPanel的每个Tab页面而言，都只是一个简单的容器，用于包含其他的HTML组件。动态的tabbedPanel的JSP页面代码如下：

　　<%@ 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>

　　使用JSON插件实现Ajax

　　1，JSON基础知识

　　JSON插件是Struts2的Ajax插件，通过利用JSON插件，允许开发者以非常灵活简单的方式来开发Ajax应用。

　　JSON的全称是JavaSrcipt Object Notation,即http://www.mso.com.cn/#对象符号,它是一种轻量级的数据交换格式.JSON的数据格式既适合人类的读写,也适合计算机的解析和生成.最早的时候,JSON是http://www.mso.com.cn/#语言的数据交换格式,后来发展成一种语言无关的数据交换格式,这点类似于XML.

　　JSON提供了多种语言之间完成数据交换的能力,因此,JSON也是一种非常理想的数据交换格式,JSON主要有如下两种数据结构:

　　1,由key-value对组成的数据结构,这种数据结构在不同的语言中,有不责骂的实现.例如:在http://www.mso.com.cn/#中是一个

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Struts2的Ajax支持(二)Struts2的Ajax标签.

相关资料更多>

推荐阅读更多>