maven+thymeleaf笔记-3

须接maven+thymeleaf笔记-2

---

为标签添加任意属性

<p id="pattr" th:attr="pname = ${product.name},pprice = ${product.price}">点击我</p>    <p>用th:*替代th:attr</p>    <p id="tattr" th:tname="${product.name}" th:tprice="${product.price}">点击我</p>    <script type="text/javascript">        $("#pattr").click(function(){            var pname = $("#pattr").attr("pname");            var pprice = $("#pattr").attr("pprice");            alert(pname);            alert(pprice);        });        $("#tattr").click(function(){            var tname = $("#tattr").attr("tname");            var tprice = $("#tattr").attr("tprice");            alert(tname);            alert(tprice);        });    </script>

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

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

<p class="one" th:attrappend="class=${' ' + 'two'}" th:classappend="'three'">向后面追加属性</p>上面等价：<p class="one two three"></p>

if unless

<p th:if="3 == 3">布尔值为true就显示</p><p th:unless="3 == 5">布尔值为false就显示</p>

switch

<p th:case="'200'">与switch中的值一样显示</p>    <p th:case="'30'">与switch中的值不一样，不显示</p>    <p th:case="*">*代表如果前面都没有与switch中的值相同，那么就显示这个</p>

模板导入

<div th:fragment="copy">            &copy; 在home2.html页面定义一个代码片段叫做copy    </div>    <hr/>    <p>引用home2.html页面的copy代码片段</p>    <div th:include="home2 :: copy"></div>    <p>另外的一种写法</p>    <div th:include="home2 :: [copy]"></div>    <p>在本页面的写法</p>    <div th:include="this :: [copy]"></div>    <br><br>    <p>不使用th:fragment来引用模块</p>    <div id="另外的一种写法">        不使用fragment    </div>    <hr>    <div th:include="this :: #另外的一种写法"></div>th:include和th:replace都可以引入模块，两者的区别在于 th:include：引入子模块的children，依然保留父模块的tag。 th:replace：引入子模块的所有，不保留父模块的tag。 案例：<footer th:fragment="copyfooter">        &copy; 2011 The Good Thymes Virtual Grocery    </footer><div th:include="this :: [copyfooter]"></div><div th:replace="this :: [copyfooter]"></div>效果如下：include:<div>    &copy; 2011 The Good Thymes Virtual Grocery</div>replace:<footer>    &copy; 2011 The Good Thymes Virtual Grocery</footer>

给引入模块添加参数

<div th:fragment="addvalue(one,two)">        <div th:text="${one}+'---添加参数---'+${two}"></div>    </div>    <hr>    <div th:include="this :: addvalue('曹雪坤','曹老大')"></div>    <p>另一种写法</p>    <div th:include="this :: addvalue(one='曹雪坤',two='曹老大')"></div>

th:remove总共有五种属性：

all : 移除tag标记和children。body：保留tag标记和移除children。tag :移除tag和保留children.all-but-first :保留tag和移除除了第一个外的所有children。none :什么都不做。

<table>    <tr>        <th>NAME</th>        <th>PRICE</th>        <th>IN STOCK</th>        <th>COMMENTS</th>    </tr>    <tr>        <td>Onions</td>        <td>2.41</td>        <td>yes</td>        <td>            <span>2  comment/s</span>        </td>    </tr>    效果就是th:remove="all"在网页查看源代码所有对应tr都删除了    <tr class="odd" th:remove="all">        <td>Blue Lettuce</td>        <td>9.55</td>        <td>no</td>        <td>        <span>0</span> comment/s    </td>    </tr>    <tr th:remove="all">        <td>Mild Cinnamon</td>        <td>1.99</td>        <td>yes</td>        <td>        <span>3</span> comment/s        <a >view</a>        </td>    </tr></table>

th:block用来定义一个代码块。并执行里面的属性。这将在循环的时候特别有用。

<table>    <th:block th:each="productsi : ${products}">    <tr>        <td th:text="${productsi.price}">...</td>        <td th:text="${productsi.name}">...</td>    </tr>    <tr>        <td colspan="2" th:text="${productsi.id}">...</td>    </tr>    </th:block> </table>

在文本中使用表达式

为了使其生效，必须在此标签或者任何父标签上有th:inline属性。此属性有三种值（text , javascript and none）。值得类型可以是：    Strings    Numbers    Booleans    Arrays    Collections    Maps    Beans (objects with getter and setter methods) <p id="ptest" th:inline="text">Hello, [[${product.name}]] 点击我可以看到th:inline在js中的应用</p><script th:inline="javascript">    var test = [[${products}]];    $("#ptest").click(function(){        for(var i =0;i<test.length;i++){            alert(test[i].name);        }    });</script>