layui切换

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__STATIC__/add/layui/css/layui.css"  media="all">
  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
  
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>简洁风格的Tab</legend>
</fieldset>
 
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">
      <textarea id="demo" style="display: none;">{$list['title']}</textarea>
    </div>
    <div class="layui-tab-item">
      <textarea id="demo2" style="display: none;">{$list['reference_money']}</textarea>
    </div>
    <div class="layui-tab-item">
      <textarea id="demo3" style="display: none;">{$list['detail_img']}</textarea>
    </div>
    <div class="layui-tab-item">
    <textarea id="demo4" style="display: none;">{$list['start_time']}</textarea>
  </div>
    <div class="layui-tab-item">
      <textarea id="demo5" style="display: none;">{$list['end_time']}</textarea>
    </div>
  </div>
</div> 
 
 

</div>             
          
<script src="__STATIC__/js/jquery.min.js" charset="utf-8"></script>          
<script src="__STATIC__/add/layui/layui.js" charset="utf-8"></script>

 
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use(['element','layedit'], function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
   var layedit = layui.layedit;

  layedit.set({
  uploadImage: {
    url: '{:url(\'Achievementactivity/layuitabupload\')}' //接口url
    ,type: '' //默认post
  }
});
//注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。
  layedit.build('demo'); //建立编辑器
  layedit.build('demo2'); //建立编辑器
  layedit.build('demo3'); //建立编辑器
  layedit.build('demo4'); //建立编辑器
  layedit.build('demo5'); //建立编辑器
  
});
</script>




</body>
</html>

 

posted @ 2019-02-14 14:33  御世制人  阅读(747)  评论(0编辑  收藏  举报