Thymeleaf教程 （六） 設置屬性值

目錄(?)[+]

設置屬性值

原始表單

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

• 1
• 2
• 3
• 4
• 5
• 6

我們可以通過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>

• 1
• 2
• 3
• 4
• 5
• 6

他會替換相同屬性的值。結果如下：

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

• 1
• 2
• 3
• 4
• 5
• 6

當然，有的時候我們需要一次設置多個屬性。怎麼辦?通過“，”隔開：

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

• 1
• 2

結果是：

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

• 1

通過特殊屬性設置

上面的設置值方式很通用，但是很醜陋。

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

• 1

我們提供th：*這樣的方式來替代th:attr。th:attr在項目中一般不建議使用。比如th:value

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

• 1

是不是比th:attr要簡單些，同事避免你打錯屬性。同樣的。

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

• 1

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

• 1

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}" />

• 1
• 2

或者這樣

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

• 1
• 2

追加後面和追加前面的屬性

th:attrappend 後面追加

th:attr 
前面追加

例如：cssStyle=warning，追加後面

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

• 1

即爲

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

• 1

這裏還有兩種類似的特殊屬性th:classappend 和th:styleappend

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

• 1

固定值，boolean屬性

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

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

• 1
• 2

用法：

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

• 1

固定值，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>

• 1
• 2
• 3
• 4
• 5
• 6