该插件学习是基于Struts2来的,该插件的下载地址为:点击打开链接,下载该War包后,用Eclipse导入,然后我们就开始我们对继承了jquery的Struts2框架的学习。第一节我想先从官方目录上按照顺序来讲解一下锚点<s:a>的Ajax请求。
A tag that creates an HTML element, that when clicked makes an asynchronous request(XMLHttpRequest). The url attribute must be build using the <s:url/> tag。
当用户点击该链接时,该标签会异步的发送请求,这个URL属性的使用必须调用<s:url/>标签。
Samples
<%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="sj" uri="/struts-jquery-tags"%> <html> <head> <sj:head/> </head> <body> <div id="div1">Div 1</div> <s:url var="ajaxTest" value="/AjaxTest.action"/> <sj:a id="link1" href="%{ajaxTest}" targets="div1"> Update Content </sj:a> </body> </html>这是官方提供的一段简单的代码:下面将一些绑定的信息解释一下<sj:head jqueryui=true jquerytheme = "cupertino" / >这个是定义当前页面所用的jquery插件的基本样式。
<s:url var="varName" value="/AjaxTest.action"/> var是定义变量名这个要和接下来的<sj:a>标签所应用的value要一样。而且value值就是要指的调用的Action。
<sj:a id="定义他的ID名称可供下面的插件来使用"。href="采用%{value}的格式来绑定标签,这个地方用到的就是在<s:a/>标签中定义的id值" targets="改值在此定义的是div标签中的id值"/>
AJAX call to multiple result divs with Highlight Effects
Ajax对调用后的结果显示可以采用很多特殊的效果,这小效果的写法是:<sj:a id="link1" href="%{ajaxTest}" targets="div1, div2" effect="highlight" effectOptions="{ color : '#222222' }" effectDuration="3000"> Update Content </sj:a>这些效果包括:
Supported Effects are
- bounce - Bounces the element vertically or horizontally n-times.(该效果默认的是控制元素上下或左右跳动)
- highlight - Highlights the background with a defined color.(该效果是对元素实行高亮显示)
- pulsate - Pulsates the opacity of the element multiple times.(该效果默认的是控制元素时隐时现)
- shake - Shakes the element vertically or horizontally n-times.(该效果是对元素实行左右的摇摆浮动)
- size - Resize an element to a specified width and height.(改变元素大小显示)
- transfer - Transfers the outline of an element to another.(改变元素形状)
Attributes
上述是标签元素的属性。它采用的就是事件绑定。正阳对于定制相对灵活些。
Name
Required
Default
Evaluated
Type
Description
accesskey false false String Set the html accesskey attribute on rendered html element button false false false Boolean jQuery UI Button buttonIcon false false String Icons to display. The primary icon is displayed on the left of the label text. Value must be a classname (String), eg. ui-icon-gear. buttonIconSecondary false false String Icons to display. The secondary icon is displayed on the right of the label text. Value must be a classname (String), eg. ui-icon-gear. buttonText false true false Boolean Whether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored. clearForm false false Boolean Clear all form fields after successful submit when using formIds. Default: false cssClass false false String The css class to use for element cssErrorClass false false String The css error class to use for element cssErrorStyle false false String The css error style definitions for element to use cssStyle false false String The css style definitions for element to use dataType false false String Type of the result. e.g. html, xml, text, json, ... disabled false false String Set the html disabled attribute on rendered html element effect false none false String Perform a effect on the elements specified in the 'targets' attribute. e.g. bounce, highlight, pulsate, shake, size or transfer. See more details at http://docs.jquery.com/UI/Effects effectDuration false 2000 false String Duration of effect in milliseconds. Only valid if 'effect' attribute is set effectMode false none false String The Effect Mode. show, hide, toggle, none effectOptions false false String jQuery options for effect, eg 'color : #aaaaaa' for the highlight effect or 'times : 3' for the bounce effect. Only valid if 'effect' attribute is set. See more details at http://docs.jquery.com/UI/Effects errorElementId false false false String This should provide the id of the element into which the error text will be placed when an error ocurrs loading the container. If 'errorTest' is provided, that wil be used, otherwise the ajax error message text wil be used. errorText false false false String The text to be displayed on load error. If 'errorElement' is provided, this will display the error in the elemtn (if existing), if not, it will display the error as the contents of this container formIds false false String Comma delimited list of form ids for which to serialize all fields during submission when this element is clicked (if multiple forms have overlapping element names, it is indeterminate which will be used) href false false String The url to be use when this element is clicked id false false String HTML id attribute iframe false false Boolean Boolean flag indicating whether the form should always target the server response to an iframe when using formIds. This is useful in conjuction with file uploads. Default: false indicator false false String If loading content into a target, Id of element that will be displayed during loading and hidden afterwards (will override settings for the target container) javascriptTooltip false false false Boolean Use JavaScript to generate tooltips key false false String Set the key (name, value, label) for this particular component label false false String Label expression used for rendering an element specific label labelSeparator false : false String String that will be appended to the label labelposition false false String Define label position of form element (top/left) listenTopics false false String The comma separated list 'listenTopics' is the list of topic names that is used to trigger a request. loadingText false false String If loading content into a target, The text to be displayed during load (will be shown if any provided, will override settings for the target container) name false false String The name to set for element onAfterValidationTopics false false String A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed. onAlwaysTopics false false String A comma delimited list of topics that published always onBeforeTopics false false String Topics that are published before a load onBlurTopics false false String A comma delimited list of topics that published when the element is blured onChangeTopics false false String A comma delimited list of topics that published when the element changed onClickTopics false false String A comma delimited list of topics that published when the element is clicked onCompleteTopics false false String A comma delimited list of topics that published when the element ajax request is completed (will override settings for a target container if provided) onDisableTopics false false String A comma delimited list of topics that published when the element disabled onEffectCompleteTopics false false String A comma delimited list of topics that published when an effect is completed onEnableTopics false false String A comma delimited list of topics that published when the element is enabled onErrorTopics false false String A comma delimited list of topics that published when the element ajax request returns an error (will override settings for a target container if provided) onFocusTopics false false String A comma delimited list of topics that published when the element is focused onSuccessTopics false false String A comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided) onblur false false String Set the html onblur attribute on rendered html element onchange false false String Set the html onchange attribute on rendered html element onclick false false String Set the html onclick attribute on rendered html element ondblclick false false String Set the html ondblclick attribute on rendered html element onfocus false false String Set the html onfocus attribute on rendered html element onkeydown false false String Set the html onkeydown attribute on rendered html element onkeypress false false String Set the html onkeypress attribute on rendered html element onkeyup false false String Set the html onkeyup attribute on rendered html element onmousedown false false String Set the html onmousedown attribute on rendered html element onmousemove false false String Set the html onmousemove attribute on rendered html element onmouseout false false String Set the html onmouseout attribute on rendered html element onmouseover false false String Set the html onmouseover attribute on rendered html element onmouseup false false String Set the html onmouseup attribute on rendered html element onselect false false String Set the html onselect attribute on rendered html element openDialog false false String id of dialog that will be opened when clicked. openDialogTitle false false String Set the title of a dialog opened by openDialog or openDialogTopics openTemplate false false String Set template to use for opening the rendered html. replaceTarget false false false Boolean Set to true if the target should be replaced or false if only the target contents should be replaced when using formIds. requestType false POST false String Type of the AJAX Request. POST, GET, PUT required false false false Boolean If set to true, the rendered element will indicate that input is required requiredposition false false String Define required position of required form element (left|right) resetForm false false Boolean Reset the form after successful submi twhen using formIds. Default: false tabindex false false String Set the html tabindex attribute on rendered html element targets false false String A comma separated list of ids of container elements to load with the contents from the result of this request template false false String The template (other than default) to use for rendering the element templateDir false false String The template directory. timeout false 3000 false Integer jQuery options for timeout. Default is 3000 title false false String Set the html title attribute on rendered html element tooltip false false String Set the tooltip of this particular component tooltipConfig false false String Deprecated. Use individual tooltip configuration attributes instead. tooltipCssClass false StrutsTTClassic false String CSS class applied to JavaScrip tooltips tooltipDelay false Classic false String Delay in milliseconds, before showing JavaScript tooltips tooltipIconPath false false String Icon path used for image that will have the tooltip validate false false false Boolean Enable client AJAX validation validateFunction false false String A function that handle the client validation result. eg.: myValidation(form, errors) value false false String Preset the value of input element.