<!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. 利用 Postman 中 Tests 断言校验返回结果

    前言 Postman目前是一款很火的接口测试工具,它有着非常强大结果判断能力.为什么说强大呢,因为Postman有自带的校验脚本,根本不需要我们去学习JS脚本语言,对于代码能力为0的各位测试小伙伴来说 ...

  2. html 图标和文字一行对齐

    原图: 效果图: 备注:vertical-align:middle <div> <p class="time tl-size12" style="pad ...

  3. Exchanger实现线程间数据交换

    package com.duchong.concurrent; import java.util.ArrayList; import java.util.List; import java.util. ...

  4. Sap MM 定义物料号码范围

    Sap里面的物料编号可以设置内部给号或者外部给号,外部的意思就是通过手动输入,内部就是系统自动根据号码段分配. 物料号是根据物料类型定义范围的. 笔记 作者:明光烁亮 出处:http://www.cn ...

  5. JavaScript图形实例：图形的旋转变换

    旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...

  6. Python3实现自动查询成绩（主要使用的包有Tesseract-OCR、PIL、execjs、pytesseract、BeautifulSoup）

    前提:本文仅作为技术训练,不可利用技术做非法的事. 某考试的成绩查询页面如下:查询成绩需要的数据有准考证号或者身份证.考生姓名.验证码.现在使用python来实现自动查询指定人员的考试成绩(不知道准考 ...

  7. Python 实现微信小程序的用户登录

    小程序可以通过官方提供的登录能力来获取用户身份的标示,具体文档可以参考 这里,通过流程时序可以看到,对于需要和前端配合的服务端开发,主要实现的就是通过小程序提供的 code 换取用户的 openid ...

  8. synchronized的不足与redis分布式锁的使用

    这里是一个简单模拟秒杀的逻辑,stock和orders为两个Map,分别模拟库存表和订单表 public void orderProductMockDiffUser(String productId) ...

  9. Redis的安装（windows）

    一.安装redis windows版本的下载在https://github.com/MicrosoftArchive/redis/tags msi是安装版,zip的解压就能用.建议下msi的. 下载挺 ...

  10. 使用RestTemplate进行服务调用的几种方式

    首先我们在名为MSG的服务中定义一个简单的方法 @RestController public class ServerController { @GetMapping("/msg" ...