Layui 特效

用 layui 做项目，记录一些容易忘掉的知识点

1. 如果想在首页点击按钮弹出登入的 iframe , ajax 提交表单后，自动关闭这个iframe

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //执行关闭自身操作

$.ajax({
    url:"/movie/login",
    type:"post",
    data:{
        'score':name,
        'content':pass
    },
    success:function (data) {

        // 评论成功，关闭弹出框
        layer.msg('登入成功!', {
            icon: 1,
            time: 2000 //2秒关闭（如果不配置，默认是3秒）
        }, function(){
            // 消息显示成功 2s 后自动关闭该 iframe
            console.log("准备关闭当前 iframe!");
            
            // 在父级 html 中关闭 iframe
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //执行关闭自身操作
        });

    }
});

2. 在页面中传递参数给子 iframe

parent是js自带的全局对象，可用于操作父页面
最常见的 如 获取layer index： var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

//在 iframe 页面可以 用parent 来操作父页面啊。
// 子 iframe 可以拿到页面的数据
var id = parent.$('#父页面元素id').html( );

3. th:block 使用

th:block 相当于一个空标签，不会向页面增加任何的标签，适合与 th:if … 结合使用

场景：如果没有登入则显示xxxx，登入成功后，session 中有 user数据，显示 xxx

<!-- 如果用户不存在，没有登入，显示下方代码 -->
 <th:block  th:if="not ${user}">
     <li class="layui-nav-item">
         <a href="javascript:;">
             注册
         </a>


     <li class="layui-nav-item">
         <a href="javascript:;">
            登入
         </a>
     </li>

 </th:block>
 
 <th:block th:if="${user}">
     <!--如果有下面片段，显示用户信息-->
     <li class="layui-nav-item" >
         <a href="javascript:;">
             <img src="http://t.cn/RCzsdCq" th:href="${user.imgUrl}" class="layui-nav-img">
             [[${user.username}]]
         </a>
         <dl class="layui-nav-child">
             <dd><a href="">基本资料</a></dd>
             <dd><a href="">安全设置</a></dd>
         </dl>
     </li>
     <li class="layui-nav-item"><a href="#">退了</a></li>
 </th:block>

4. 选择显示

   <div th:switch="${user.role}" th:if="${user}" >
       <p th:case="'admin'">User is an administrator</p>
       <p th:case="'user'">User is a manager</p>
       <p th:case="*">User is some other thing</p>
   </div>