<!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. linux记录-docker配置mysql

    docker部署mysql 1.拉取镜像 docker pull mysql 2.docker  rm   containerID  删除镜像iD 3.创建镜像 docker run --name=m ...

  2. Keil MDK仿真调试STM32的时候直接进入SystemInit函数

    1. 仿真的时候,进入之后 2. 说是main()未定义,可是明明定义了,什么原因?喔,看错了,是--main.对比了一下和正常工厂的配置,都一样,换个jlink V9测试一下吧.换了个ST LINK ...

  3. sudo启动程序引发的进程个数不对

    这几天把自己负责的服务改成了多进程模型,然后使用sudo来启动进程,示例程序如下:   int main(void)   {   fork();   while(1);   }   编译: `gcc ...

  4. iOS-UIDocumentInteractionController打开和预览文档

    iOS提供了使用其他app预览文件的支持,这就是Document Interaction Controller.此外,iOS也支持文件关联,允许其他程序调用你的app打开某种文件.而且,从4.2开始, ...

  5. mysql备份时过滤掉某些库 以及 去掉"Warning: Using a password on the command line interface can be insecure."提示信息

    在对mysql进行完整备份时使用--all-database参数 # mysqldump -u root -h localhost -p --all-database > /root/all.s ...

  6. Mysql 排序优化

    原文链接:https://www.cnblogs.com/moss_tan_jun/p/6021822.html https://blog.csdn.net/lb517290079/article/d ...

  7. [转帖]浅谈响应式编程（Reactive Programming）

    浅谈响应式编程(Reactive Programming) https://www.jianshu.com/p/1765f658200a 例子写的非常好呢. 0.9312018.02.14 21:22 ...

  8. scau 10692 XYM-入门之道

    题目:http://paste.ubuntu.com/14157516/ 思路:判断一个西瓜,看看能不能直接吃完,如果能,就吃了.但是:如果不能,就要分成两半,就这样分割,不用以为要用到n维数组,用一 ...

  9. Django基础十一之认证系统

    一 auth模块 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Django作为一个 ...

  10. python + pyinstaller 实现将python程序打包成exe文件直接运行

    pyinstaller 我们在平常学习使用python的时候经常会自己编写一些小程序来使用,虽然python是跨平台的语言,但是如果我们想要在一个没有python以及很多库环境的电脑上使用我们的小程序 ...