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 标识

  • 相关阅读:
    在cmd下执行py脚本报Traceback (most recent call last)报错解决
    git上传文件方法
    js获取元素方法和jquery语法操作元素方法
    获取config.ini文件配置的方法
    利用random随机函数实现抽奖方法
    selenium封装 运行脚本+生成测试报告+发送email
    基于KB的QA系统学习记录
    python学习记录
    manjaro + kde 使用过程中问题记录及解决方法
    linux学习记录
  • 原文地址:https://www.cnblogs.com/atimo/p/9849640.html
Copyright © 2011-2022 走看看