<!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>

layui切换的更多相关文章

  1. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  2. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  3. layui 框架 table插件 实现键盘快捷键 切换单元格编辑

    最近使用layui的框架时,发现table插件不支持键盘快捷键切换单元格,花了点时间实现此功能. 分享给有需要的朋友们~~~ 效果图 代码: 1.支持 enter,上,下,右键 切换单元格,支持隐藏列 ...

  4. layui中的tab切换

    tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...

  5. layui table 行按钮事件，启用禁用切换

    {{# ){ }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="forbidden& ...

  6. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Layui的一点小理解（上）

    首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是 ...

  8. layui 轮播图动态数据不显示问题

    layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...

  9. layui报错 "Layui hint: 模块名 xxx 已被占用" 的问题解决方案

    由于扩展模块数量众多, 于是我需要将扩展模块分类到二级文件夹中, 我在页面中是这么写的 <script> layui.extend({ courseTask: 'task/courseTa ...

随机推荐

  1. 转 RAC srvctl 管理命令

    https://czmmiao.iteye.com/blog/1762900 https://blog.csdn.net/weeknd/article/details/72358218 ------- ...

  2. Java Thread Local – How to use and code sample（转）

    转载自:https://veerasundar.com/blog/2010/11/java-thread-local-how-to-use-and-code-sample/ Thread Local ...

  3. mybatis查询mysql数据库tinyint(1)变为boolean类型

    mybatis查询mysql数据库对象转化为Map,tinyint(1)被转化为boolean类型,可以t通过避免使用tinyint(1)来解决.

  4. ubuntu18.04连接pptpd服务器（未成功）

    sudo apt-get install pptp-linux sudo pptpsetup --create testvpn --server 127.0.0.1 --username your_u ...

  5. 迅速生成项目-vue-nuxtjs

    一.介绍nuxtjs 后端渲染开源库. 参考链接:https://nuxtjs.org/guide 语言:js 模版:vue 二.从脚手架生成项目(方案A) 推荐指数:

  6. LODOP关联，打印项序号注意事项

    之前也有介绍过打印项序号:Lodop打印控件里SET_PRINT_STYLE和SET_PRINT_STYLEA如果是个给打印项添加样式,最常用的是SET_PRINT_STYLEA(0.....),第一 ...

  7. __proto__和prototype的一些理解

    var Person = function(name) { this.name = name; } var p = new Person(); new操作符的操作是 var p = {} p.__pr ...

  8. 安装Windows和Ubuntu双系统

    发现关注消息 安装Windows和Ubuntu双系统     安装Windows和Ubuntu双系统 0.552016.12.10 15:54:41字数 2101阅读 6644 这几天开始动手做毕设啦 ...

  9. js 判断字符串是否为JSON格式

    function isJSON(str) { if (typeof str == 'string') { try { var obj=JSON.parse(str); if(typeof obj == ...

  10. JAVA操作word方法

    jacob,功能非常强大,能操作word,excel和pdf.下载地址是:http://sourceforge.net/projects/jacob-project/ 1.新建一个文档  Dispat ...