struts2 标签初识 Ajax Tags 下

1、head

<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<head>
  <title>My page</title>
  <sx:head debug="true" extraLocales="en-us,nl-nl,de-de"/>
</head>

cache:当浏览器读取时使用struts Dojo形式

compressed:使用压缩版本的 dojo.js

debug:使用Dojo提供调试消息

extraLocales:用于设置加载Dojo时的语言,语言要求在RFC3066中

2、submit

<sx:submit value="%{'Submit'}" />

Render an image submit:

<sx:submit type="image" value="%{'Submit'}" label="Submit the form" src="submit.gif"/>

Render a button submit:

<sx:submit type="button" value="%{'Submit'}" label="Submit the form"/>

Update target content with html returned from an action:

<div id="div1">Div 1</div>
<s:url id="ajaxTest" value="/AjaxTest.action"/>

<sx:submit id="link1" href="%{ajaxTest}" target="div1" />

Submit form(inside the form):

<s:form id="form" action="AjaxTest">
     <input type="textbox" name="data">
     <sx:submit />
</s:form>

Submit form(outside the form):

<s:form id="form" action="AjaxTest">
     <input type="textbox" name="data">
</s:form>

<sx:submit formId="form" />

Using beforeNotifyTopics:

<script type="text/javascript">
dojo.event.topic.subscribe("/before", function(event, widget){
    alert('inside a topic event. before request');
    //event: set event.cancel = true, to cancel request
    //widget: widget that published the topic
});
</script>

<sx:submit beforeNotifyTopics="/before" />

Using afterNotifyTopics and highlight target:

<script type="text/javascript">
dojo.event.topic.subscribe("/after", function(data, request, widget){
    alert('inside a topic event. after request');
    //data : text returned from request(the html)
    //request: XMLHttpRequest object
    //widget: widget that published the topic
});
</script>

<sx:submit afterNotifyTopics="/after" highlightColor="red" href="%{#ajaxTest}" />

Using errorNotifyTopics and indicator:

<script type="text/javascript">
dojo.event.topic.subscribe("/error", function(error, request, widget){
    alert('inside a topic event. on error');
    //error : error object (error.message has the error message)
    //request: XMLHttpRequest object
    //widget: widget that published the topic
});
</script>

<img id="ind1" src="${pageContext.request.contextPath}/images/indicator.gif" style="display:none"/>
<sx:submit errorNotifyTopics="/error" indicator="ind1" href="%{#ajaxTest}" />
3、tabbedPanel

/ajax/tabbedpanel/example2.jsp

1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4: 
5: <html>
6: <head>
7:     <title>Ajax examples - tabbled panel</title>
8: 
9:     <jsp:include page="/ajax/commonInclude.jsp"/>
10: </head>
11: 
12: <body>
13: 
14:     <sx:tabbedpanel id="test2" cssStyle="width: 500px; height: 300px;" doLayout="true">
15:         <sx:div label="test1"  >
16:           I'm a Tab!!!
17:         </sx:div >
18:         <sx:div  id="middle" label="test2"   >
19:           I'm the other Tab!!!
20:         </sx:div >
21:     </sx:tabbedpanel>
22: 				  
23: <s:include value="../footer.jsp"/>
24: 
25: </body>
26: </html>
1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4: 
5: <html>
6: <head>
7:     <title>Ajax examples - tabbled panel</title>
8: 
9:     <jsp:include page="/ajax/commonInclude.jsp"/>
10: </head>
11: 
12: <script>
13:     function enableTab(id) {
14:       var tabContainer = dojo.widget.byId('tabContainer');
15:       tabContainer.enableTab(id);
16:     }
17:     
18:     function disableTab(index) {
19:       var tabContainer = dojo.widget.byId('tabContainer');
20:       tabContainer.disableTab(index);
21:     }
22: </script>
23: 
24: <body>
25:     
26:     <sx:tabbedpanel id="tabContainer" cssStyle="width: 500px; height: 300px;" doLayout="true">
27:           <sx:div id="tab1" label="test1"  >
28:               Enabled Tab
29:           </sx:div >
30:           <sx:div  id="tab2" label="test2"  disabled="true" >
31:               Diabled Tab
32:           </sx:div >
33:            <sx:div  id="tab3" label="test3" >
34:               Some other Tab
35:           </sx:div >
36:       </sx:tabbedpanel>
37: 
38:     <br />
39:     
40:     <input type="button" οnclick="enableTab(1)" value="Enable Tab 2 using Index" /><!--启用标签2,ID从0开始,所以1为第二个-->
41:     <input type="button" οnclick="disableTab(1)" value="Disable Tab 2 using Index" /><!--禁用启用标签2-->
42:     
43:     <br />
44:     
45:     <input type="button" οnclick="enableTab('tab2')" value="Enable Tab 2 using Id" /><!--启用标签2-->

