struts2.1提供Ajax标签实现各种选项卡效果
按照下面操作进行
1.现在使用的时候首先要导入一个库 :
struts2-dojo-plugin-2.1.6.jar
2.在要生成日期控件的页面头部加上:
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
3.然后在web页面的head标签下面加上<sx:head/>
也可以加上下面两句话
扫描二维码关注公众号,回复:
844829 查看本文章
- <s:head theme="xhtml"/>
- <sd:head parseContent="true"/>
4.实现各种选项卡效果的示例:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <%@ taglib uri="/struts-dojo-tags" prefix="sx"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>struts2.1选项卡标签Tabbedpanel示例</title> <sx:head /> </head> <body> <!-- tabbedpanel标签 --> <!-- 最简单的选项卡,两个选项卡加载都是本页面 --> <hr color="blue"> <b>最简单的选项卡:</b> <br> <sx:tabbedpanel id="tab1"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" > Local Tab 2 </sx:div> </sx:tabbedpanel> <!-- 加载其他页面的选项卡 --> <hr color="blue"> <b>加载其他页面的选项卡:</b> <br> <sx:tabbedpanel id="tab2"> <sx:div label="Remote Tab 1" href="upload.jsp"> Remote Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="multipleUpload.jsp" > Remote Tab 1 </sx:div> </sx:tabbedpanel> <!-- 设置选项卡底下的内容懒加载,即等需要的时候再加载 ,使用属性preload="false"--> <hr color="blue"> <b>设置选项卡底下的内容懒加载,即等需要的时候再加载 ,使用属性preload="false":</b> <br> <sx:tabbedpanel id="tab3"> <sx:div label="Remote Tab 1" href="upload.jsp"> Remote Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="multipleUpload.jsp" preload="false"> Remote Tab 1 </sx:div> </sx:tabbedpanel> <!-- 固定大小的选项卡 --> <hr color="blue"> <b>固定大小的选项卡,使用属性cssStyle和doLayout:</b> <br> <sx:tabbedpanel cssStyle="width: 200px; height: 100px;" doLayout="true" id="tab4"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" > Local Tab 2 </sx:div> </sx:tabbedpanel> <!-- 每次点击选项卡时都重新刷新内容 --> <hr color="blue"> <b>每次点击选项卡时都重新刷新内容,使用属性refreshOnShow:</b> <br> <sx:tabbedpanel id="tab5"> <sx:div label="Remote Tab 1" href="upload.jsp" refreshOnShow="true"> Remote Tab 1 </sx:div> <sx:div label="Remote Tab 2" href="multipleUpload.jsp" refreshOnShow="true"> Remote Tab 2 </sx:div> </sx:tabbedpanel> <!-- 使得其中一个选项卡失效 --> <hr color="blue"> <b>使得其中一个选项卡失效:</b> <br> <sx:tabbedpanel id="tab6"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" disabled="true"> Local Tab 2 </sx:div> </sx:tabbedpanel> <!-- 设置选项卡在底部显示 (可以是: top, right, bottom, left) --> <hr color="blue"> <b>设置选项卡在底部显示 (可以是: top, right, bottom, left):</b> <br> <sx:tabbedpanel id="tab7" labelposition="bottom" cssStyle="width:200px;height:100px;" doLayout="true"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" > Local Tab 2 </sx:div> </sx:tabbedpanel> <!-- 设置选项卡允许关闭,使用属性closeable --> <hr color="blue"> <b>设置选项卡允许关闭,使用属性closeable:</b> <br> <sx:tabbedpanel id="tab8"> <sx:div label="Tab 1" > Local Tab 1 </sx:div> <sx:div label="Tab 2" closable="true"> Local Tab 2 </sx:div> </sx:tabbedpanel> </body> </html>