zoukankan      html  css  js  c++  java
  • Thymeleaf 使用时的标签

    1 . onclick事件
       <a th:onclick="'javascript:more()'" ></a> 
    2.引入CSS样式

     <link th:href="@{fore/css/public.css}" rel="stylesheet"> 
    3.引入js 文件

     <script th:src="@{fore/js/index.js}" type="text/javascript"></script> 

    4. 引入头部信息,和尾部信息
    注:html(文件夹)/public.html 页面上的 头部和尾部信息引入

    1 <!-- 导航 头部信息--> 
    2 <!-- 导航 头部信息引入 --> 
    3 <div class="nav-container" th:fragment="topper">
    4 <div th:replace="html/public :: topper">
    5 </div> 
    6 <!-- 底部信息 -->
    7 <!-- 底部信息引入 -->
    8 <div class="att-bottom" th:fragment="footer">
    9 <div th:replace="html/public :: footer"></div>

    5. 图片引入
     <img th:src="@{fore/images/nav_icona.png}"/> 

    6.页面遍历
     <li th:each="item,i:${list}"></li> 
    7.if 判断 以及 th:text 取值

    <span th:if="${item.types==1}" style="color:green;">
    <span th:text=" ${item.coinNum}" ></span>
    <i class='fa fa-database'></i>
    </span>

    8.时间类型格式化

     <span th:text="${#dates.format(item.updateTime,'yyyy/MM/dd HH:mm')}"></span> 

    9.自定义标签属性
     <div th:attr="_tId=${item.taskId}"> 
    10.获取css样式  <i class='fa fa-database'></i>  
    获取 <i class='fa fa-database'></i> 图标样式 时,
    <i>标签不能写在th:text <span>的取值中,
    另写一个'<span>'标签 与取值的<span标签不属于同一标签内即可> (如下)

    1 <span th:if="${item.types==1}" style="color:green;">
    2 <span th:text=" ${item.coinNum}" > 
    3 </span> <i class='fa fa-database'></i> 
    4 </span> 
    这样即可获取 <i class='fa fa-database'></i>  图标样式
    11.themeleaf if标签判断显示哪一个

    根据 th:if="${item.authstate != 1}" 值判断显示哪一个

    12.themeleaf字符串拼接

     th:id="|autohomeId${i.index}|" 字符拼接两个大竖线  

    类似的 class属性等,有多个需要竖线全部包含  th:class="|per-addId per-addtype${i.index}|"  所使用的属性前要加 th 标识

  • 相关阅读:
    mysql数据库-完整性约束
    mysql数据库-常用数据类型2
    mysql数据库--常用数据类型
    mysql数据库--表的操作
    Django学习【第18篇】:Django之缓存
    Django学习【第17篇】:Django之信号
    Django学习【第16篇】:Django之Form组件自定义验证规则
    Django学习【第15篇】:Django之Form组件归类
    Django学习【第14篇】:Django之Form组件补充
    Django学习【第13篇】:Django之Form组件
  • 原文地址:https://www.cnblogs.com/atimo/p/9849640.html
Copyright © 2011-2022 走看看