Struts2 jQuery Plugin Showcase 学习笔记
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<sj:head scriptPath="template/" jquerytheme="start"/>
<style>
.cl{
width:64px;height:24px;font-size:11px;padding:0px;margin:0px;
}
</style>
</head>
<body>
<!-- <div id="result1">adsf</div>
<div id="result2">adsf</div>
<div id="result3">adsf</div>
<s:url id="ajax" value="test!ajax1.action"/>
<sj:a id="ajaxlink"
href="%{ajax}"
targets="result1,result2"
indicator="indicator"
button="true"
buttonIcon="ui-icon-refresh"
cssclass="cl"
>
AJAX
</sj:a>
<hr />
<div id="formResult" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<s:form id="form" action="test!ajax2.action" theme="xhtml">
<s:textfield id="name" name="name" value=""/><br/>
</s:form>
<sj:a
id="ajaxformlink"
formIds="form"
targets="formResult"
indicator="indicator"
button="true"
buttonIcon="ui-icon-gear"
cssclass="cl"
>
submit
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
<hr/>
<div id="result" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<s:url id="run" value="test!ajax1.action"/>
<sj:a
id="ajaxlink1"
href="%{run}"
indicator="indicator"
targets="result"
onClickTopics="before"
onCompleteTopics="complete"
effect="pulsate"
button="true"
buttonIcon="ui-icon-gear"
cssclass="cl"
effect="highlight"
effect="bounce"
effectDuration="2200"
effectOptions="{ color : '#FFFAAA' }"
effectDuration="3000"
>
run
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
<br/>
<br/>
<sj:a
id="ajaxlink2"
href="error.html"
indicator="indicator2"
targets="result"
onClickTopics="before"
onCompleteTopics="complete"
onErrorTopics="errorState"
effect="pulsate"
effectDuration="1500"
button="true"
buttonIcon="ui-icon-gear"
cssclass="cl"
>
error
</sj:a>
<img id="indicator2" src="images/indicator.gif" alt="Loading..." style="display:none"/>
<script>
$.subscribe('beforeLink', function(event,data) {
alert('Before request ');
$('#result').html('Loading ...');
});
$.subscribe('completeLink', function(event,data) {
$('#result').append('<br/><br/><strong>Completed request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);
});
$.subscribe('errorStateLink', function(event,data) {
$('#result').html('<br/><br/><strong>Error request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);
});
</script>
<hr/>
<s:form id="formEffect" action="test!ajax2.action" theme="xhtml">
<s:textfield id="name" name="name" label="name" value=""/><br/>
<sj:submit
targets="result5"
effect="blind"
effectMode="show"
onEffectCompleteTopics="hideTarget"
value="AJAX Submit"
indicator="indicator5"
button="true"
cssclass="cl"
effect="pulsate"
clearForm="true"
/>
</s:form>
<img id="indicator5" src="images/indicator.gif" alt="Loading..." style="display:none"/>
<div id="result5" class="result ui-widget-content ui-corner-all" style="display: none;">Submit form bellow.</div>
Form Submit with AJAX form Button.
<s:form id="listenForm1" action="test!ajax1.action">
<sj:submit
id="submit1"
value="Submit Button"
onClickTopics="listenOnClick1"
targets="result1"
effect="highlight"
button="true"
/>
</s:form>
</div>
<div id="result1" class="ui-widget-content ui-corner-all">Result Div for Form One</div>
<br/>
<h3>Form Two</h3>
<div>
Following Form Submit Button is Listen on Submit Button in Form One.
<s:form id="listenForm2">
<s:url id="formurl1" action="test!ajax1.action" namespace="/message" />
<sj:submit
id="submit2"
href="%{formurl1}"
value="Listen/Submit Button"
formIds="listenForm2"
targets="result2"
effect="highlight"
listenTopics="listenOnClick1"
button="true"
/>
</s:form>
</div>
<div id="result2" class="ui-widget-content ui-corner-all">Result Div for Form Two</div>
-->
<s:form id="formTextarea" action="test!ajax2" theme="simple" cssclass="yform">
<s:url id="remoteurl" action="test!ajax2"/>
<sj:textarea
href="%{remoteurl}"
id="echo"
name="echo"
rows="10"
cols="80"
effect="highlight"
effectDuration="1500"
loadingText="Loading content of textarea ..."
/>
<sj:submit
targets="result"
effect="slide"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator"
src="images/indicator.gif"
alt="Loading..."
style="display:none"/>
</s:form>
<div id="result" class="result ui-widget-content ui-corner-all" style="display:none;width:200px;height:100px;">Submit form bellow.</div>
</body>
</html>