46:     <input type="button" οnclick="disableTab('tab2')" value="Disable Tab 2 using Id" /><!--禁用启用标签2-->
47:     
48:     <br />
49:     
50:     <input type="button" οnclick="enableTab(dojo.widget.byId('tab2'))" value="Enable Tab 2 using widget" /><!--启用标签2-->

51:     <input type="button" οnclick="disableTab(dojo.widget.byId('tab2'))" value="Disable Tab 2 using widget" /><!--禁用启用标签2-->
52: 
53: <br /> <br />     
54: <s:include value="../footer.jsp"/>
55: 
56: </body>
57: </html>

16:     <table cellpadding="0" cellspacing="10" border="0" width="600">
17:         <tr>
18:             <td align="top">
19:                 <!--// START SNIPPET: tabbedpanel-tag-->
20:                 <sx:tabbedpanel id="test2" cssStyle="width: 500px; height: 300px;" doLayout="true">
<!--设置tabbedPanel是否为显示固定高度,如果该属性设置为false则tabbedPanel的高度会随着Tab页大小的改变而改变-->
21:                       <sx:div id="left" label="left">
22:                           This is the left pane<br/>
23:                           <s:form >
24:                               <s:textfield name="tt" label="Test Text" />  <br/>
25:                               <s:textfield name="tt2" label="Test Text2" />
26:                           </s:form>
27:                       </sx:div>
28:                       <sx:div href="%{ajaxTest}" id="ryh1" label="remote one" preload="false"/><!--导入页面时导入组件-->
29:                       <sx:div id="middle" label="middle">
30:                           middle tab<br/>
31:                           <s:form >
32:                               <s:textfield name="tt" label="Test Text44" />  <br/>
33:                               <s:textfield name="tt2" label="Test Text442" />
34:                           </s:form>
35:                       </sx:div>
36:                       <sx:div href="%{ajaxTest}"  id="ryh21" label="remote right" preload="false"/>
37:                   </sx:tabbedpanel>
38:                 <!--// END SNIPPET: tabbedpanel-tag-->
39:              </td>

<sx:tabbedpanel id="test2" cssStyle="width: 500px; height: 300px;" doLayout="true" labelposition="bottom">
<!--labelposition设置Tab页面中标签的位置,可以是top(顶,这是默认值);right(右);button(底);left(左).-->
15:                       <sx:div id="left" label="test1" closable="true">
16:                           I'm a Tab!!!
17:                       </sx:div >
18:                       <sx:div  id="middle" label="test2"  closable="true"><!--设置标签是否可以关闭-->
19:                           I'm the other Tab!!!
20:                       </sx:div >
21:                      
22:                   </sx:tabbedpanel>
4、textarea
1: <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2: <%@ taglib prefix="s" uri="/struts-tags" %>
3: <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
4:
5: <html>
6: <head>
7:     <title>Ajax Widgets</title>
8:     <jsp:include page="/ajax/commonInclude.jsp"/>
9: </head>
10:
11: <body>
12:
13: <br/>
14: NOTES:
15: <ul>
16:     <li>Make sure that there is a 'value' attribute in the textarea with the content for the editor</li>
17:     <li>This is experimental</li>
18: </ul>
19:
20:
21: Default Editor configuration:<br/>
22: <s:form id="form1" action="AjaxRemoteForm" method="post">
23:     <sx:textarea name="data" cols="50" rows="10" value="Test Data 1" />
24:     <s:submit value="Submit"/>
25: </s:form>
26: <br/>
27:
28: Configured Editor configuration:<br/> 
29: <s:form id="form2" action="AjaxRemoteForm" method="post">
30:     <sx:textarea id="editor2" name="data" cols="50" rows="10" value="Test Data 2">
31:         <s:param name="editorControls">textGroup;|;justifyGroup;|;listGroup;|;indentGroup</s:param>
32:     </sx:textarea><!--?????????????????????????????????????????????-->
33:     <s:submit value="Submit"/>
34: </s:form>
35: <br/>
36:
37: <s:include value="../footer.jsp"/>
38:
39: </body>
40: </html
5、tree

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值