Struts-jquery插件的学习(一)----AnchorTag

  该插件学习是基于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
accesskeyfalse falseStringSet the html accesskey attribute on rendered html element
buttonfalsefalsefalseBooleanjQuery UI Button
buttonIconfalse falseStringIcons to display. The primary icon is displayed on the left of the label text. Value must be a classname (String), eg. ui-icon-gear.
buttonIconSecondaryfalse falseStringIcons to display. The secondary icon is displayed on the right of the label text. Value must be a classname (String), eg. ui-icon-gear.
buttonTextfalsetruefalseBooleanWhether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored.
clearFormfalse falseBooleanClear all form fields after successful submit when using formIds. Default: false
cssClassfalse falseStringThe css class to use for element
cssErrorClassfalse falseStringThe css error class to use for element
cssErrorStylefalse falseStringThe css error style definitions for element to use
cssStylefalse falseStringThe css style definitions for element to use
dataTypefalse falseStringType of the result. e.g. html, xml, text, json, ...
disabledfalse falseStringSet the html disabled attribute on rendered html element
effectfalsenonefalseStringPerform 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
effectDurationfalse2000falseStringDuration of effect in milliseconds. Only valid if 'effect' attribute is set
effectModefalsenonefalseStringThe Effect Mode. show, hide, toggle, none
effectOptionsfalse falseStringjQuery 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
errorElementIdfalsefalsefalseStringThis 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.
errorTextfalsefalsefalseStringThe 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
formIdsfalse falseStringComma 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)
hreffalse falseStringThe url to be use when this element is clicked
idfalse falseStringHTML id attribute
iframefalse falseBooleanBoolean 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
indicatorfalse falseStringIf loading content into a target, Id of element that will be displayed during loading and hidden afterwards (will override settings for the target container)
javascriptTooltipfalsefalsefalseBooleanUse JavaScript to generate tooltips
keyfalse falseStringSet the key (name, value, label) for this particular component
labelfalse falseStringLabel expression used for rendering an element specific label
labelSeparatorfalse:falseStringString that will be appended to the label
labelpositionfalse falseStringDefine label position of form element (top/left)
listenTopicsfalse falseStringThe comma separated list 'listenTopics' is the list of topic names that is used to trigger a request.
loadingTextfalse falseStringIf 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)
namefalse falseStringThe name to set for element
onAfterValidationTopicsfalse falseStringA comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
onAlwaysTopicsfalse falseStringA comma delimited list of topics that published always
onBeforeTopicsfalse falseStringTopics that are published before a load
onBlurTopicsfalse falseStringA comma delimited list of topics that published when the element is blured
onChangeTopicsfalse falseStringA comma delimited list of topics that published when the element changed
onClickTopicsfalse falseStringA comma delimited list of topics that published when the element is clicked
onCompleteTopicsfalse falseStringA comma delimited list of topics that published when the element ajax request is completed (will override settings for a target container if provided)
onDisableTopicsfalse falseStringA comma delimited list of topics that published when the element disabled
onEffectCompleteTopicsfalse falseStringA comma delimited list of topics that published when an effect is completed
onEnableTopicsfalse falseStringA comma delimited list of topics that published when the element is enabled
onErrorTopicsfalse falseStringA comma delimited list of topics that published when the element ajax request returns an error (will override settings for a target container if provided)
onFocusTopicsfalse falseStringA comma delimited list of topics that published when the element is focused
onSuccessTopicsfalse falseStringA comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided)
onblurfalse falseStringSet the html onblur attribute on rendered html element
onchangefalse falseStringSet the html onchange attribute on rendered html element
onclickfalse falseStringSet the html onclick attribute on rendered html element
ondblclickfalse falseStringSet the html ondblclick attribute on rendered html element
onfocusfalse falseStringSet the html onfocus attribute on rendered html element
onkeydownfalse falseStringSet the html onkeydown attribute on rendered html element
onkeypressfalse falseStringSet the html onkeypress attribute on rendered html element
onkeyupfalse falseStringSet the html onkeyup attribute on rendered html element
onmousedownfalse falseStringSet the html onmousedown attribute on rendered html element
onmousemovefalse falseStringSet the html onmousemove attribute on rendered html element
onmouseoutfalse falseStringSet the html onmouseout attribute on rendered html element
onmouseoverfalse falseStringSet the html onmouseover attribute on rendered html element
onmouseupfalse falseStringSet the html onmouseup attribute on rendered html element
onselectfalse falseStringSet the html onselect attribute on rendered html element
openDialogfalse falseStringid of dialog that will be opened when clicked.
openDialogTitlefalse falseStringSet the title of a dialog opened by openDialog or openDialogTopics
openTemplatefalse falseStringSet template to use for opening the rendered html.
replaceTargetfalsefalsefalseBooleanSet to true if the target should be replaced or false if only the target contents should be replaced when using formIds.
requestTypefalsePOSTfalseStringType of the AJAX Request. POST, GET, PUT
requiredfalsefalsefalseBooleanIf set to true, the rendered element will indicate that input is required
requiredpositionfalse falseStringDefine required position of required form element (left|right)
resetFormfalse falseBooleanReset the form after successful submi twhen using formIds. Default: false
tabindexfalse falseStringSet the html tabindex attribute on rendered html element
targetsfalse falseStringA comma separated list of ids of container elements to load with the contents from the result of this request
templatefalse falseStringThe template (other than default) to use for rendering the element
templateDirfalse falseStringThe template directory.
timeoutfalse3000falseIntegerjQuery options for timeout. Default is 3000
titlefalse falseStringSet the html title attribute on rendered html element
tooltipfalse falseStringSet the tooltip of this particular component
tooltipConfigfalse falseStringDeprecated. Use individual tooltip configuration attributes instead.
tooltipCssClassfalseStrutsTTClassicfalseStringCSS class applied to JavaScrip tooltips
tooltipDelayfalseClassicfalseStringDelay in milliseconds, before showing JavaScript tooltips
tooltipIconPathfalse falseStringIcon path used for image that will have the tooltip
validatefalsefalsefalseBooleanEnable client AJAX validation
validateFunctionfalse falseStringA function that handle the client validation result. eg.: myValidation(form, errors)
valuefalse falseStringPreset the value of input element.
上述是标签元素的属性。它采用的就是事件绑定。正阳对于定制相对灵活些。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值