<!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. oraagent.bin High Memory Usage as Dependent Listener was Removed/Renamed

    Grid Infrastructure oraagent.bin process using huge amount of memory and  forking huge number of thr ...

  2. kubernetes&prometheus 【组件】

    查看prometheus target页面可得组件 kube-state-metric: https://github.com/kubernetes/kube-state-metrics/blob/m ...

  3. 数据库分库分表中间件ShardingSphere推荐

    官网链接:http://shardingsphere.io/document/current/cn/overview/ 源起: 我今天首先去了解了一下国内好像是比较火的一个叫"MyCat&q ...

  4. Sequelize模型定义

    定义 定义模型与表之间的映射,使用 define 方法. Sequelize 会自动增加 createdAt 和 updated 属性,这样能知道一个实例的创建时间和最终修改时间.如果不想自动生成,可 ...

  5. jQuery插件——imgbox（点击图片查看大图）

    需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...

  6. Spring的定时任务@Scheduled(cron = "0 0 1 * * *")

    指定某个方法在特定时间执行,如: cron="0 0 1 1 * ?" 即这个方法每月1号凌晨1点执行一次 关于这个注解的解释网上一大堆 但是今天遇到个问题,明明加了注解@Sche ...

  7. .NET开发的一些积累

    ASP.NET项目开发一些琐碎的积累 1.过滤危险的字符串,诸如“=”.“>”等可能会诸如数据库的危险字符串,我看过很多人做的网页仅仅进行客户端脚本验证是不够的.必须在服务器段的后台代码里面也进 ...

  8. php 文字转换成拼音

    <?php //中文字转拼音 $d=array( array("a",-20319), array("ai",-20317), array("a ...

  9. WiFi、ZigBee、BLE用哪个？

    小米是这么选的: 1) 插电的设备,用WiFi: 2) 需要和手机交互的,用BLE: 3) 传感器用ZigBee. WIFI,WIFI是目前应用最广泛的无线通信技术,传输距离在100-300M,速率可 ...

  10. SecureCRT系列：生成公私钥

    SecureCRT下载地址:http://www.portablesoft.org/securecrt-securefx-legacy-versions/1.打开我们的SecureCRT客户端,点击t ...