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">
<span style="white-space: pre;"> </span><head>
<span style="white-space: pre;"> </span><sj:head scriptPath="template/" jquerytheme="start"/>
<span style="white-space: pre;"> </span><style>
<span style="white-space: pre;"> </span>.cl{
<span style="white-space: pre;"> </span>width:64px;height:24px;font-size:11px;padding:0px;margin:0px;
<span style="white-space: pre;"> </span>}
<span style="white-space: pre;"> </span></style>
<span style="white-space: pre;"> </span></head>
<span style="white-space: pre;"> </span><body>
<span style="white-space: pre;"> </span><!-- <span style="white-space: pre;"> </span><div id="result1">adsf</div>
<span style="white-space: pre;"> </span><div id="result2">adsf</div>
<span style="white-space: pre;"> </span><div id="result3">adsf</div>
<span style="white-space: pre;"> </span>
<span style="white-space: pre;"> </span>
? ? <s:url id="ajax" value="test!ajax1.action"/>
<span style="white-space: pre;"> </span><sj:a id="ajaxlink"?
<span style="white-space: pre;"> </span>href="%{ajax}"?
<span style="white-space: pre;"> </span>targets="result1,result2"?
<span style="white-space: pre;"> </span>indicator="indicator"?
<span style="white-space: pre;"> </span>button="true"?
<span style="white-space: pre;"> </span>buttonIcon="ui-icon-refresh"
<span style="white-space: pre;"> </span>cssClass="cl"
<span style="white-space: pre;"> </span>>
<span style="white-space: pre;"> </span> ?<span style="white-space: pre;"> </span>AJAX
<span style="white-space: pre;"> </span></sj:a>
<span style="white-space: pre;"> </span><hr />
<span style="white-space: pre;"> </span><div id="formResult" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<span style="white-space: pre;"> </span> <s:form id="form" action="test!ajax2.action" theme="xhtml">
? ? ?<s:textfield id="name" name="name" value=""/><br/>
? ? </s:form><span style="white-space: pre;"> </span>
<span style="white-space: pre;"> </span><sj:a?
? ? <span style="white-space: pre;"> </span>id="ajaxformlink"?
? ? <span style="white-space: pre;"> </span>formIds="form"?
? ? <span style="white-space: pre;"> </span>targets="formResult"?
? ? <span style="white-space: pre;"> </span>indicator="indicator"?
? ? <span style="white-space: pre;"> </span>button="true"?
<span style="white-space: pre;"> </span>buttonIcon="ui-icon-gear"
<span style="white-space: pre;"> </span>cssClass="cl"
? ? >
? ? ? submit
? ? </sj:a>
? ? <img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
?
? ? <hr/><span style="white-space: pre;"> </span>
?
?
?
? ? <div id="result" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<span style="white-space: pre;"> </span>?
? ? <s:url id="run" value="test!ajax1.action"/>
<span style="white-space: pre;"> </span>
<span style="white-space: pre;"> </span><sj:a?
<span style="white-space: pre;"> </span>id="ajaxlink1"?
<span style="white-space: pre;"> </span>href="%{run}"?
<span style="white-space: pre;"> </span>indicator="indicator"?
<span style="white-space: pre;"> </span>targets="result"?
<span style="white-space: pre;"> </span>onClickTopics="before"?
<span style="white-space: pre;"> </span>onCompleteTopics="complete"?
<span style="white-space: pre;"> </span>effect="pulsate"?
? ? <span style="white-space: pre;"> </span>button="true"?
<span style="white-space: pre;"> </span>buttonIcon="ui-icon-gear"
<span style="white-space: pre;"> </span>cssClass="cl"
<span style="white-space: pre;"> </span>effect="highlight"?
<span style="white-space: pre;"> </span>effect="bounce"?
<span style="white-space: pre;"> </span>effectDuration="2200"?
<span style="white-space: pre;"> </span>effectOptions="{ color : '#FFFAAA' }"?
<span style="white-space: pre;"> </span>effectDuration="3000"?
<span style="white-space: pre;"> </span>>
<span style="white-space: pre;"> </span> ?run
<span style="white-space: pre;"> </span></sj:a>
? ? <img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/> ? ?
? ? <br/>
? ? <br/>
? ? <sj:a?
? ? <span style="white-space: pre;"> </span>id="ajaxlink2"?
? ? <span style="white-space: pre;"> </span>href="error.html"?
? ? <span style="white-space: pre;"> </span>indicator="indicator2"?
? ? <span style="white-space: pre;"> </span>targets="result"?
? ? <span style="white-space: pre;"> </span>onClickTopics="before"?
? ? <span style="white-space: pre;"> </span>onCompleteTopics="complete"?
? ? <span style="white-space: pre;"> </span>onErrorTopics="errorState"?
? ? <span style="white-space: pre;"> </span>effect="pulsate"?
? ? <span style="white-space: pre;"> </span>effectDuration="1500"?
? ? <span style="white-space: pre;"> </span>button="true"?
<span style="white-space: pre;"> </span>buttonIcon="ui-icon-gear"
<span style="white-space: pre;"> </span>cssClass="cl"
? ? >
? ? ? error
? ? </sj:a>
? ? <img id="indicator2" src="images/indicator.gif" alt="Loading..." style="display:none"/> ? ?
? ? ? <script>
? ? <span style="white-space: pre;"> </span> $.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?
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>targets="result5"?
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>effect="blind"?
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>effectMode="show"
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>onEffectCompleteTopics="hideTarget"
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>value="AJAX Submit"?
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>indicator="indicator5"?
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>button="true"
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>cssClass="cl"
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>effect="pulsate"?
? ? ? ? ? ? ? ? <span style="white-space: pre;"> </span>clearForm="true"?
? ? ? ? ? ? ? ? />
? ? </s:form>
? ? <img id="indicator5" src="images/indicator.gif" alt="Loading..." style="display:none"/> ? ?
?
<span style="white-space: pre;"> </span><div id="result5" class="result ui-widget-content ui-corner-all" style="display: none;">Submit form bellow.</div>
?
Form Submit with AJAX form Button.
<span style="white-space: pre;"> </span><s:form id="listenForm1" action="test!ajax1.action">
<span style="white-space: pre;"> </span><sj:submit?
<span style="white-space: pre;"> </span>id="submit1"?
<span style="white-space: pre;"> </span>value="Submit Button"
<span style="white-space: pre;"> </span>onClickTopics="listenOnClick1"
<span style="white-space: pre;"> </span>targets="result1"?
<span style="white-space: pre;"> </span>effect="highlight"
<span style="white-space: pre;"> </span>button="true"
<span style="white-space: pre;"> </span>/>
<span style="white-space: pre;"> </span></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.
<span style="white-space: pre;"> </span><s:form id="listenForm2">
<span style="white-space: pre;"> </span><s:url id="formurl1" action="test!ajax1.action" namespace="/message" />
<span style="white-space: pre;"> </span><sj:submit?
<span style="white-space: pre;"> </span>id="submit2"?
<span style="white-space: pre;"> </span>href="%{formurl1}"?
<span style="white-space: pre;"> </span>value="Listen/Submit Button"?
<span style="white-space: pre;"> </span>formIds="listenForm2"
<span style="white-space: pre;"> </span>targets="result2"?
<span style="white-space: pre;"> </span>effect="highlight"
<span style="white-space: pre;"> </span>listenTopics="listenOnClick1"?
<span style="white-space: pre;"> </span>button="true"
<span style="white-space: pre;"> </span>/>
<span style="white-space: pre;"> </span></s:form>
<span style="white-space: pre;"> </span> ?
?
</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">
<span style="white-space: pre;"> </span><s:url id="remoteurl" action="test!ajax2"/>
<span style="white-space: pre;"> </span><sj:textarea?
<span style="white-space: pre;"> </span>href="%{remoteurl}"?
<span style="white-space: pre;"> </span>id="echo"?
<span style="white-space: pre;"> </span>name="echo"?
<span style="white-space: pre;"> </span>rows="10"?
<span style="white-space: pre;"> </span>cols="80"?
<span style="white-space: pre;"> </span>effect="highlight"?
<span style="white-space: pre;"> </span>effectDuration="1500"?
<span style="white-space: pre;"> </span>loadingText="Loading content of textarea ..."
<span style="white-space: pre;"> </span>/>
<span style="white-space: pre;"> </span><sj:submit?
<span style="white-space: pre;"> </span>targets="result"?
<span style="white-space: pre;"> </span>effect="slide"?
<span style="white-space: pre;"> </span>value="AJAX Submit"?
<span style="white-space: pre;"> </span>indicator="indicator"?
<span style="white-space: pre;"> </span>button="true"
<span style="white-space: pre;"> </span>/>
<span style="white-space: pre;"> </span><img id="indicator"?
<span style="white-space: pre;"> </span>src="images/indicator.gif"?
<span style="white-space: pre;"> </span>alt="Loading..."?
<span style="white-space: pre;"> </span>style="display:none"/>
? ? </s:form>
?
<span style="white-space: pre;"> </span><div id="result" class="result ui-widget-content ui-corner-all" style="display:none;width:200px;height:100px;">Submit form bellow.</div>
?
<span style="white-space: pre;"> </span></body>
</html>
<div><br>