Thymeleaf教程 （六） 设置属性值

设置属性值

原始表单

<form action="subscribe.html">
    <fieldset>
        <input type="text" name="email" />
        <input type="submit" value="Subscribe me!" />
    </fieldset>
</form>

我们可以通过th:attr来设置input或者form或者其他标签的属性。如：

<form action="subscribe.html" th:attr="action=@{/subscribe}">
    <fieldset>
        <input type="text" name="email" />
        <input type="submit" value="Subscribe me!" th:attr="value=#{subscribe.submit}"/>
    </fieldset>
</form>

他会替换相同属性的值。结果如下：

<form action="/gtvg/subscribe">
    <fieldset>
        <input type="text" name="email" />
        <input type="submit" value="¡Suscríbeme!"/>
    </fieldset>
</form>

当然，有的时候我们需要一次设置多个属性。怎么办?通过“，”隔开：

<img src="../../images/gtvglogo.png"
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

结果是：

<img src="/gtgv/images/gtvglogo.png" title="Logo de Good Thymes" alt="Logo de Good Thymes" />

通过特殊属性设置

上面的设置值方式很通用，但是很丑陋。

<input type="submit" value="Subscribe me!" th:attr="value=#{subscribe.submit}"/>

我们提供th：*这样的方式来替代th:attr。th:attr在项目中一般不建议使用。比如th:value

<input type="submit" value="Subscribe me!" th:value="#{subscribe.submit}"/>

是不是比th:attr要简单些，同事避免你打错属性。同样的。

<form action="subscribe.html" th:action="@{/subscribe}">

<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>

Thymeleaf属性列表

有很多这样的属性,它们每个都针对特定的XHTML或HTML5属性:
th:abbr
th:accept
th:accept-charset
th:accesskey
th:action
th:align
th:alt
th:archive
th:audio
th:autocomplete
th:axis
th:background
th:bgcolor
th:border
th:cellpadding
th:cellspacing
th:challenge
th:charset
th:cite
th:class
th:classid
th:codebase
th:codetype
th:cols
th:colspan
th:compact
th:content
th:contenteditable
th:contextmenu
th:data
th:datetime
th:dir
th:draggable
th:dropzone
th:enctype
th:for
th:form
th:formaction
th:formenctype
th:formmethod
th:formtarget
th:frame
th:frameborder
th:headers
th:height
th:high
th:href
th:hreflang
th:hspace
th:http-equiv
th:icon
th:id
th:keytype
th:kind
th:label
th:lang
th:list
th:longdesc
th:low
th:manifest
th:marginheight
th:marginwidth
th:max
th:maxlength
th:media
th:method
th:min
th:name
th:optimum
th:pattern
th:placeholder
th:poster
th:preload
th:radiogroup
th:rel
th:rev
th:rows
th:rowspan
th:rules
th:sandbox
th:scheme
th:scope
th:scrolling
th:size
th:sizes
th:span
th:spellcheck
th:src
th:srclang
th:standby
th:start
th:step
th:style
th:summary
th:tabindex
th:target
th:title
th:type
th:usemap
th:value
th:valuetype
th:vspace
th:width
th:wrap
th:xmlbase
th:xmllang
th:xmlspace

同时设置多个属性值

<img src="../../images/gtvglogo.png"
th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />

或者这样

<img src="../../images/gtvglogo.png"
th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />

追加后面和追加前面的属性

th:attrappend 后面追加

th:attr
前面追加

例如：cssStyle=warning，追加后面

<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />

即为

<input type="button" value="Do it!" class="btn warning" />

这里还有两种类似的特殊属性th:classappend 和th:styleappend

<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">

固定值，boolean属性

有一些特殊属性的值是固定的。比如checked：

<input type="checkbox" name="option1" checked="checked" />
<input type="checkbox" name="option2" />

用法：

<input type="checkbox" name="active" th:checked="${user.active}" />

固定值，boolean类型属性列表如下：

th:async

th:autofocus

th:autoplay

th:checked

th:controls

th:declare

th:default

th:defer

th:disabled

th:formnovalidate

th:hidden

th:ismap

th:loop

th:multiple

th:novalidate

th:nowrap

th:open

th:pubdate

th:readonly

th:required

th:reversed

th:scoped

th:seamless

th:selected

html5的data语法支持

属性可以在HTML5中用这种方式写：data-{prefix}-{name}

<table>
<tr data-th-each="user : ${users}">
<td data-th-text="${user.login}">...</td>
<td data-th-text="${user.name}">...</td>
</tr>
</table>