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